Kbone 框架快速上手：把 Web 端代码直接移植到小程序的工具是否好用？

做者：张泽栓
首发于知晓云公众号，阅读原文

近日，微信官方开始推广一个新的多端统一开发工具——Kbone。

据官方介绍，Kbone 是一个致力于微信小程序和 Web 端同构的解决方案。具体来讲，由于微信小程序的底层模型和 Web 端不一样，因此若是咱们想直接把 Web 端的代码挪到小程序环境内执行是不可能的。Kbone 的诞生就是为了解决这个问题，它实现了一个适配器，在适配层里模拟出了浏览器环境，让 Web 端的代码能够不作什么改动即可运行在小程序里。

由于 kbone 是经过提供适配器的方式来实现同构，因此微信表示其优点有如下几点：

• 大部分流行的前端框架都可以在 Kbone 上运行，好比 Vue、React、Preact 等。
• 支持更为完整的前端框架特性，由于 Kbone 不会对框架底层进行删改（好比 Vue 中的 v-html 指令、Vue-router 插件）。
• 提供了经常使用的 dom/bom 接口，让用户代码无需作太大改动即可从 Web 端迁移到小程序端。
• 在小程序端运行时，仍然可使用小程序自己的特性（好比像 live-player 内置组件、分包功能）。
• 提供了一些 Dom 扩展接口，让一些没法完美兼容到小程序端的接口也有替代使用方案（好比 getComputedStyle 接口）。

对于这个前端同构框架，知晓云以前也略有耳闻。咱们比较关注的是官方宣传的优势——提供了经常使用的 DOM/BOM 接口，让用户代码无需作太大改动即可从 Web 端迁移到小程序端。

抱着拉出来溜溜的心态，咱们找了几个 web 项目，使用 Kbone 框架迁移到小程序端。结果让我大失所望。

我总共试了三个项目，其中两个跑了起来，一个直接放弃。项目一卡在了属性选择器和轮播图上；项目二卡在 css-in-js 上；项目三是后端渲染的模版，这个直接没法使用。过程当中主要遇到的问题就是样式。过程细节就省略了，都是泪。下面是我这几回尝试总结下来的几个要点与问题。

1、配置

这个按照官方文档配置，问题不大。须要注意如下几个问题：

• 若是在小程序中不想把所有内容都在一个页面的渲染的话，webpack 须要配置多入口；
• eval 相关的 devtool 不能用，例如 cheap-module-eval-source-map；
• css 样式必须抽离出 css 文件。

2、axios 在微信小程序中使用

使用对应的 adapt，问题不大。使用如下代码解决：

3、DOM/BOM 接口的兼容性问题

官方提供了 DOM/BOM 的拓展接口，问题不大。这次遇到了如下两个问题：

一、兼容性。例如 Event 对象以浏览器提供接口并不彻底一致，使用如下代码兼容（只是举例说明，并未作彻底的兼容测试）：

二、某些接口须要本身实现，例如：

4、样式

迁移应用到小程序，最大的问题应该就是样式。这个也是因为微信小程序自身的限制。除非小程序自己支持，不然框架也是无能为力的。主要有如下几个问题：

• 不支持「属性选择器」以及其余微信小程序不支持的选择器；
• 小程序端某些组件的样式问题，例如，input 组件在渲染成 view + 自定义组件，样式需作特殊处理；
• 部分 css-in-js 框架不支持抽离 css 文件，没法在小程序上使用。

5、页面鉴权

因为小程序端的页面模版是前端渲染的，没法经过后端对页面鉴权，也没法 redirect。

6、后端渲染

后端渲染没法使用。我迁移的第三个应用，因为 SEO 的须要，采用「后端渲染 + vue（非同构）」的技术栈。一样，因为小程序端的模版是前端渲染出来的，没法迁移该项目。

7、调试

这个问题有点大。前面的问题，能够经过改代码或新项目经过技术选型避开。可是在开发的过程当中，没有调试工具，这是个灾难。目前惟一能用的只有 wxml 节点树页面。可是这个的问题也很大。绝大部分的元素都渲染成了 view，而且每一个节点都差很少。例以下图，这一堆东西，看到就头疼。

虽然旧项目迁移很不顺利，可是使用 Kbone 开发新项目，相对来讲，体验好不少，也顺利不少。咱们直接使用了官方的 cli 工具初始化项目，并开发了「知晓云 SDK demo」应用（源码）。界面以下图：

开发过程当中遇到的阻碍，也是「样式」和「调试工具」的问题。这里跟你们介绍一下，Kbone 框架接入知晓云后端云服务 SDK 的步骤：
一、安装 SDK npm 包。

npm install minapp-sdk 或 yarn add minapp-sdk
二、package.josn 里添加 alias。

三、scripts/webpack.mp.config.js 里添加 alias。

四、在须要用的 sdk 的文件中引入 「baas」模块。

完成了以上几步，便可在不一样平台中引入对应的 sdk。

结论：

从咱们目前的体验来看，Kbone 能够帮助开发者将 Web 端的代码编译到微信小程序端，这为开发者节省了时间；但另外一方面，新的框架不但有学习成本，并且同构框架不免会遇到兼容性问题。

打个比方，项目维护的工做量并不是是简单的 2 - 1 = 1，结果多是 1.一、1.2 或 1.3。在咱们看来，若是超过了 1.5 那几乎没有使用的必要了。因为没作完整的体验，而且框架也在迭代开发中，这里并不能下结论。

另外，因为微信小程序自身的缘由，框架对样式的支持也是有限制的，这还得靠开发者本身避开。

所以，咱们建议，Kbone 仍是适合从头开始作的新项目，若是是迁移旧项目，必定要调研清楚以前的技术栈是否支持 Kbone。毕竟 Kbnoe 只是提供了一个「类 web 的 JS 执行环境」，而一个项目可否跑正常起来还有其余的不少因素，前端的技术栈也是五花八门。

另外还有一个问题可能，若是使用了 Kbone，以前 Web 端使用的第三方组件颇有可能不能正常工做了。多是 JS 问题，也多是样式问题。

---

关于 Kbone 框架就介绍到这里啦，若是你须要获取文中所说起的源码，请在知晓云公众号后台回复「Kbone」。