江苏龙网

  1. 首页 > 人文 > >

『HTML』Kbone，十分钟让 Vue 项目同时支持小程序( 三 )


本文插图
比如上图的例子 ， 我们封装了一个 custom-dom 组件 ， 这个组件里面也使用了 custom-dom 组件用于渲染子组件 。 那么只要我们执行一下 setData ， 把 children 数据传递过去就可以创建出子组件 ， 子组件本身也是 custom-dom 组件 ， 它同样可以执行这个逻辑把各自的子组件创建出来 ， 这样就实现了组件的递归创建 ， 只要我们拥有完整的 Dom 树结构 ， 就可以创建出相对应的一棵组件树 。
『HTML』Kbone，十分钟让 Vue 项目同时支持小程序
本文插图
这里递归的终止条件是遇到特定节点、文本节点或者孩子节点为空 。 然后在创建出组件树后 ， 将 Dom 节点和自定义组件实例进行绑定以便后续的 Dom 更新和操作即可 。
我们将其归纳为两个模块：仿造接口和自定义组件 。 正因为这个方案是通过提供适配器的方式来仿造出 Web 环境 ， 所以用户代码不需要做任何魔改 ， 大部分特性都可以继续使用不需要被删减 ， 比如 vue-router、window.location 操作等 。

『HTML』Kbone，十分钟让 Vue 项目同时支持小程序
本文插图
原本 Web 端代码是基于 Vue 来搭建的 ， 其中还用到了诸多插件/库 ， 如 Vue-router、Vuex、Markdown-it 等 ， 同时还支持了服务端渲染 。 但是不管 Web 端是怎么实现的 ， 底层终究是调浏览器的那些接口 ， 所以对于用户层面的代码我们不做任何调整 ， 只是将浏览器那一层替换掉即可 。
『HTML』Kbone，十分钟让 Vue 项目同时支持小程序
本文插图
整个构建流程是基于 Webpack 来实现的 ， 使用 Kbone 构建出小程序代码也是基于 Webpack 来实现 ， 只需要在原本 Web 端构建流程上实现一个 Webpack 插件 ， 在构建原本 Web 端代码到小程序端时追加 Kbone 和一些小程序相关的代码即可


推荐阅读


上一篇：『华为荣耀』千元机终结者，麒麟810+屏下指纹，价格真便宜

下一篇：##男子酒后打排球将表弟打伤后回家睡觉，结果表弟10天后死亡