前言
mpvue 是一个使用 Vue.js 开发 Momo 小程序的后端框架。 使用该框架，开发者将获得完整的Vue.js开发体验，同时提供H5和小程序的代码复用能力。 如果你想将H5项目转换成小程序，或者想在打开好友程序后转换成H5，mpvue将是一个非常合适的解决方案。
目前mpvue已经在美团点评的多个实际业务项目中得到验证，所以我们决定将其开源，希望更多的技术同行共同开发，应用到更广泛的场景。 github项目地址参见mpvue。 请参阅使用文档。
为了帮助大家更好的理解mpvue的框架，我们来分析一下框架的设计和实现。 本文主要内容已发表在《程序员》杂志2017年第9期封面报道中，内容略有改动。
小程序开发特点
陌陌小程序推荐简单的开发方式，通过多页面聚合完成轻量级的产品功能。 小程序以离线包的形式下载到本地，通过陌陌客户端加载启动。 开发规范简单，技术完全封装，有自己的开发体系。 它有Native和H5的影子，但又绝不相同。
小程序本身定位为一个简单的逻辑视口框架。 官方不建议开发复杂的应用，但业务需求无法精简。 复杂的应用程序对开发方式提出了更高的要求，如组件化和模块化、自动创建和集成、代码复用和开发效率等，而小程序开发规范极大地限制了这些能力。 为了解决上述问题，并提供更好的开发体验，我们创建了mpvue，使用Vue.js开发Momo小程序。
什么是 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开启好友程序将直接带来以下开发效率的提升：
为什么选择 Vue.js？ 这取决于团队技术栈的选择。 偏向于引入新选型、统一技术栈、提高开发效率，与开发工具服务业务的初衷背道而驰。
mpvue的演变
mpvue的产生来源于业务场景和需求，最终解决方案的确定经历了三个阶段。
第一阶段：我们首次实现了视口代码转换工具，以提高代码开发效率。 通过将H5视口代码转换为小程序代码，包括HTML标签映射、Vue.js模板和样式转换，对此目标代码进行二次开发。 我们实现了有限的代码复用，但是组件开发和小程序学习成本并没有得到有效改善。
第二阶段：我们重点建立代码组件化机制。 代码组织方式按照Vue.js组件规范设计，通过代码转换工具将代码解析成小程序。 转换工具主要解决组件之间的数据同步、生命周期关联、命名空间等问题。 最终我们实现了 Vue.js 句型的一个子集，但如果我们想要实现更多功能或者跟随 Vue.js 版本迭代，工作量就显得不堪重负，感觉无穷无尽。
第三阶段：我们的目标是实现对Vue.js句型全集的支持，达到使用Vue.js打开闺蜜程序的目的。 并且通过引入Vue.jsruntime，实现了对Vue.js句型的支持，从而防止了人肉句型的适配。 至此，我们就完成了使用Vue.js打开好友程序的目的。 统一技术栈、组件化开发、多端代码复用、降低学习成本、提高开发效率的目标得到了较好的实现。
mpvue设计思路
Vue.js和小程序都是典型的逻辑视口框架。 逻辑层和视口之间的工作方式是：数据变化驱动视图更新； 视图交互触发风暴，风暴响应函数更改数据以再次触发视图更新。 如图1所示。
鉴于Vue.js和小程序工作原理一致，我们考虑将小程序的功能托管给Vue.js，并在合适的时候同步数据变化到小程序，从而达到运行极友的目的程序。 这样我们就可以专注于Vue.js，并参考Vue.js来编译相应的小程序代码。 小程序负责视口显示，所有业务逻辑都汇聚到Vue.js中。 Vue.js数据更改后，同步到小程序，如图2所示。这样我们就获得了以Vue.js的形式打开好友程序的能力。 因此，我们的设计方案如下：
Vue代码
小程序代码
并在此基础上添加如下机制
这个机制总结起来很简单，但是实现起来却相当复杂。 在解密具体实现之前，读者可能会有一些疑惑：
以上问题包含了mpvue框架的核心内容，下面为大家详细讲解。 首先，mpvue的诞生就是为了提高效率。 它提供了手动生成小程序代码的能力。 小程序代码根据Vue.js代码重构，无需同时开发两套代码。
Vue.js 视口渲染是通过 render 方法完成的，并在显存中维护一个虚拟 DOM。 mpvue不需要使用Vue.js来完成视口渲染，因此我们对render方法进行了改造，严格禁止视口渲染。 熟悉源码的读者都知道，Vueruntime有多个平台，不仅有我们常见的Web平台，还有Weex。 从今天开始，我们放弃了新平台 mpvue。
生命周期关联：生命周期和数据同步是mpvue框架的灵魂。 Vue.js和小程序的数据是相互隔离的，并且各自有不同的更新机制。 mpvue从生命周期和风暴反弹功能入手，在Vue.js触发数据更新时实现数据同步。 小程序通过视口呈现给用户，并通过风暴响应用户交互。 Vue.js 在后台维护数据更改和逻辑。 可以看到，数据更新源自小程序网站如何做微信小程序开发，由Vue.js处理，Vue.js数据变化再同步到小程序。 为了实现数据同步，mpvue改变了Vue.jsruntime的实现，减少了Vue.js生命周期中更新小程序数据的逻辑。
Storm代理机制：用户交互触发的数据更新是通过storm代理机制完成的。 在Vue.js代码中，风暴响应函数对应组件的方法，Vue.js手动维护上下文。 但小程序中没有类似的机制，而且由于Vue.js执行环境中维护了一个实时的虚拟DOM，与小程序的视口完全对应，所以我们考虑在小程序组件节点上触发风暴最后，只要在虚拟DOM上找到对应的节点，触发对应的storm就不算完成了； 另一方面，如果 Vue. 更新小程序数据，实现数据同步。
如何使用mpvue
mpvue框架本身是由多个npm模块组成的，入口模块已经处理好依赖关系了。 开发者只需执行以下代码即可完成本地项目创建。
# 安装 vue-cli
$ npm install --global vue-cli
# 根据模板项目创建本地项目，目前为内网地址
$ vue init mpvue/mpvue-quickstart my-project
# 安装依赖和启动自动构建
$ cd my-project
$ npm install
$ npm run dev
执行上述命令后，将在当前项目的dist子目录中创建小程序的目标代码。 使用小程序开发者工具加载dist目录即可开始本地调试和预览。 示例项目遵循 Vue.js 模板项目规范，并通过 Vue.js 命令行工具 vue-cli 创建。 代码组织方式与官方Vue.js实例一致。 我们为小程序定制了Vue.jsruntime和webpack loader，这部分依赖已经外部化到项目中了。
针对小程序开发中常见的两种代码复用场景，mpvue框架为开发者提供了解决方案和技术支持。 开发者只需在此指导下进行项目配置和改造即可。 我们内部实践了一个将H5转成小程序的项目。 右图为使用mpvue框架的转换效果：
将小程序转换为H5：直接使用Vue.js规范打开闺蜜程序，代码本身与H5没有区别，具体代码差异会集中在平台Api部分。 据悉，不需要进行重大改动，改造主要分为以下部分：
将H5转换为小程序：H5是使用Vue.js开发的。 我们需要做的事情如下：
根据小程序开发平台提供的能力，我们已经最大程度地支持了Vue.js句型功能，但部分功能现阶段尚未实现。
项目转换注意事项：框架的目标是通过Vue.js将小程序与H5开发方式关联起来，实现最大程度的代码复用。 但由于平台差异的客观存在（主要集中在实现机制和底层API能力的差异），我们很难做到100%的代码复用，并且重建平台不同部分的成本也难以避免。 对于代码复用场景，开发者需要重点关注以下问题并做好规划：
mpvue 最佳实践
表2中，我们对陌陌小程序、mpvue、WePY这三种开发框架的主要能力和特性进行了纵向比较，帮助您了解不同框架的优缺点，并根据业务场景确定技术方案和发展习惯。 我们总结了一些如何更好地使用mpvue进行小程序开发的最佳实践。
结语
mpvue框架早已在业务项目中得到实践和验证，目前在美团点评内部得到广泛应用。 mpvue来自开源社区网站如何做微信小程序开发，我们希望为开源社区做出贡献，为广大小程序开发者提供一套技术解决方案。 mpvue的初衷是让Vue.js开发者能够低成本接入小程序开发，从而实现代码的低成本迁移和复用。 未来，我们将不断扩展现有能力，解决开发者诉求，优化用户体验，完善周边生态建设，帮助更多开发者。
最后，mpvue基于Vue.js源码进行二次开发，减少了小程序平台的实现。 我们保留了遵循 Vue 的能力。 方便。
作者简介 招聘时间紧急
美团点评酒旅业务研发中心诚聘中高级后端工程师及技术专家。 欢迎您将简历投递至hu Chengquan#meituan.com。
