小程序使用vant-dialog组件内容出不来_微信官方小程序同构新方案Kbone全解析

导语 | 

本文是Kbone作者june在云加社区微信群中的分享整理总结而成(编辑：尾尾)。同时，june将出席11月16日的TWeb腾讯前端技术大会，欢迎现场交流。

大家好，我是来自腾讯微信小程序团队的前端开发工程师：june。小程序作为一种新兴地链接用户与服务的方式，相信大家都或多或少接触过。对于开发者来说，它是一种类似 Web 但又不同于 Web 的开发模式，它提供了一套自定义的 API 和文件组织方式，这无疑带给开发者一定的学习成本和维护成本，所以我们也在尝试能否提供一个方案来抹平这个差异。

接下来就进入我今天要分享的话题：Kbone——微信小程序同构方案新思路。本次分享包括四个部分：背景、方案、应用和结语。

一、Kbone诞生背景

首先我们先进入背景部分的介绍。之所以会有 Kbone 这个方案出现，源自于一个需求：微信开放社区当时只有 Web 端，为了让信息可以更方便地传播、分享和使用，希望实现社区小程序版，交互体验尽量贴近于 Web 端。

注微信开放社区链接：

https://developers.weixin.qq.com/community/develop/mixflow

此次同构到小程序端需要考虑几个因素：多端代码复用、尽可能支持已有的特性和性能要有保证。其实最主要的就是要在尽量不改动现有代码的情况下来完成小程序的开发。

二、具体方案实现

接下来就来探讨下具体方案的实现。

社区 Web 端是基于 Vue 实现的，使用了 Vue-router、Vuex 等插件。Vue 想必大家挺熟悉的了，它是市面上一款非常流行的 Web 框架，提供组件化等特性，其原理大致如下：

          Vue 模板可以认为是一种附加了一些特殊语法的 HTML 片段，一般来说一份 Vue 模板对应一个组件，在构建阶段编译成调用 Dom 接口的 JS 函数，调用此 JS 函数就会创建出组件对应的 Dom 树片段进而渲染到浏览器上。小程序里是支持运行 JS 的，但是这里用到的 Dom 接口和渲染到浏览器上的功能小程序不具备，所以无法直接将 Web 端社区代码移植到小程序中。原因就在于小程序为了安全和性能而采用了双线程的架构，运行用户 JS 代码的逻辑层是一个纯粹的 JSCore，没有任何浏览器相关的实现，这里得想办法将 Web 端代码转成小程序代码。

业界常见做法：将 Vue 模板直接转成小程序的 WXML 模板

那么问题来了，如何将 Vue 代码转成小程序代码？这里先看下业界常见的做法：将 Vue 模板直接转成小程序的 WXML 模板。

使用做法相当于抛弃了浏览器中建 Dom 树的过程，而是直接交由小程序来对模板进行编译创建出小程序的模板树，进而渲染到小程序页面中。

一般来说这个做法对于普通场景是够用的，但是对于一些更复杂的场景就很不好处理了，比如社区中的一个简单例子：社区帖子详情展示富文本内容，点击内容中的图片可预览。

这主要是因为 Vue 模板和 WXML 模板的语法并不是直接对等的，Vue 的特性设计也和小程序的设计无法划等号，这自然就导致了部分 Vue 特性的丢失。比如像 Vue 中的 v-html 指令、ref 获取 Dom 节点、过滤器等就通通用不了。当然不止是 Vue 自身的特性，一些原本依赖 Dom/Bom 接口的 Vue 插件也无法使用，比如 Vue-router 等，而这些正是社区高度依赖的，在不对社区代码做大范围改造的话是无法使用此方案的。

此路不通，那还有其他的方法么？

换个思路：做一个适配层

答案是有的，这里我们就得换一种思路来解决这个问题。回到最初的点上，我们无法将 Web 端代码移植到小程序中是因为小程序没有 Dom 接口，那么我们想办法做出一个适