浏览原文：【技术分享】怎么用Kbone进行小程序开发？

点击关注“八戒技术团队”，浏览更多技术干货

小程序的设计并没有完全遵守 Web 规范，致使小程序生态和传统 Web 开产生态之间的割裂， Web 端丰富的工具库其实不能直接用于小程序开发。另外一方面，业界有着存量的 H5 利用，中短时间内 H5 利用适配到小程序真个需求还会存在。开发者希望能减少 H5 利用迁移到小程序真个本钱，乃至能够直接运行在小程序端。

基于以上两点，出现了一批小程序和 Web 端同构的解决方案，其中比较典型的是 Kbone 和 Taro 3。本文主要介绍微信团队推出的 Kbone 框架。

►►►

Kbone是甚么

Kbone 是微信官方开源的解决微信小程序和 Web 端同构的框架。简单来讲就是只写一套代码，编译结果可以在 Web 端和微信小程序上运行。通过使用 Kbone 框架，可以用偏向 Web 真个方式来开发小程序，在开发进程中可以不限制使用哪一种框架和库，可使用你善于的技术栈来开发，比如：

1.可使用 React、Vue 2、Vue 3、jQuery 等框架来开发；

2.可使用 HTML 标签进行开发，可使用div、span、a、img等标签；

需要注意的是，Kbone 只支持微信小程序和 Web 端，不支持其它小程序平台。

►►►

Kbone的原理

为了让 Web 真个代码运行在小程序里，Kbone 实现了一个适配器，在适配层里摹拟出了浏览器环境，从而抹平了 Web 端和微信小程序真个平台差异，使用让 Web 真个代码不做太多改动就能够运行在小程序中。

Web端框架基本原理

首先我们来看下普通 Web 端框架，以 Vue 框架为例。一份 Vue 模板对应一个组件，在代码构建阶段编译成调用 Dom 接口的JS函数，履行此JS函数就会创建出组件对应的 Dom 树，从而渲染到浏览器页面上。

但是，小程序是双线程的，并没有 Dom 树的概念，逻辑层和视图层完全分离，在逻辑层中开发者可以编写JS脚本，但是没法直接调用 Dom/Bom 的 API。在小程序中，视图层和逻辑层的交互是通过数据和事件驱动的。因此，要实现跨端同构，问题是：怎样将Web端代码转为小程序代码？

业界常规做法:编译时兼容

目前业界流行的第三方跨端框架的常规做法是：编译时兼容。

静态编译的原理是把代码语法分析一遍，然后将其中的模板部份翻译成对应真个模板（微信小程序、支付宝小程序、H5、APP等）。静态编译最大的局限性是没法保证转换的完全性，由于 Vue 模板和 WXML 模板的语法其实不是直接对等的，Vue 的特性设计也和小程序的设计没法划等号，这自然就致使了部份 Vue 特性的丢失。

比如像 Vue 中的 v-htm l指令、ref获得 Dom 节点、过滤器等功能就在小程序里没法使用。除 Vue 本身的特性外，一些本来依赖 Dom/Bom 接口的 Vue 插件也在小程序没法使用，例如 Vue-Router。

Kbone的做法:运行时兼容

Kbone 是通过提供适配器的方式来实现同构，即运行时兼容，而非静态编译。Kbone 实现了一个适配层，在适配层里摹拟出了浏览器环境，让 Web 真个代码可以不做甚么改动即可运行在小程序里。

Kbone 适配层部份使用到了两个NPM包：

miniprogram-render：仿制 Dom/Bom 接口，构造仿制 Dom 树；

miniprogram-element: 监听仿制 Dom 树变化，渲染到页面，同时监听用户行动，触发事件；

除此以外还需要一个 Webpack 插件来根据原始的 Web 端代码生成小程序代码，由于小程序代码包和 Web 真个代码区别，它有固定的结构，这个插件就是mp-webpack-plugin。

miniprogram-render、miniprogram-element 和 mp-webpack-plugin 这三个包即是 Kbone 的核心。

miniprogram-render：提供 Dom/Bom 接口适配，构建 DOM 树；

miniprogram-element：将 HTML 内容转换成小程序的内置组件进行界面渲染；

mp-webpack-plugin： 根据 Web 项目代码生成小程序代码；

►►►

Kbone的优势和劣势

由于 Kbone 是通过运行时兼容的方式来实现同构，所以它的优势很明显：

1.大部份流行的前端框架和库都能够在 Kbone 上运行，比如 Vue、React、Preact、Angular、Ember、jQuery 等，可使用自己喜欢的框架来开发小程序；

2.支持更加完全的前端框架特性（比如 Vue 中的 v-html 指令、Vue-router 插件）；

3.可以十分方便地将 Web 端项目迁移到小程序端；

4.在小程序端运行时，照旧可使用小程序本身的特性（比如像 live-player 内置组件、分包功能、各种小程序插件）；

5.提供了一些 Dom 扩大接口，让一些没法完善兼容到小程序真个接口也有替换使用方案（比如 getComputedStyle 接口）；

不是所有的方案都是无懈可击的，Kbone 也不例外。Kbone 是使用一定的性能消耗来换取更加全面的 Web 端特性支持。由于多了一层适配层，会带来额外性能消耗，使得基于Kbone的小程序的运行效力低于采取原生方式和静态编译方式开发的小程序。

►►►

技术选型

业内其实已出现了很多关于同构的解决方案了，每一个方案都有自己的优劣，不存在能够完善解决所有问题的方案。Kbone 也一样，它的优势在上面提到过，而它的不足也是它的实现原理带来的，Kbone 是使用一定的性能消耗来换取更加全面的 Web 端特性支持。

如果你对小程序的性能特别刻薄，建议直接使用原生小程序开发；如果你的页面节点数量特别多（通常在 1000 节点以上），同时还要保证在节点数无穷上涨时照旧有稳定的渲染性能的话，可以尝试一下业内采取静态模板转译的方案；其他情况就能够直接采取 Kbone 了。

详细了解了 Kbone 以后，我们来分析下小程序技术框架到底应当怎样选？

• 如果你已有 H5 代码，只想增加微信小程序平台，并且对性能要求不高，可以斟酌 Kbone；
• 如果你熟习 React，不懂 Vue.js，推荐Taro；
• 如果你熟习 Vue.js，则推荐 uni-app、Taro3；
• 如果你的业务触及多端，更推荐 uni-app、Taro3；

小程序在非常快速的更新迭代，没有哪一种框架是百分之百完善，需要根据业务具体需求和本身技术栈偏好来进行选择。

►►►

总结

在 Kbone 框架中，实现了一个 Web 真个适配器，使基于 Web 端开发的程序能运行在微信小程序中，一套代码实现微信小程序和 Web 端同构。使用适配器进行运行时兼容的做法，使得运行在 Web 真个代码能运行在小程序上，这为小程序的开发与 Web 端开发体验的统一带来了便利。

另外一方面，由于适配层的性能消耗，使得基于 Kbone 的小程序的运行效力低于原生小程序和静态编译方式开发的小程序。没有哪一种框架是百分之百完善，需要根据业务具体需求和本身技术栈偏好来进行选择。

参考文献：

https://wechat-miniprogram.github.io/kbone/docs

https://developers.weixin.qq.com/community/minihome/article/doc/0006a6326b8d38e56b998833456813

https://developers.weixin.qq.com/community/minihome/article/doc/0004a20a114a28608669881bc5c013

希望以上内容能对有需要的人有所帮助

欢迎大家留言写下自己希望了解的技术方向

欢迎大家一起探讨交换

本文来源：https://www.yuntue.com/post/64945.html | 云服务器网，转载请注明出处！