前言

是用于使用Vue.js开发微信小程序的前端框架。使用此框架，开发人员将获得完整的Vue.js开发经验，并同时提供H5和代码重用功能。如果要将H5项目转换为一个小程序，或者要在开发一个小程序之后将其转换为H5，这将是一个非常合适的解决方案。

目前，它已在美团点评的许多实际业务项目中得到验证，因此我们决定将其开源，希望更多的技术同事将其共同开发并应用于更广泛的场景。该项目的地址是：

为了帮助大家更好地理解体系结构，让我们分析框架的设计和实现思想。本文的主要内容已在“程序员”杂志的第九期“迷你程序”的封面报告中进行了发布，并进行了一些修改。

小程序开发的特征

微信小程序推荐一种简单的开发方法，并通过多页聚合来完成轻量级产品功能。小程序以离线包的形式下载到本地，通过微信客户端加载并启动，开发规范简单，技术包完善，开发系统独立。它有H5的阴影，但绝不是一样。

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

这是什么？

是一组旨在开发小型程序的前端开发框架。其核心目标是提高开发效率和增强开发经验。使用此框架，开发人员只需要对小程序开发规范有初步的了解，并且熟悉Vue.js的基本语法。该框架提供了完整的Vue.js开发经验。开发人员编写Vue.js代码，将其解析为一个小程序，并确保其正确运行。此外，该框架还通过vue-cli工具为开发人员提供了示例代码。开发人员只需执行一个简单的命令即可获得可运行的项目。

为什么这么做？

在小程序内部测试的开始，我们计划快速迭代出以H5为基准的产品实现。核心要求是：快速实施，代码重用，低成本和高效率...然后我们经历了多个小程序构建，结合业务场景，技术选择和小程序开发方法，我们汇总并总结了面临的主要问题在开发阶段：

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

多终端多路复用：有两种常见的业务场景，它们可以通过现有的H5产品转换为小型程序应用程序，反之亦然。从效率的角度来看，开发人员希望通过重用代码来完成开发，但是小程序开发框架无法做到这一点。我们试图通过静态代码分析将H5代码转换为一个小程序，但仅完成了视图层转换，无法带来更多的好处。多终端代码重用需要更成熟的解决方案。

Vue.js简介：小程序的开发方法类似于H5，因此我们考虑使用H5进行代码重用。在选择了团队的技术栈之后，我们将Vue.js确定为小型程序开发规范。使用Vue.js开发小型程序将直接提高以下开发效率：

为什么使用Vue.js？这取决于团队技术堆栈的选择。引入新选择有悖于技术堆栈的统一和开发效率的提高，并且违背了开发工具服务业务的初衷。

进化

的形成

来自业务场景和需求，最终计划经历了三个阶段。

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

第二阶段：我们专注于改进代码组件化机制。参考Vue.js组件规范设计代码组织形式，并通过代码转换工具将代码解析为一个小程序。转换工具主要解决组件之间数据同步，生命周期关联和命名空间的问题。最后，我们实现了Vue.js语法的子集，但是如果我们想实现更多功能或使用Vue.js版本进行迭代，那么工作量就变得难以估计，并且有一种永无止境的感觉。

第三阶段：我们的目标是支持整套Vue.js语法，并达到使用Vue.js开发小型程序的目的。并且通过引入Vue.js来支持Vue.js语法，从而避免了人肉语法的适应。到目前为止，我们已经完成了使用Vue.js开发小型程序的目的。技术堆栈一、组件开发，多终端代码重用，降低学习成本和提高开发效率的目标已经很好地实现了。

设计思路

Vue.js和是典型的逻辑视图层框架。逻辑层和视图层之间的工作方法是：数据更改驱动视图更新；视图交互触发事件，事件响应功能修改数据以再次触发视图更新，如图1所示。

图1：小程序实现原理

鉴于Vue.js和小型程序的一致工作原理，我们考虑将小型程序的功能托管到Vue.js，并在适当的时间将数据更改同步到小型程序，以达到目的。开发迷你程序。这样，我们可以将精力集中在Vue.js上，并参考Vue.js编写相应的小程序代码。这个小程序负责视图层的显示，所有业务逻辑都收敛到Vue.js，并且在更改后同步Vue.js数据。对于小型程序，如图2所示。通过这种方式，我们获得了以Vue.js方式开发小型程序的能力。为此，我们将计划设计如下：

图2：实现原理

Vue代码

迷你程序代码

在此基础上，附加了以下机制

这种机制的总结很简单，但是实现起来却很复杂。在揭示具体实现之前，读者可能会遇到类似以下问题：

以上问题包含框架的核心内容，下面我将与您详细讨论。首先，为了提高效率，它提供了自动生成小型程序代码的功能。小程序代码是基于Vue.js代码构建的，不需要同时开发两组代码。

Vue.js视图层渲染通过该方法完成，并且虚拟DOM同时保留在内存中。不需要Vue.js即可完成视图层渲染，因此我们修改了该方法以禁止视图层渲染。熟悉源代码的读者知道Vue有多种平台实现，除了我们通用的Web平台外，还有Weex。从现在开始，我们添加了一个新平台。

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

可以看出，数据更新源自，并且是从Vue.js处理的。更改Vue.js数据后，该数据将同步到。为了实现数据同步，修改了Vue.js实现，并在Vue.js的生命周期中添加了更新数据的逻辑。

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

如何使用？

框架本身由多个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和的加载器，并且这部分依赖项也已内置到项目中。

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

图3：H5和转换效果

将Mini 转换为H5：直接使用Vue.js规范开发Mini ，其代码本身与H5没什么不同，具体的代码差异将集中在平台Api部分。另外，不需要明显的改变。转换主要分为以下几个部分：

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

根据小程序开发平台提供的功能，我们已在最大程度上支持Vue.js的语法功能，但现阶段尚未实现某些功能。

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

项目转换的注意事项：该框架的目标是通过Vue.js在小型程序和H5开发方法之间建立关联vue.js小程序开发，以实现最大程度的代码重用。但是，由于客观存在平台差异（主要集中在实现机制和底层Api功能上的差异），我们无法实现代码的100％重用，并且无法避免平台差异的转换成本。对于代码重用方案，开发人员需要关注以下问题并做好准备：

最佳做法

在表2中，我们对微信小程序，WePY和WePY的三个开发框架的主要功能和特征进行了水平比较，以帮助您了解不同框架的重点，并根据业务确定技术解决方案。场景和发展习惯。 。我们总结了一些有关如何更好地用于小型程序开发的最佳实践。

表2：框架使用特征的比较

结论

该框架已在商业项目中实践和验证，目前在美团点评中被广泛使用。从开源社区来看，饮用水是水的源头。我们也希望为开源社区做出贡献，并为大型和小型程序的开发人员提供一套技术解决方案。 Vue.js的初衷是允许Vue.js开发人员以低成本访问小型程序开发，从而实现低成本的代码迁移和重用。将来，我们将继续扩展现有功能，解决开发人员的需求，优化用户体验并改善。周围的生态建设可帮助更多开发人员。

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