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

前言

Mpvue是一个使用Vue.js开发微信小程序的前端框架，使用这个框架，开发者将获得完整的Vue.js开发体验，并为H5和小程序提供代码重用能力。如果你想把H5项目改造成一个小程序，或者你想在开发一个小程序后把它转换成H5，mpvue将是一个非常合适的解决方案。

目前，mpvue已经在美团点评的多个实际业务项目中得到验证，所以我们决定开放其来源，希望更多的技术同行一起开发，应用到更广泛的场景中。github项目地址见mpvue。有关文档，请参见http://mpvue.com/。

为了帮助大家更好地理解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:applet的开发模式和H5类似，所以我们考虑和H5一起进行代码复用。在团队技术栈的选择之后，我们确定Vue.js为小progra

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和applets是典型的逻辑视图层框架。逻辑层和视图层之间的工作模式是：数据变化驱动视图更新；视图交互触发事件，事件响应函数修改数据再次触发视图更新，如图1所示。

图1:小程序的实现原理

鉴于Vue.js和小程序的工作原理一致，我们考虑将小程序的功能托管到Vue.js上，在合适的时机将数据变化同步到小程序上，从而达到开发小程序的目的。这样我们就可以把重点放在Vue.js上，参照Vue.js编写相应的小程序代码，小程序负责视图层的显示，所有的业务逻辑都汇聚到Vue.js中，vue.js的数据经过修改后同步到小程序中，如图2所示。这样，我们就有能力用Vue.js的方式开发小程序

Vue代码——编写applet页面作为Vue.js实现——实现与Vue.js开发规范的父子组件关联

小程序代码-编写小程序开发规范中的视图层模板-配置生命周期函数，关联数据更新调用-将Vue.js数据映射到小程序数据模型

在此基础上增加了以下机制——Vue.js实例与applet Page实例之间的关联——applet与Vue.js生命周期之间的映射关系，可以在applet生命周期中触发Vue.js生命周期——applet事件建立代理机制，在事件代理功能中触发vue . js组件对应的事件响应

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

要同时维护Vue.js和小程序，需要编写两个版本的代码实现吗？applet负责视图层的呈现。Vue.js的视图层是否还需要，如果不需要，应该怎么做？如何打通生命周期，如何实现数据同步和更新？以上问题包含了mpvue框架的核心内容，下面会详细讲解。首先，mpvue是为了提高效率而诞生的，它提供了自动生成小程序代码的能力。小程序代码按照Vue.js代码构造，不需要同时开发两套代码。

Vue.js的视图层渲染由render方法完成，内存中维护一个虚拟DOM。mpvue不需要使用Vue.js来完成视图层渲染，所以我们修改了渲染方法，禁止了视图层渲染。熟悉源代码的读者都知道，Vue运行时有多个平台，除了我们常见的Web平台，还有Weex。从现在开始，我们增加了一个新的平台mpvue。

生命周期关联：生命周期和数据同步是mpvue框架的灵魂，Vue.js和applet的数据相互隔离，有不同的更新机制。Mpvue从生命周期和事件回调函数入手，在Vue.js触发数据更新时实现数据同步。小程序通过视图层呈现给用户，并通过事件响应用户交互。Vue.js在后台维护数据变化和逻辑。可以看到，数据更新源于小程序，来自Vue.js和Vue.js的数据变化经过处理后同步到小程序。为了实现数据同步，mpvue修改了Vue.js的运行时实现，并在vue.js的生命周期中增加了更新applet数据的逻辑.

事件代理机制：通过事件代理机制完成用户交互触发的数据更新。在Vue.js代码中，事件响应函数对应组件的方法，Vue.js自动维护上下文。但是小程序中没有类似的机制，而且由于在Vue.js的执行环境中维护了一个实时的虚拟DOM，完全对应小程序的视图层，我们认为，在小程序的节点上触发事件后，只要找到虚拟DOM上对应的节点，触发对应的事件就不会完成。另一方面，如果Vue.js事件响应触发数据更新，其生命周期功能的更新会自动触发，小程序数据会在此功能上同步更新，从而实现数据同步。

如何使用mpvue

mpvue框架本身由几个npm模块组成，入口模块已经处理了依赖关系，所以开发人员只需要执行下面的代码就可以完成本地项目的创建。

#安装vue-CLI $ npminstall-globalvue-CLI #根据模板项目创建本地项目。目前是内网地址$ vueinit ' bitbucket : xx . meituan.com:hfe/mpvue-quick start '-clone my-project #安装依赖并启动自动构建$ cdmy-project $ npminstall $ npmrundev。执行上述命令后，小程序目标代码将被构建在当前项目的dist子目录中，通过用小程序开发工具加载dist目录可以启动本地调试和预览。示例项目遵循Vue.js模板的项目规范，由Vue.js命令行工具vue-cli创建。代码组织与Vue.js的官方实例一致，我们为小程序定制了Vue.js运行时和webpack loader，这部分依赖已经内置到项目中。

针对小程序开发中两种常见的代码复用场景，mpvue框架为开发者提供了解决方案和技术支持，开发者只需要在这个框架的指导下进行项目的配置和转换。我们已经实践了一个项目，将H5内部转换成一个小程序。下图显示了使用mpvue框架的转换效果：

图3: H5和小程序转换效果

把小程序改造成H5:直接用Vue.js规范开发小程序，代码本身和H5没什么区别，具体代码区别会集中在平台Api上。另外，不需要明显的改动，改造主要分为以下几个部分：

用标准的Vue.js替换applet平台的Vue.js框架用标准的vue-loader替换applet平台的vue-loader，以适应和转换applet与H5底层Api的差异，将H5转换为applet: H5已经用Vue.js开发出来了，我们需要做以下工作：

用小程序平台的Vue.js框架替换标准的Vue.js用小程序平台的vue-loader替换标准的vue-loader改编转换小程序和H5底层Api的区别根据小程序开发平台提供的能力，我们最大程度的支持了Vue.js的语法特性，但是有些功能还没有实现。

表mpvue不支持的语法功能

项目改造注意事项：框架的目标是通过Vue.js建立applet与H5开发模式的关联，从而最大化代码复用。但由于平台差异的客观存在(主要集中在实现机制和底层Api能力上的差异)，我们无法实现100%的代码复用，平台差异带来的转换成本也无法避免。对于代码重用的场景，开发人员需要关注以下问题并做好准备：

尝试使用平台不具备的语法功能。这部分功能不需要转换和适配成本。避免使用不支持的语法功能，如slot、filter等。并降低改造成本。如果使用特定的平台Api，可以考虑抽象适配层的接口，通过切换底层完成平台转换。mpvue最佳实践

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

使用vue-cli命令行工具创建项目，使用Vue 2.x语法规范开发，避免使用框架不支持的语法特性，有些Vue.js语法在小程序中无法使用。尽量利用mpvue和Vue.js的共同特性，合理设计数据模型，精细控制数据更新和操作，避免性能问题，合理使用基于组件的开发小程序，提高代码复用率

表2:框架使用特性的比较

结论

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

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

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。