Kbone多端方案分析

本文做者：IMWeb IMWeb团队 原文出处：IMWeb社区 未经赞成，禁止转载

这篇分析，可能微信的同窗来写会更合适。这里只是作了次体验，记录体验中遇到的问题以及一些想法。

简介

kbone主要提供了编写web端代码，编译到小程序端的能力。web端采用的框架是vue，而后提供一个适配层在小程序端适配web端代码。详细介绍参考：github.com/wechat-mini…

原理

build阶段

kbone提供了一个webpack插件，该插件在vueLoaderPlugin处理后继续处理chunk，添加小程序端特定方法的封装，以及window和document的注入，小程序端配置的注入。

runtime阶段

代码运行时，咱们在web使用的dom和bom，kbone提供了miniprogram-render这个适配层来兼容，包括cookie，history，storage等，这些api的实现大多数都是基于事件机制。那么在小程序端，代码是如何接入适配层的？kbone实现了自定义组件wx-component，该组件的实如今miniprogram-render这个包，在web端，该组件呈现为web component，小程序端就是一个自定义组件element。该组件进行节点渲染的逻辑参考https://github.com/wechat-miniprogram/kbone/blob/develop/packages/miniprogram-element/src/util/tool.js#L33

对比其余框架

这里不作详细对比，taro，mpvue，wepy等框架对比，网上不少文章能够参考。相比较于这些多端框架，kbone的出发点不同，多是历史缘由，kbone的多端尝试采用了vue而不是react，而后提供适配层来支持dom和bom等，让小程序端尽可能能使用web端的能力，目标也只是两个端。其余框架出发点是多端，按约定的开发模式编译到各个端不一样的代码，各个端提供一个运行时来保证代码的正确运行，这些多端框架的主要限制仍是框架自己。

组件适配

上面提到的大多数组件都是经过wx-component来进行兼容，对于某些dom组件到小程序组件的直接映射，最近kbone也提供了支持

div -> view

input -> input

ttextarea -> textarea

video -> video

若是咱们咱们在web端写的某些dom标签，小程序端不支持，kbone会直接将其转为view，好比小程序端的text标签，测试发现wx-component尚未支持，使用span替换后，在小程序端表现为view。

从web转到小程序后，主要使用的仍是web端能力。有些小程序端标签特有的属性，kbone转换后会丢失。好比image标签，mode属性在小程序端使用的，而且image必须设置高度才能在小程序端表现正常，web端设置宽度后，高度是能够自适应的。

样式兼容

处理特定组件表现两端稍有点不同，另外一个问题就是样式的覆盖了。kbone转换后，会内置一套h5-xxx的样式，来适配他的自定义组件，可是编译后这些样式的优先级有点高，会覆 盖咱们业务里的样式，这个应该是他提供的webpack插件处理的问题。使用kbone开发时能够注意下这个问题。

实战体验

把以前作的一个小程序活动页采用kbone简单实现了下，样式直接复用以前小程序端的样式，效果以下

H5

小程序

体验过程当中的几个问题

上面分析过程当中大体也提到了，text组件采用span标签编译成view才能展现，image组件，在web端，采用<wx-component behavior="image" src="" />不生效，直接使用img标签代替，不过mode等image组件特有属性不会被编译过来，图片得设置高度，否则小程序端表现有点不正常，能够见上图。样式覆盖问题，见上图课程块的间隙。这里只是一个简单的活动页，可能还有其余坑还没踩到，踩到的同窗能够交流下。

开发体验

如何接入kbone？对于已有的小程序项目，不建议直接接入。kbone编译到小程序端会带来vue-runtime，无形增长了包的体积，wxs文件在web端使用不了，以前封装的小程序端的公共方法，须要从新实现一遍。包括现有小程序端状态，如何与转换后的状态共享通讯的问题，都须要好好考虑。

若是是新项目，或者活动页，咱们仍是能够尝试用kbone来尝鲜的，毕竟kbone官方已经开始投入了，后面确定会推广。除了上面提到的一些坑，咱们还须要考虑用户体验。采用kbone的方式，在web端，路由采用vue-router，编译到小程序端后，会发现页面间的跳转和web端无异，由于咱们就只有一个页面，跳路由只是视图的切换，不会有小程序端切路由的原生效果了。若是咱们也想有小程序端原生效果呢？也能够办到的，在web端，webpack的entry加入多个打包路口，采用多页的方式，而不是单页路由，跳转的时候采用location的api，该API在小程序端实现兼容了tabBar跳转以及其余页面跳转，webview跳转也作了兼容。采用该方案进行路由后，可想而之，web端咱们应用的全局状态，就不能采用相似vuex这样的状态管理工具了，可能会借助storage或者其余的方法，这个我暂时还没想到。

那么怎么开始开发？官方已经提供了多个demo供咱们参考。不过这些demo并非开箱即用的，咱们须要在官方提供的webpack配置文件里加入一些开发配置，如devServer等，后面能够基于官方配置整理一套开发配置出来，这件事kbone也在作了，kbone仓库下有个vue-cli-plugin-kbone包，官方推出后，后面直接使用vue cli，开发体验可能会更好。

总结

尽管kbone目前还不够完善，不太小程序团队也持续在推动，有官方的支持，相信kbone会发展起来。

能够踩坑，值得一试！

参考

github.com/wechat-mini…