点击关注“八戒技术团队”，阅读更多技术干货
小程序的设计并没有完全遵循 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
希望以上内容能对有需要的人有所帮助
欢迎大家留言写下自己希望了解的技术方向
欢迎大家一起探讨交流
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。