《程序员》杂志2017年第9期小程序专题封面报道

菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技

《程序员》杂志2017年第9期小程序专题封面报道

前言

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

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

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

小程序开发的特点

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

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

什么是 mpvue？

mpvue是一个针对开发小程序前端开发框架。 其核心目标是提高开发效率、增强开发体验。 使用该框架，开发只需要初步了解小程序开发规范，熟悉Vue.js的基本语法即可上手。 该框架提供了完整的Vue.js开发体验。 开发编写Vue.js代码，mpvue将其解析并转换为小程序并确保其正确运行。 此外，框架还通过vue-cli工具为开发提供快速入门示例代码。 开发只需要执行简单的命令即可获得可运行的项目。

为什么要做mpvue？

小程序内测之初，我们就计划快速迭代一个对标H5的产品实现。 核心诉求是：快速实施、代码复用、低成本、高效率……随后，我们经过多个小程序的搭建，结合业务场景、技术选型以及小程序开发方法，整理总结了开发阶段面临的主要问题：

组件化机制不够完善

缺乏代码复用能力

小程序框架与团队技术栈无法有机结合

学习小程序的成本还不够低

组件机制：小程序逻辑和视图层代码相互分离。 公共组件在提取后无法聚合到单个文件条目中。 需要在视图层和逻辑层分别引入组件，导致可维护性较差； 组件没有命名空间机制，事件回调必须设置为全局函数，组件设计存在命名冲突的风险，数据封装性不强。 开发需要一种友好的代码组织方式，通过ES模块一次性导入； 以及对组件数据的良好封装。 成熟的组件机制对于工程开发至关重要。

多终端复用：常见的业务场景有两种：将现有的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和小程序工作原理一致，我们考虑将小程序的功能托管到Vue.js上，并在合适的时候同步数据变化到小程序，从而达到开发小程序的目的。 这样我们就可以专注于Vue.js，并参考Vue.js来编写相应的小程序代码。 小程序负责视图层的显示。 所有业务逻辑都汇聚到 Vue.js 中。 Vue.js数据变更后同步。 到小程序中，如图2所示。这样我们就获得了用Vue.js开发小程序能力。 为此，我们设计的方案如下：

图2：mpvue实现原理

Vue代码

将小程序页面编写为Vue.js实现

使用Vue.js开发规范实现父子组件关联

小程序代码

根据小程序开发规范编写视图层模板

配置生命周期函数并调用关联数据更新

将 Vue.js 数据映射到小程序数据模型

并在此基础上增加了以下机制

Vue.js实例与小程序页面实例关联

小程序和Vue.js生命周期建立映射关系，可以在小程序生命周期中触发Vue.js生命周期。

小程序事件建立代理机制，在事件代理函数中触发对应的Vue.js组件事件响应。

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

同时维护Vue.js和小程序，是否需要编写两个版本的代码实现？

小程序负责视图层的显示。 Vue.js 的视图层还需要吗？ 如果不是，应该怎么办？

如何打通生命周期，如何实现数据同步和更新？

上述问题包含了mpvue框架的核心内容，下面将详细给大家讲解。 首先，mpvue的诞生就是为了提高效率。 提供自动生成小程序代码的能力。 小程序代码基于Vue.js代码构建，无需同时开发两套代码。

Vue.js视图层渲染是通过方法完成的，并在内存中维护一个虚拟DOM。 mpvue不需要使用Vue.js来完成视图层渲染，因此我们修改了方法来禁用视图层渲染。 熟悉源码的读者都知道，Vue 有多个平台实现，包括我们常见的 Web 平台和 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目录，开始本地调试和预览。 示例项目遵循Vue.js模板项目规范，通过Vue.js命令行工具vue-cli创建。 代码组织形式与官方Vue.js实例一致。 我们为小程序定制了Vue.js和，这部分依赖也已经内置到了项目中。

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

图3：H5与小程序转换效果

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

将小程序平台的Vue.js框架替换为标准Vue.js

将小程序平台的vue-替换为标准的vue-

小程序与H5底层API适配改造的差异

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

将标准Vue.js替换为小程序平台的Vue.js框架

将标准的vue-替换为小程序平台的vue-

小程序与H5底层API适配改造的差异

基于小程序开发平台提供的能力，我们已经*大程度地支持了Vue.js语法特性，但部分功能现阶段尚未实现。

表 1：mpvue 目前不支持的语法功能

项目转换注意事项：框架的目标是通过Vue.js将小程序和H5的开发方式关联起来，实现*大程度的代码复用。 但由于平台差异的客观存在（主要集中在实现机制和底层API能力的差异），我们无法实现100%的代码复用，平台差异的改造成本无法避免。 对于代码复用场景，开发需要重点关注以下问题并做好准备：

尝试使用平台上不可用的语法功能。 这些功能不需要转换和适配成本。

避免使用不支持的语法特性《程序员》杂志2017年第9期小程序专题封面报道，例如槽等，以降低转换成本

如果使用特定平台API，可以考虑抽象适配层接口，通过切换底层实现来完成平台转换。

mpvue *佳实践

表2中我们对微信小程序、mpvue、WePY这三种开发框架的主要能力和特点进行了横向比较用vue开发微信小程序，帮助大家了解不同框架的侧重点，并根据业务场景和开发习惯确定技术方案。 我们总结了一些如何更好地使用mpvue进行小程序开发*佳实践。

使用vue-cli命令行工具创建项目，使用Vue 2.x的语法规范进行开发

避免使用框架不支持的语法功能。 部分Vue.js语法无法在小程序中使用。 尝试使用 mpvue 和 Vue.js 共有的功能。

合理设计数据模型，实现数据更新和操作的细粒度控制，避免性能问题。

正确使用组件化开发小程序，提高代码复用率

表2：框架使用特性比较

结论

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

*后，mpvue基于Vue.js源码进行了二次开发，添加了小程序平台的实现。 我们保留跟随Vue.js版本升级的能力。 我们衷心感谢Vue.js框架和微信小程序给行业带来的便利。

使用Vue.js开发微信小程序：解析开源框架mpvue的教程就结束了。

炫佑科技专注互联网开发小程序开发-app开发-软件开发-网站制作等