江苏龙网

  1. 首页 > 资讯 > 科技 > >

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


『HTML』Kbone，十分钟让 Vue 项目同时支持小程序
本文插图

业界常见做法：将 Vue 模板直接转成小程序的 WXML 模板
那么问题来了 ， 如何将 Vue 代码转成小程序代码？这里先看下业界常见的做法：将 Vue 模板直接转成小程序的 WXML 模板 。
使用做法相当于抛弃了浏览器中建 Dom 树的过程 ， 而是直接交由小程序来对模板进行编译创建出小程序的模板树 ， 进而渲染到小程序页面中 。
一般来说这个做法对于普通场景是够用的 ， 但是对于一些更复杂的场景就很不好处理了 ， 比如社区中的一个简单例子：社区帖子详情展示富文本内容 ， 点击内容中的图片可预览 。
这主要是因为 Vue 模板和 WXML 模板的语法并不是直接对等的 ， Vue 的特性设计也和小程序的设计无法划等号 ， 这自然就导致了部分 Vue 特性的丢失 。 比如像 Vue 中的 v-html 指令、ref 获取 Dom 节点、过滤器等就通通用不了 。 当然不止是 Vue 自身的特性 ， 一些原本依赖 Dom/Bom 接口的 Vue 插件也无法使用 ， 比如 Vue-router 等 ， 而这些正是社区高度依赖的 ， 在不对社区代码做大范围改造的话是无法使用此方案的 。
此路不通 ， 那还有其他的方法么？
换个思路：做一个适配层
答案是有的 ， 这里我们就得换一种思路来解决这个问题 。 回到最初的点上 ， 我们无法将 Web 端代码移植到小程序中是因为小程序没有 Dom 接口 ， 那么我们想办法做出一个适配层 ， 将这个差异给抹掉不就行了么？
有了想法就要实施 ， 仿造出 Dom 接口并不难 ， 事实上在 Nodejs 端就有人做过类似的事 ， 比如 jsDom 这个库的实现 ， 让我们可以在没有真实浏览器环境下可以对一些依赖 Dom 接口的 Web 端代码进行测试 。
仿造了 Dom 接口给 Vue 调用 ， 进而创建出了仿造 Dom 树 。 根据前面提到的小程序架构 ， 用户的 JS 代码是执行在逻辑层的 ， 也就是说我们创建出的 Dom 树也是存在与逻辑层的内存之中 ， 接下来要解决的难题是如何将这棵 Dom 树渲染到小程序页面中 。
这里需要先简单介绍一下小程序的渲染原理：小程序的双线程架构 ， 逻辑层会执行用户的 JS 代码进而产生一组数据 ， 这组数据会发往视图层；视图层接收到数据后 ， 结合用户的 WXML 模板创建出组件树 ， 之后小程序再将组件树渲染出来 。 这里的组件树和 Dom 树很类似 ， 只是它是由官方内置组件或自定义组件拼接而成而不是 Dom 节点 。 这里我们能不能将仿造出来的 Dom 树映射到小程序的组件树上？
小程序组件树是根据 WXML 模板创建出来的 ， 而仿造 Dom 树结构是不稳定的 ， 我们无法提前预知它会生成什么样的结构 ， 也就无法提前准备后可以描述任意 Dom 树的 WXML 模板 ， 除非直接将 Vue 模板转换成 WXML 模板 ， 但这样又绕回前面的问题上了 。
小程序组件树中的组件有两种：内置组件和自定义组件 ， 内置组件是由官方提供的如 video、map 这样的组件 ， 而自定义组件是一种支持由用户利用现有组件自行组装的组件 ， 能否利用它来做些什么？
『HTML』Kbone，十分钟让 Vue 项目同时支持小程序
本文插图

使用 Web 端概念来做个简单解释 ， 内置组件就像是 div、span 这些 HTML 标签 ， 而自定义组件就像是 Web 中的 Vue 组件 。 Vue 组件可以将 HTML 标签以及其他的 Vue 组件进行组装 ， 自定义组件同理 ， 主要用于功能模块的抽象、封装和复用 。 不过自定义组件有个很奇妙的特性 ， 它支持自引用 ， 也就是说它可以自己引用自己来进行组装 。
自定义组件可以自己引用自己 ， 那么我们就可以利用这个特性来进行递归创建组件 ， 进而创建出一棵组件树：
『HTML』Kbone，十分钟让 Vue 项目同时支持小程序


推荐阅读


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

下一篇：iPhone：你不用，不代表他不强！华为面对苹果也不得不“低头”