微信小程序诞生至今，渗透到用户生活的方方面面，包括餐厅点餐，网上购物，乘车出行，挂号就医…… 做为开发者，你是否有这样的烦恼？ “当 Web 项目完成之后，产品也想搭一套一样的在小程序端。” 这时的你，是不是有种透心凉的感觉？再搭一套同样的项目，肯定会有成本。比如同时维护两套类似的代码，这对于开发者来说是相当头疼的一件事情！！ 针对上述的问题，微信小程序推出了 Kbone 来解决微信小程序的同构问题。Kbone是什么，以及做了什么，我们继续来一探究竟。 Kbone 是什么 Kbone 是一个致力于微信小程序和 Web 端同构的解决方案。 微信小程序的底层模型和 Web 端不同，我们想直接把 Web 端的代码挪到小程序环境内执行是不可能的。Kbone 的诞生就是为了解决这个问题，它实现了一个适配器，在适配层里模拟出了浏览器环境，让 Web 端的代码可以不做什么改动便可运行在小程序里。 这样，我们就可以借助 Kbone 快速实现 Web 项目转化为微信小程序项目。 Kbone的优劣 你可能想问：“市面上同构的方案那么多？我为什么要选择 Kbone 呢？” 这里，我们来谈谈 Kbone 到底有什么优势。 1）大部分流行的前端框架都能够在 Kbone 上运行，比如 Vue、React、Preact 等。 2）支持更为完整的前端框架特性，因为 Kbone 不会对框架底层进行删改（比如 Vue 中的 v-html 指令、Vue-router 插件）。 3）提供了常用的 DOM/BOM 接口，让用户代码无需做太大改动便可从 Web 端迁移到小程序端。 4）在小程序端运行时，仍然可以使用小程序本身的特性（比如像 live-player 内置组件、分包功能）。 5）提供了一些 Dom 扩展接口，让一些无法完美兼容到小程序端的接口也有替代使用方案（比如 getComputedStyle 接口）。 那么，Kbone 就没有劣势吗？ 不是所有的方案都是无懈可击的，就像每个人都有优缺点，Kbone 也不例外。 Kbone 是使用一定的性能损耗来换取更为全面的 Web 端特性支持。 如何选择同构方案？ 因为 Kbone 会损耗一定的性能，所以我们建议你这样选择： 1）如果你对小程序的性能特别苛刻，建议直接使用原生小程序开发。 2）如果你的页面节点数量特别多（通常在 1000 节点以上），同时还要保证在节点数无限上涨时仍然有稳定的渲染性能的话，可以尝试一下业内采用静态模板转译的方案。 3）其他情况就可以直接采用 Kbone 了。 快速上手 说了这么多，你肯定想知道 Kbone 到底是怎么用的。下面我们就来看看～ 如果，你的项目还没有开始，那么推荐你使用 kbone-cli 来快速开发。只需两步： 1）安装 kbone-cli [代码]npm install -g kbone-cli [代码] 2）创建项目 [代码]kbone init my-app [代码] [图片] [图片] 项目初始化成功后，就可以按照 [代码]README.md[代码] 的指引进行开发～ 自行搭建 如果你不想要使用官方提供的模板，想要更灵活地搭建自己的项目，又或者是想对已有的项目进行改造，那么只需要自己补充对应配置来实现 Kbone 项目的构建。 一般需要补充两个配置： 构建到小程序代码的 webpack 配置。 使用 webpack 构建中使用到的特殊插件 mp-webpack-plugin 配置。 具体配置方式和操作流程 点此查看。 最后 如果你对 Kbone 感兴趣或者有相关问题需要咨询， 欢迎加入 Kbone 技术交流 QQ 群：926335938 。

什么是kbone 微信小程序开发过程中，许多开发者会遇到 小程序 与 Web 端一起的需求，由于 小程序 与 Web 端的运行环境不同，开发者往往需要维护两套类似的代码，这对开发者来说比较耗费力气，并且会出现不同步的情况。 为了解决上述问题，微信小程序推出了同构解决方案 [代码]kbone[代码] 来解决此问题。 那么，[代码]kbone[代码] 要怎么使用呢？这里我们将通过一个 [代码]todo[代码] 的例子来跟大家讲解。 基本结构 首先，我们来看下一个基本的 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[代码] 节点的操作，其他的基本就是一致的。 [代码]// 小程序端入口 import Vue from 'vue' import todo from './todo.vue' export default function createApp() { // 创建app节点用于绑定 const container = document.createElement('div') container.id = 'app' document.body.appendChild(container) return new Vue({ el: '#app', render: h => h(todo) }) } [代码] [代码]// web端入口 import Vue from 'vue' import todo from './todo.vue' new Vue({ el: '#app', render: h => h(todo) }) [代码] todo.vue 在上面的入口图可以看到，源码目录中，除了入口文件分开之前，页面文件就是共用的了，这里直接使用 Vue 的写法即可，不用做特殊的适应。 配置 写完代码之后，我们要怎么跑项目呢？这时，配置就派上用场啦。 Web 端配置为正常的 Vue 配置，小程序端配置与 Web 端配置的唯一不同就是需要引入 [代码]mp-webpack-plugin[代码] 插件来将 Vue 组件转化为小程序代码。 [图片] 构建代码 接着，我们需要构建代码，让代码可以运行到各自的运行环境中去。构建完成后，生产代码会位于 dist 目录中。 [代码]// 构建 web 端代码 // 目标代码在 dist/web npm run build // 构建小程序端代码 // 目标代码在 dist/mp npm run mp [代码] 小程序端 的构建会比 Web 端的构建多一个步骤，就是 npm 构建。 进入 [代码]dist/mp[代码] 目录，执行 [代码]npm install[代码] 安装依赖，用开发者工具将 [代码]dist/mp[代码] 目录作为小程序项目导入之后，点击工具栏下的 [代码]构建 npm[代码]，即可预览效果。 效果 最后，我们来看一下 todo 的效果。kbone 初体验，done~ todo 代码可到 kbone/demo13 自提。 [图片] 最后 如果你想了解更多 kbone 相关的使用及详情，可移步 kbone github。 如有疑问，可到 Kbone小主页 发帖沟通。