手把手带你入门微信小程序新框架Kbone的使用
Kbone框架
前些天在微信上收到了微信开发者公众号的文章推送《揭开微信小程序Kbone的神秘面纱》，心想：微信小程序有新框架了？抱着学习的态度点进去看了一眼，看过之后觉得这框架也太宠开发者了吧，不愧是微信团队出品。
原来这个框架早在去年就已经发布了，看完只恨自己没有早点知道消息开始学习这个框架。我写本文的目的也是为了跟个风，想要让更多的人能够知道这个框架，感受它的便利，希望好学的你可以停下脚步看看~
Kbone是什么？
看到这里我也不多说了，简单介绍一下Kbone是什么。用官方高大上的话来说：
Kbone是一个致力于微信小程序和Web端同构的解决方案，在适配层里模拟出浏览器环境，让Web端的代码可以不做什么改动便可运行在小程序里。
用简单粗暴一点的话来说，Kbone这个框架可以让你只需要写一份代码，就能够在两端运行，只需要进行一些配置，轻松跑小程序和Web两个端。
Kbone初探---todoList
吹了这么多，也该上手写代码了。刚开始入门Kbone，我们从一个简单的todoList开始，当然，官方也提供了一系列的demo，我也参考了官方给的demo。Talkischeap，let'sseethecode~
预览
正式开始之前我们先看看效果图，感受一下Kbone框架一份代码跑两端的神奇
开发准备
安装脚手架/初始化项目
npminstall-gkbone-cli kboneinitto-do-list
代码构建
npmrunbuild
(具体的页面介绍后面会讲到)
Coding
来到src/home/index.vue，项目的首页入口放在这里(至于为什么是这里，后面同样会介绍到)
在这里直接写业务代码就可以了，为了不使文章显得臃肿，有兴趣的可以看我的源码。
项目运行
- 小程序端：npmrunmp
- Web端:npmrunweb
通过两个命令把项目运行起来你就会发现Kbone的神奇之处，通过一份代码(这里我是基于Vue)你就可以拥有两端的效果，再也不用担心同时维护两份代码了。
Kbone进阶---多页开发
刚才做了一个比较简单的todoList，对Kbone进行了一个简单的了解，到这里正式进入重点，接下来我们就来详细的讲讲它的使用和多页开发。
Kbone目录了解
├─build │├─miniprogram.config.js//mp-webpack-plugin配置 │├─webpack.base.config.js//Web端构建基础配置 │├─webpack.dev.config.js//Web端构建开发环境配置 │├─webpack.mp.config.js//小程序端构建配置 │└─webpack.prod.config.js//Web端构建生产环境配置 ├─dist │├─mp//小程序端目标代码目录，使用微信开发者工具打开，用于生产环境 │└─web//web端编译出的文件，用于生产环境 ├─src │├─common//通用组件 │├─mp//小程序端入口目录 ││├─home//小程序端home页面 │││└─main.mp.js//小程序端入口文件 ││└─other//小程序端other页面 ││└─main.mp.js//小程序端入口文件 │├─detail//detail页面 │├─home//home页面 │├─list//list页面 │├─router//vue-router路由定义 │├─store//vuex相关目录 │├─App.vue//Web端入口主视图 │└─main.js//Web端入口文件 └─index.html//Web端入口模板
通过官方给我们的这个目录结构，我们可以很清晰的看到每个目录下各个文件的作用。这里我就对其中的一些文件进行解释一下。
miniprogram.config.js
这个文件是关于小程序端的一些配置，类似于原生的json配置
webpack.mp.config.js
小程序端构建配置，也就是构建小程序端代码的webpack配置，多页开发中会用到其中的一部分配置。
src/mp&main.mp.js
mp用来存放小程序端的入口文件，这里设置小程序的一些页面，main.mp.js相当于一个挂载操作，把它看成mpvue里面的main.js比较好理解，设置页面路由和挂载映射Vue里面的页面。
(其他的比较好理解，我就不一一赘述了)
Kbone多页开发
因为作者之前写了一个微信小程序的高仿项目，有兴趣的可以去看看：