【51CTO.com原创稿件】以微信小程序为代表的“免安装”类应用的火爆，以及其自成一体的开发规范，前端工程师面临着愈来愈多的跨端开发工作，每日疲于应付;此时，利用现有技术栈快速实现跨端开发，成为各个前端团队的迫切需求。DCloud CTO崔红保在WOT2018全球软件与运维技术峰会上进行了主题为《基于Vue开发微信小程序和原生App》的演讲，崔老师从小程序和App两个平台入手，对利用Vue技术栈进行跨端开发的方案及实现思路进行了详细的讲解，下面我们先来看看基于Vue是如何实现微信小程序开发工作的。
图1 DCloud CTO 崔红保
开发微信小程序
随着微信小程序的兴起，小程序背后的技术支持也如雨后春笋般层出不穷，纵观各家解决方案，仅有两家方案可以支持Vue的开发。其中之一是腾讯推出了一款类Vue的方案——WePy，但WePy无法完整的支持Vue开发;其二是美团·点评团队推出的mpvue，mpvue框架支持完整的Vue开发体验，解决了广大Vue开发者开发小程序的痛点，因此一经推出，在短短20天的时间内，就获得了7k+的用户。
感谢mpvue开发团队，为我们解决小程序的问题。下面会简单快速介绍一下mpvue的主要特点及原理。
mpvue主要特性
mpvue的主要特性包括：
·彻底的组件化开发能力：提高代码复用性
·完整的Vue.js开发体验
·方便的Vuex数据管理方案：方便构建复杂应用
·快捷的webpack构建机制：自定义构建策略、开发阶段hotReload
·支持使用npm外部依赖
·使用Vue.js命令行工具vue-cli快速初始化项目
·H5代码转换编译成小程序目标代码的能力
mpvue快速体验
按照mpvue官方文档，安装vue-cli工具，执行init命令就可以创建一个mpvue-quickstart模板项目，创建步骤及模板项目目录结构如下图所示：
图2 mpvue快速体验
mpvue构建流程
构建流程是mpvue最核心的地方之一，通过webpack，完成了vue template到微信小程序的wxml及wxss的转换，最终使之可以运行在微信小程序环境中。
如下图所示，src目录是标准的小程序目录结构，dist目录是经过mpvue-loader编译器转化之后的目录，可见下图中的index.vue和main.js文件，转成了小程序的js、wxml和wxss三个文件，甚至可能还会有第四个文件——json文件;而app.vue文件转成了app.js、app.json和app.wxss文件。
图3 mpvue构建流程
mpvue实现原理
Vue.js 和小程序都是典型的逻辑视图层框架，工作原理类似，都是数据变更驱动视图更新，视图交互触发事件，事件响应函数修改数据，然后再次更新视图。mpvue实际上作为一个桥梁，将小程序的数据绑定功能托管给了Vue;小程序负责视图层展示，数据逻辑收敛到Vue中，Vue中数据变更后再同步到小程序，从而实现了两套框架的数据同步。
图4 mpvue实现原理
开发原生App
通过前面的介绍，我们了解到，借助mpvue，开发者可以基于Vue技术栈开发微信小程序;接下来的问题，如何基于Vue技术栈开发原生App呢?DCloud的思路是，既然已经可以在小程序中正常运行，那实现一套和小程序一样的App运行时环境，发布App的问题也就解决了。下面会分析小程序在运行时的框架并讲解如何模拟小程序的运行时环境。
小程序框架
小程序框架主要分为视图层和逻辑层，核心是一套响应的数据绑定系统，另外还包括基础组件、页面管理、微信JS API几部分，如下图所示：
图5 小程序框架
数据绑定系统
小程序视图层接收逻辑层的数据并渲染成UI视图，同时将视图层的事件发送给逻辑层。小程序的视图是通过webview渲染的(并非原生渲染)，在iOS平台由WKWebview渲染，在Android平台则由 X5 基于 Mobile Chrome 53/57 内核来渲染。
逻辑层负责数据处理并输出给视图层，同时接收视图层的事件通知。逻辑层和视图层不同，并不是在webview中执行，而是在一个独立的JS进程(引擎)中运行。准确来说，iOS平台的小程序逻辑层运行在JavaScriptCore 中，Android平台的小程序逻辑层则运行在X5 的JSCore中。开发者在小程序中不同js文件写的所有JavaScript代码，***都会被打包合并成一份JavaScript代码，然后运行在独立的JS进程中。
抛开JS独立进程还是webview运行环境不谈，单说逻辑层和视图层这套数据响应框架，Vue其实有对应的实现，小程序和Vue是重复的，若自己实现一套App运行时环境的话，其实可以直接使用Vue的runtime，无需实现小程序的这套数据绑定系统。
基础组件
小程序为开发者提供了一系列的基础组件，包括：视图容器、基础内容、表单组件、导航、媒体组件、地图、画布、开放能力。比如小程序的navigator标签，
<navigator url=“/page/navigate/navigate”>
跳转到新页面
</navigator>
这个标签和Vue的router-link标签类似，可以替代。
<router-link to=“/page/navigate/navigate”>
跳转到新页面
</router-link>
至于其他的小程序标签，比如View，也可以通过Vue的模板来模拟实现，并将这些模板内置到runtime中。这样开发者继续使用小程序的组件标签，运行时会被Vue的模板替换。
微信原生API
微信小程序经过一年多的发展完善，目前已支持了九大类、数百个原生API，方便调起微信及手机设备原生能力，例如设备信息、网络环境、扫码等，且这些API跨iOS、Android两个平台，若要将这些API从头全部模拟实现一遍，将是一个非常巨大的工作量。
图6 小程序框架-JS API
幸好，DCloud有Html5Plus的积累，经过几年的完善，也早已实现了常用功能的JS封装。
图7 HTML5+规范
我们可以在框架层将微信的API重写成Html5Plus的JS API，这样开发者写着微信的API，实际调用的却是Plus的能力。
当然了，微信API到Plus做不到***转换，比如有一些基于微信自生态的，微信运动、朋友圈代码等在Plus里是无法封装的，所以需要进行条件编译，从而实现平台差异的代码编写及分平台build。用微信运动举例，实际运行如下：
前面已经讲了小程序运行时的主要功能模块，并且简要说了模拟实现的思路，DCloud将这套实现方案称为uni-app，当然小程序runtime还需要有很多细节设计，才能保证***的用户体验。下面一个简单示意图来表示uni-app模拟实现的思路：
开发约束及平台差异
为了兼容小程序和原生App，且尽可能的让开发者复用目前的技术栈，崔红保建议开发uni-app时遵循如下约定：
·通用原生js使用微信API，但建议将wx前缀替换为uni
·平台特殊API，通过条件编译调用平台原生API
·数据绑定使用Vue
·标签使用小程序的wxml
·模板指令使用Vue
·样式遵循小程序的wxss
图8 微信小程序、mpvue和uni-app开发规范对比
在语法规范方面，mpvue和uni-app使用的是Vue开发规范，微信小程序使用的是小程序开发规范;在标签集合层，微信小程序和uni-app使用的是wxml，而mpvue使用的是html+wxml;在样式规范层，微信小程序和uni-app使用的是wxss，mpvue使用的是sass/less/postcssd;JS能力层，微信小程序和mpvue使用的是wx前缀，uni-app使用的是uni前缀。
在具体实现层面，uni-app目前处于内部测试阶段，大概一个月左右发布，uni-app和目前的小程序相比，有些东西是不支持的，比如说分包加载，自定义插件，多线程(webwork)，但同时新增了一些在APP里比较常见，但小程序没有的功能，比如侧滑导航、顶部选项卡、列表滑动、其它常用模板(登录、indexList等)。
以上内容是51CTO记者根据DCloud崔红保在WOT2018全球软件与运维技术峰会的演讲内容整理，更多关于WOT的内容请关注51cto.com。
