使用Vue.js开发微信小程序的开源框架mpvue分析

mpvue是一个使用Vue.js开发微信小程序的前端框架。通过该框架，开发者可以获得完整的Vue.js开发体验，同时提供H5和小程序的代码复用能力。如果你想把一个H5项目转成一个小程序，或者你正在开发一个小程序，想转成H5，mpvue将是一个非常合适的解决方案。

目前mpvue已经在美团点评的几个真实业务项目中得到验证，所以我们决定将其开源，希望更多的技术人员共同开发，应用到更广泛的场景。项目地址为：

github.com/Meituan-Dia…

为了帮助大家更好地理解mpvue的架构，我们来分析一下框架设计和实现思路。文章主要内容发表于《程序员》杂志2017年特刊封面报道第9期小程序，内容略有修改。

小程序开发特点

微信小程序推荐简洁的开发方式，通过多页面聚合补充轻量级的产品功能。小程序以离线包的形式下载到本地，通过微信客户端加载并启动。开发规范简单，技术封装彻底，有自己的开发体系。它有 Native 和 H5 的影子，但绝不相同。

小程序本身被放置为一个简单的逻辑视图层框架。官方不建议开发复杂的应用，但业务需求很难精简。复杂的应用对组件化和模块化、自动构建和集成、代码复用和开发效率等开发方式提出了更高的要求。然而，程序开发的小规格极大地限制了这些能力。为了解决上述问题，并提供更好的开发体验，我们创建了mpvue，使用Vue.js开发微信小程序。

mpvue是什么？

mpvue是一个旨在开发小程序的前端开发框架。其主要目标是提高开发效率、改善开发体验。有了这个框架，开发者只需要初步了解小程序开发规范和基本的Vue.js语法就可以上手。该框架提供了完整的Vue.js开发体验。开发人员编写 Vue.js 代码，mpvue 解析并将其转换为小程序并确保其正常运行。此外，该框架还为开发者提供了通过vue-cli工具快速启动示例代码的功能。开发者只需执行简单的命令即可获得可执行项目。

为什么选择 mpvue？

小程序内测之初，我们就打算快速重复实施对比H5的产品。主要要求是：快速实现、代码复用、低成本、高效率……随后，我们经历了几个小程序的搭建，结合业务场景、技术选型和小程序开发方法，整理总结了主要内容开发阶段面临的问题：

• 组件化机制不够完善
• 缺乏多用途代码复用能力
• 小程序框架与团队技术栈无法有机结合
• 小程序的学习成本不够低

机制组件：小程序逻辑和显示层代码分离。一旦提取公共组件，它们就无法聚合到单个文件项中。组件必须位于视图层和逻辑层中。层引入，可维护性差；组件没有命名空间机制，事件回调必须设置为全局函数，设计组件时存在名称冲突的风险，数据封装性不强。开发者需要一种友好的代码组织方式，通过ES模块一次性导入，以及对组件数据的良好封装。先进部件的机理对于技术发展至关重要。

多终端复用：常见的业务场景有两种，就是将现有的H5产品改造为小型软件应用，或者将现有的H5产品改造为小型软件应用。从效率上来说，开发者希望通过复用代码来完成开发，但小程序开发框架无法做到这一点。我们尝试使用静态代码分析的方式将H5代码转换为小程序，但只做了显示层的转换，并不能带来更多的好处。多端重用代码需要更高级的解决方案。

引入Vue.js：小程序的开发方式与H5类似，所以我们考虑用H5复用代码。选择团队的技术栈后，我们指定Vue.js作为小程序开发规范。使用Vue.js开发小程序，会直接带来以下开发效率的提升：

• H5代码只需很少的修改即可复用小程序
• 使用Vue.js的组件机制开发小程序可以实现小型化小程序和H5组件复用
• 统一技术栈后，学习小程序的成本会降低。开发者从H5转向小程序无需学习更多
• Vue.js代码可以让所有前端直接参与开发和维护

为什么选择Vue.js？这取决于团队对技术栈的选择。新选型的引入不利于统一技术栈、提高开发效率，也不符合开发工具服务业务的初衷。

mpvue的开发

mpvue的创建是基于业务场景和需求。最终的解决方案经历了三个阶段。

第一阶段：我们实现了视图层代码转换工具，旨在提高首次代码开发的效率。对该目标代码进行二次开发，将H5显示层代码转换为小程序代码，包括HTML标签映射、Vue.js模板、样式转换等。我们实现了有限的代码复用，但是开发组件和学习小程序的成本并没有得到有效的改善。

第二阶段：我们重点完善代码组件化机制。代码组织形式参考Vue.js组件规范进行设计，并使用代码转换工具将代码解析为小程序。转换工具主要解决组件之间的数据同步、生命周期关联以及命名空间问题。我们最终实现了 Vue.js 语法的子集，但如果我们想实现更多功能或迭代 Vue.js 版本，工作量很难估计，而且似乎无穷无尽。

第三阶段：我们的目标是支持全套Vue.js语法，达到使用Vue.js开发小程序的目的。并且通过引入Vue.js运行时，支持Vue.js语法，避免人工语法适配。至此，我们就完成了使用Vue.js开发小程序的目的。统一技术栈、组件化开发、多端代码复用、降低培训成本、提高开发效率的目标得到了较好的实现。

mpvue 设计思想

Vue.js 和小程序是典型的逻辑视图层框架。逻辑层与显示层之间的工作方式是：数据变化，单元显示更新；视图交互触发事件和事件响应函数 数据修改再次触发视图更新如图1所示。

图1：小程序实现原理

考虑到Vue.js和小程序一致的工作原理，可以考虑托管功能mini在Vue.js上编写程序并适时同步小程序中的数据变化。达到开发小程序的目的。这样我们就可以专注于Vue.js，并引用Vue.js来编写相应的小程序代码。小程序负责显示视图层。所有业务逻辑都汇聚到 Vue.js。 Vue.js数据变更后同步。成一个小程序如图2所示。这样我们就获得了在Vue.js中开发小程序的能力。为此，我们提出了如下方案：

图2：mpvue实现原理

Vue代码

• 编写一个小程序页面作为Vue.js规范的实现 e使用Vue开发父子关联

小程序代码

• 根据小程序开发规范编写视图层模板
• 配置生命周期函数并分配数据更新调用
• 将Vue.js映射到小程序的数据模型程序

并在此基础上连接了以下机制

• Vue.js实例与小程序页面实例关联
• 小程序与Vue.js生命周期创建了可以触发Vue.js的映射关系。小程序生命周期中的 Node.js 生命周期
• 小程序事件创建了代理机制，并在事件代理函数中触发对应的 Vue.js 组件事件响应

这个机制总结起来很简单，但是实现起来却相当复杂。在揭晓具体实现之前，读者可能会有几个疑问：

• 如果要同时维护Vue.js和小程序，是否需要编写两个版本的代码实现？
• 小程序负责显示视图层，Vue.js 视图层还有必要吗？如果不是，应该怎么办？
• 如何开启生命周期，如何实现数据同步更新？首先，mpvue的诞生就是为了提高效率。提供自动生成小程序代码的能力。小程序代码基于Vue.js代码构建，无需同时开发两套代码。

  Vue.js 视图层的渲染是通过 render 方法完成的，虚拟 DOM 保存在内存中。 mpvue不需要使用Vue.js来完成视图层的渲染，因此我们修改了render方法以禁用视图层的渲染。熟悉源码的读者都知道，Vue 运行时有多个平台实现，包括我们的 Common Web Platform 和 Weex。截至目前，我们已经添加了新的 mpvue 平台。

  生命周期关联：生命周期和数据同步是mpvue框架的灵魂。 Vue.js数据和小程序是相互隔离的，并且各自有不同的更新机制。 mpvue从生命周期和事件回调函数入手，实现Vue.js触发数据更新时的数据同步。小程序通过视图层呈现给用户，并通过事件响应用户交互。 Vue.js 在后台维护数据更改和逻辑。

  可以看到，数据更新来自小程序，由Vue.js处理。 Vue.js数据变更后会同步到小程序。为了实现数据同步，mpvue修改了Vue.js运行时实现，并在Vue.js生命周期中添加了更新小程序数据的逻辑。

  事件代理机制：通过事件代理机制完成用户交互触发的数据更新。在Vue.js代码中，事件响应函数对应组件方法，Vue.js自动维护上下文环境。然而，小程序中并没有类似的机制，而且由于 Vue.js 运行时维护了一个与小程序的显示层完全对应的实时虚拟 DOM，我们认为在程序组件的迷你节点上触发事件后，只要它在虚拟 DOM 上找到对应的节点并触发相应的事件，就完成了。另一方面，如果对 Vue.js 事件的响应触发数据更新，则会自动触发生命周期函数的更新，并且更新将与该函数同步。还实现了小程序数据和数据同步。

  如何使用mpvue？

  mpvue 框架本身由多个 npm 模块组成。输入模块已经处理了依赖关系。开发者只需执行以下代码即可完成本地项目创建。

  # 安装 vue-cli$ npm install --global vue-cli# 根据模板项目创建本地项目，目前为内网地址$ vue init ‘bitbucket:xxx.meituan.  com：hfe/mpvue-quickstart’ --clone my- project# 安装依赖和启动自动构建$ cd my-project$ npm install$ npm run dev

  执行上述命令后，会在当前项目的dist子目录下创建小程序的目标代码。使用迷你开发工具加载dist目录进行本地调试和demo。示例项目遵循 Vue.js 模板项目规范，并使用 Vue.js 命令行工具 vue-cli 构建。代码组织与官方Vue.js实例一致。我们为小程序定制了Vue.js运行时和webpack加载器，这部分依赖也内置到了项目中。

  针对小程序开发中常见的两类代码复用场景，mpvue框架为开发者提供了解决思路和技术支持。开发者只需按照本教程进行项目的配置和改造即可。我们内部实现了一个项目，将H5转为小程序。下图为使用mpvue框架的转换效果：

  图3：H5与小程序转换效果小程序转换为H5：直接使用Vue。 js规范了小程序的开发。代码本身和H5没有什么区别。代码中的具体差异将集中在平台的API部分。除此之外，不需要任何明显的改变。改造主要分为以下几个部分：

  • 将小程序平台的 Vue.js 框架替换为标准 Vue.js
  • 将小程序平台的 vue-loader 替换为标准 vue-loader
  • 对基础 API 差异进行适配改造小程序和H5

  将H5转换为小程序：H5是使用Vue.js开发的。我们需要做的是：

  • 转换标准 Vue.js 替换为小程序平台 Vue.js 框架
  • 将标准 vue-loader 替换为小程序平台 vue-loader
  • 适配和改造之间的基本 API 差异小程序和H5

  根据小程序，我们在开发平台提供的可能性下尽可能支持Vue.js语法功能，但部分功能现阶段尚未实现。

  表1：mpvue目前不支持的语法特性

  项目转换说明：该框架旨在通过Vue.js将小程序开发方法与H5结合起来，以实现最大程度的代码复用。但由于跨平台差异的客观存在（主要集中在实现机制和核心API能力的差异），我们无法实现100%的代码复用，也无法避免改造跨平台差异的成本。在代码复用场景中，开发者需要重点关注并做好以下问题的准备：

  • 尽量使用平台上没有的语法功能。这些函数不需要转换和适应成本
  • 避免使用不受支持的语法函数。例如槽、过滤器等。降低转型成本
  • 如果使用特定平台的API，可以考虑抽象适配层的接口，通过切换基本实现来完成平台转换

  mpvue最佳实践

  在表2中，我们并列了微信小程序、mpvue、WePY三大开发框架的主要能力和特点，帮助大家了解不同框架的侧重点，并根据业务场景和发展情况确定技术方案。习惯。我们收集了一些最佳实践，以更好地利用 mpvue 进行小程序开发。

  • 使用vue-cli命令行工具创建项目，并使用Vue 2.x语法规范进行开发
  • 避免使用框架不支持的语法功能。某些 Vue.js 语法无法在小程序中使用。尝试使用与Vue.js共享的mpvue功能
  • 正确设计数据模型，实现对数据更新和操作的细粒度控制，避免性能问题
  • 正确使用基于组件的小程序开发，提高措施代码复用

  表2：框架使用特点对比

  结论

  mpvue框架已经在业务项目中得到实践和验证，目前在美团点评内部广泛使用。 mpvue来自开源社区，我们也希望为开源社区做出贡献，为大多数小程序开发者提供一套技术解决方案。 mpvue的初衷是让Vue.js开发者能够接入低成本的小程序开发，实现低成本的代码迁移和复用。未来，我们将继续扩展现有选项，满足开发者请求并优化用户体验。完善周边生态建设，帮助更多开发商。

  最后mpvue在Vue.js源码的基础上进行了二次开发，增加了小程序平台实现。我们保留跟踪 Vue.js 版本升级的权利。我们衷心感谢Vue.js框架和微信小程序为行业带来的便利。