Kbone 框架
前些天在微信上收到了微信开发者公众号的文章推送《揭开微信小程序Kbone的神秘面纱》，心想：微信小程序有新框架了？抱着学习的态度点进去看了一眼，看过之后觉得这框架也太宠开发者了吧，不愧是微信团队出品。
原来这个框架早在去年就已经发布了，看完只恨自己没有早点知道消息开始学习这个框架。我写本文的目的也是为了跟个风，想要让更多的人能够知道这个框架，感受它的便利，希望好学的你可以停下脚步看看~
Kbone 是什么？
看到这里我也不多说了，简单介绍一下 Kbone 是什么。用官方高大上的话来说：
Kbone 是一个致力于微信小程序和 Web 端同构的解决方案，在适配层里模拟出浏览器环境，让 Web 端的代码可以不做什么改动便可运行在小程序里。
用简单粗暴一点的话来说，Kbone 这个框架可以让你只需要写一份代码，就能够在两端运行，只需要进行一些配置，轻松跑小程序和 Web 两个端。
Kbone 初探 --- todoList
吹了这么多，也该上手写代码了。刚开始入门 Kbone，我们从一个简单的 todoList 开始，当然，官方也提供了一系列的demo，我也参考了官方给的 demo。Talk is cheap，let's see the code ~
预览
正式开始之前我们先看看效果图，感受一下 Kbone 框架一份代码跑两端的神奇
开发准备
安装脚手架/初始化项目
npm install -g kbone-cli kbone init to-do-list
代码构建
npm run build
(具体的页面介绍后面会讲到)
Coding
来到 src/home/index.vue，项目的首页入口放在这里(至于为什么是这里，后面同样会介绍到)
在这里直接写业务代码就可以了，为了不使文章显得臃肿，有兴趣的可以看我的源码。
项目运行
小程序端：npm run mp Web端: npm run web
通过两个命令把项目运行起来你就会发现 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 多页开发
因为作者之前写了一个微信小程序的高仿项目，有兴趣的可以去看看：
