DCloud崔宏宝：基于Vue技术开发微信小程序和原生应用

【.com原稿】以微信小程序为代表的“免安装”应用的流行，及其自带的开发规范，前端工程师面对越来越多的跨端开发工作，每天都在疲于应对。这个时候，利用已有的技术栈快速实现跨端开发就成了各个前端团队的迫切需求。DCloudCTO崔洪宝在WOT2018全球软件与运维技术峰会上发表了主题为《基于Vue开发微信小程序和原生App》的演讲。崔老师从??小程序和Apps两个平台入手，探讨了使用Vue技术栈的跨端开发方案和实现思路。详细的讲解，我们来看看如何基于Vue实现微信小程序的开发。图1DCloudCTO崔洪宝开发微信小程序随着微信小程序的兴起，小程序背后的技术支持如雨后春笋般涌现。纵观各种方案，只有两种方案能够支持Vue的开发。其中之一是腾讯推出了类Vue的解决方案——WePy，但WePy并不能完全支持Vue开发；另一个是美团点评团队推出的mpvue。Vue开发者开发小程序的痛点，所以一经推出，短短20天，就收获了7k+用户。感谢mpvue开发团队为我们解决了小程序的问题。下面将简要介绍mpvue的主要特点和原理。mpvue的主要特点mpvue的主要特点包括：完善的组件化开发能力：提高代码复用性完整的Vue.js开发体验便捷的Vuex数据管理解决方案：轻松构建复杂应用快速的webpack构建机制：自动定义构建策略，开发时hotReloadphase支持使用npm外部依赖使用Vue.js命令行工具vue-cli快速初始化项目H5代码转小程序目标代码mpvue快速体验根据mpvue官方文档安装vue-cli工具，执行init命令创建一个mpvue-quickstart模板工程，创建步骤和模板工程目录结构如下图所示：图2mpvue快速体验mpvue构建流程构建流程是mpvue的核心部分之一，通过webpack，完成了vue模板到微信小程序的wxml和wxss的转换，f最终使其能够在微信小程序环境下运行。如下图，src目录是一个标准的小程序目录结构，dist目录是mpvue-loader编译后的目录。可以看到下图中的index.vue和main.js文件已经转化为小程序的js、wxml、wxss文件，甚至可能还有第四个文件——json文件；并且app.vue文件被转换为app.js、app.json和app.wxss文件。图3mpvue构建过程mpvue实现原理Vue.js和小程序都是典型的逻辑视图层框架，它们的工作原理是相似的。数据变化驱动视图更新，视图交互触发事件，事件响应函数修改数据，然后再次更新视图。实际上mpvue起到了桥梁的作用，将小程序的数据绑定功能委托给了Vue；小程序负责视图层的展示，数据逻辑汇聚到Vue，Vue中的数据发生变化再同步到小程序，从而实现两套Framework的数据同步。图4mpvue开发原生App的实现原理通过前面的介绍，我们了解到开发者可以借助mpvue基于Vue技术栈开发微信小程序；下一个问题，如何基于Vue技术栈开发原生应用？DCloud的idea是的，既然已经可以在小程序中正常运行，那么发布app的问题就通过实现一套和小程序一样的App运行环境来解决。下面将分析小程序的运行时框架，并说明如何模拟小程序的运行时环境。小程序框架小程序框架主要分为视图层和逻辑层。核心是一套响应式数据绑定系统，还包括基础组件、页面管理、微信JSAPI，如下图所示：图5小程序框架数据绑定系统小程序视图层接收数据逻辑层并将其渲染成UI视图，同时将视图层的事件发送给逻辑层。小程序的view是通过webview渲染的（不是原生渲染）。iOS平台使用WKWebview渲染，Android平台使用基于MobileChrome53/57内核的X5渲染。逻辑层负责数据处理并输出到视图层，同时接收来自视图层的事件通知。逻辑层不同于视图层。它不在webview中执行，而是运行在一个独立的JS进程（引擎）中。准确的说，iOS平台的小程序逻辑层运行在JavaScriptCore中，Android平台的小程序逻辑层运行在X5的JSCore中。开发者在小程序的不同js文件中编写的所有JavaScript代码，都会被打包合并成一个JavaScript代码，然后运行在一个独立的JS进程中。不管JS独立进程还是webview运行环境，这里只说逻辑层和视图层的数据响应框架。Vue其实也有相应的实现。小程序和Vue是重复的。如果自己实现一套App运行环境，其实可以直接使用Vue的运行环境，而不用实现这个小程序的数据绑定系统。基础组件小程序为开发者提供了一系列基础组件，包括：视图容器、基础内容、表单组件、导航、媒体组件、地图、画布和开放能力。比如小程序的navigator标签，跳转到新页面这个标签类似于Vue的router-link标签，可以替换。跳转到新页面至于其他的小程序标签，比如View，也可以通过Vue模板来模拟，这些模板内置进入运行时。这样，开发者继续使用小程序的组件标签，在运行时将被Vue模板取代。WeChatNativeAPI经过一年多的发展和完善，微信小程序现已支持九大类、上百个原生API，方便传递微信和移动设备的原生能力，如设备信息、网络环境、扫码等等等，而这些API跨越了iOS和Android两个平台。从头开始模拟和实现所有这些API将是一个非常巨大的工作量。图6小程序框架-JSAPI好在DCloud有Html5Plus的积累。经过几年的完善，已经实现了常用功能的JS封装。图7HTML5+规范我们可以在框架层将微信API改写成Html5Plus的JSAPI，让开发者写的是微信API，实际上调用的是Plus能力。当然，微信API不能完全转为Plus。比如一些基于微信的自生态、微信运动、朋友圈代码等，Plus无法封装，需要条件编译实现平台差异。代码编写和子平台构建。以微信活动为例，实际操作如下：小程序runtime的主要功能模块上面已经说了，下面简单介绍下模拟实现的思路。DCloud将此实施计划称为uni-app。当然，小程序运行时也需要有很多细节设计，以保证最佳的用户体验。下面是一个简单的示意图，展示uni-app模拟实现的思路：开发约束和平台差异为了兼容小程序和原生app，同时让开发者尽可能的复用现有的技术栈，崔宏宝建议uni-app的开发遵循以下约定：一般nativejs使用微信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常用但不可用的功能小程序中，如侧滑导航、顶部标签、列表滑动等常用模板（login、indexList等）。以上内容是记者根据DCloud崔洪宝在WOT2018全球软件与运维技术峰会上的演讲整理而成。更多WOT资讯请关注51cto.com。