『HTML』Kbone，十分钟让 Vue 项目同时支持小程序 |浏览器|设计|路由器|

微信小程序开发过程中，许多开发者会遇到小程序与 Web 端一起的需求，由于小程序与 Web 端的运行环境不同，开发者往往需要维护两套类似的代码，这对开发者来说比较耗费力气，并且会出现不同步的情况。
小程序作为web的配套必需品，已经成为开发者不可避免的工作。多终端、多形态的开发无疑徒增工作量，费力不讨好。 Kbone 就是一个致力于微信小程序和 Web 端同构的解决方案。一套代码同时开发完微信小程序以及web端。
基本结构
首先，我们来看下一个基本的 kbone 项目的目录结构（这里的 todo 是基于 Vue 的示例，kbone 也有 React，Preact，Omi 等版本，详情可移步 kbone github ）。
因为 kbone 是为了解决小程序与 Web 端的问题，所以每个目录下的配置都会有两份（小程序与 Web 端各一份）

本文插图
入口
不管是小程序端还是 Web 端，都需要入口文件。在 src/index 目录下，main.js 为 Web 端用主入口，main.mp.js 则为小程序端用主入口。
当然， Web 端会比小程序多一个入口页面，即 index.html （位于根目录下）。

本文插图
下面两段代码分别是小程序端入口与 Web 端入口的代码，可以看到小程序端的入口代码封装在 createApp 函数里面（这里固定即可），内部会比 Web 端多一个创建 app 节点的操作，其他的基本就是一致的。
【『HTML』Kbone，十分钟让 Vue 项目同时支持小程序】

本文插图
todo.vue
在上面的入口图可以看到，源码目录中，除了入口文件分开之前，页面文件就是共用的了，这里直接使用 Vue 的写法即可，不用做特殊的适应。
配置
写完代码之后，我们要怎么跑项目呢？这时，配置就派上用场啦。
Web 端配置为正常的 Vue 配置，小程序端配置与 Web 端配置的唯一不同就是需要引入 mp-webpack-plugin 插件来将 Vue 组件转化为小程序代码。

本文插图
构建代码
接着，我们需要构建代码，让代码可以运行到各自的运行环境中去。构建完成后，生产代码会位于 dist 目录中。

本文插图
小程序端的构建会比 Web 端的构建多一个步骤，就是 npm 构建。
进入 dist/mp 目录，执行 npm install 安装依赖，用开发者工具将 dist/mp 目录作为小程序项目导入之后，点击工具栏下的构建 npm，即可预览效果。
效果
最后，我们来看一下 todo 的效果。 kbone 初体验， done~
todo 代码可到 kbone/demo13 自提。

本文插图
具体方案实现
接下来就来探讨下具体方案的实现。
社区 Web 端是基于 Vue 实现的，使用了 Vue-router、Vuex 等插件。 Vue 想必大家挺熟悉的了，它是市面上一款非常流行的 Web 框架，提供组件化等特性，其原理大致如下：

本文插图
Vue 模板可以认为是一种附加了一些特殊语法的 HTML 片段，一般来说一份 Vue 模板对应一个组件，在构建阶段编译成调用 Dom 接口的 JS 函数，调用此 JS 函数就会创建出组件对应的 Dom 树片段进而渲染到浏览器上。小程序里是支持运行 JS 的，但是这里用到的 Dom 接口和渲染到浏览器上的功能小程序不具备，所以无法直接将 Web 端社区代码移植到小程序中。原因就在于小程序为了安全和性能而采用了双线程的架构，运行用户 JS 代码的逻辑层是一个纯粹的 JSCore ，没有任何浏览器相关的实现，这里得想办法将 Web 端代码转成小程序代码。