【摘要】本文从小程序背景出发，阐述了移动端性能和开发成本导致小程序技术的产生与发展。本文对比了几种流行小程序框架在性能上，渲染上、引擎上不同特性，最后，我们提出了一种混合型小程序技术，并给出其技术实现框架以及优势。
【关键词】小程序 RN 混合型框架
一、小程序技术由来及背景
随着移动端的迅猛发展，各种移动终端成为互联网巨大的流量入口，而当各型业务要求迅速且轻巧的部署上线以响应用户的需求时，移动端研发人员需要针对不同的终端的设备特性以及开发环境的特性，去编写相应的多套代码以适配不同终端，这一块带来的研发、测试成本显然非常高，这时候一种小程序技术就被研发出来，通过一套小程序代码适配到多端来实现。
小程序是微信继公众号后的一个重点项目，并且由微信创建了一个新的生态。由于WebView已成为移动网络的重要接入点，所以微信很早就发布了关于JS API的技术。虽然JS API解决了移动网页功能不足的问题，但并未解决移动网页使用不当的问题，例如当用户访问网页时，在浏览器开始显示之前总是有一个白色屏幕过程，且后期“通信网络资源的在线存储器”的功能也未能解决复杂页面的性能问题。微信于是设计出一个更好的技术，使所有开发商都能获得更多更快的移动互联网良好的体验。这个技术就是小程序，它具有：
1、快装，不需要每次用户下载应用，打开即安装。
2、更强的API能力，提供更丰富的API，更强的网络通讯能力。
3、本地原生渲染，这种非webview渲染极大的提升了渲染性能。
4、容易和安全地获取个人隐私数据。
5、简单易用高效率的开发。
二、几种小程序技术比较研究
随着微信小程序技术的普及推广，更多的技术大厂迅速跟进小程序技术，出现了百花齐放的局面，现在就几个主流的技术框架做比较研究：微信小程序、ReactNative、阿里Weex
1、从渲染机制上比较
相比web渲染，原生端流畅度和体验都高一个档次，特别在动画切换，复杂场景下的页面路由。以下是几种技术的渲染机制比较：
ReactNative，原生渲染，虚拟 Dom。RN由 javascript 构建出的虚拟DOM ，驱动界面 View 的渲染, View由安卓和IOS原生组件的渲染出来。
Weex 原生渲染，真实 Dom。weex Vue.js 最终创建DOM 元素， weex-vue-framework 向原生端发送渲染指令，最终渲染生成的是原生组件。
微信小程序， web 渲染，但是小程序是没有 Dom 的概念的。
2、从性能上比较
RN：可以实现自己的分包加载，以优化JS加载的运行时间。在默认情况下，没有长页面性能优化机制。
Weex：默认分包加载， Weex提供了两种长视图生成模式，支持节点和树木生成模式以优化性能。
微信小程序：微信小程序的性能依赖于加载的节点数，支持分包预加载来提升性能。
三、一种混合型小程序技术框架
这里我们提出一种混合型小程序技术框架，通过远程加载微信小程序包执行，底层技术栈使用react-native，上层技术栈使用微信前端组件和与之匹配的API，从而保留了react-native的特性并增加了微信小程序语法支持的相关能力。包含的特性如下：
跨平台：一次开发可以同时运行在iOS和Android两个平台。
多生态：混合型小程序可以同时部署在所有支持RN的App及微信App上。
省成本：相对于原生开发来说，极大地节省了人力成本。
热部署：小程序的部署不需要依赖App发版，可以随时发布，减少发布对客户端版本依赖。
拥有React的开发效率及Native的用户体验兼容微信小程序语法，通过一种混合代码转换器实现小程序代码的同构。
其实现架构如下：
.png)
图1 混合型小程序架构
最上一层是混合框架的应用层，提供小程序加载器，小程序发布管理，小程序应用框架、小程序转换器。
Transformer（小程序转换器）:把微信小程序语法解析成ReactNative语法。开发者用微信小程序的语法开发应用小程序，Transformer通过解析微信小程序语法树，重组成ReactNative JS语法。
小程序加载器（Loader）：对Web端的小程序进行加载，解析， 完整性校验，由于网络带宽的原因，提供差分包的下载与完整包的组装。
APPFramework：小程序应用框架，支持RN小程序的动态配置，登录状态保持以及页面之间的路由支持。
Distribution：小程序的发布管理，本地打包编译，完成在小程序服务器上部署。
第二层为JS层，提供各种UI适配的JS组件，例如视图，按钮，滑动组件，图像组件，网络组件，也包括一些基础业务组件，如登录，支付。这些JS组件支持上层应用的JS语法。
第三层为RN层，为RN的基础框架层，把上层的JS组件解析成原生对应的组件，并渲染出页面。
最下层为原生层，提供与JS组件对应的原生组件，即上层有JSButton组件，下层就有原生Button组件作为对应，最终呈现给用户的是原生渲染出来的页面。
四、总结
我们通过分析不同小程序技术的优势劣势，最终给出一种混合型的小程序技术，这种技术不仅有着简便的小程序开发语言便于开发人员掌握，也支持原生渲染，性能上更优，从而体验更好。
参考文献：
1 邢榕珊;匡芳君;;微信小程序设计[J];计算机时代;2018年08期
作者简介：戴治波（1977- ），男，江苏南京人，硕士，工程师，主要从事移动互联网、大数据、人工智能方面研发工作。