小程序技术始于微信？来看看移动端小程序技术的前世此生！

本文由DCloud 公司创始人王安原创发布于CSDN，原题《小程序技术演进史》，即时通信网收录时有改动，感谢原做者。

一、引言

微信的成功，并不是特定于某个具体的功能，微信的成功其实是一大批创新技术和体验的成功合集，这也是它为什么如此难此被超越的根本缘由。

做为微信这个超级社交应用中最为亮眼的技术之一——微信小程序，俨然已成历移动端小程序的代名词，不少人一提起“小程序”3个字就条件反射式地认为是微信小程序。事实是，小程序技术并不是微信首创，它的出现和演进，实际上包含了一大批各种公司、各产品技术先驱们的努力。

实际上，早在微信小程序以前，有力推轻应用的百度，有来自 HTML5 中国产业联盟的 DCloud 所主张的流应用，但最终却都已经淹没在了移动互联网的历史长河之中。惟有微信小程序风生水起，更是带动了巨头们的争相入场。

小程序迎来了专属于中国移动互联网的群雄逐鹿的时代。

本文做者王安便是流应用的创造者，做为移动领域的老兵，他依然在矢志不移地构建移动开发工具框架及生态，从原生应用到 HTML5 再到现在的小程序，他是这段历史的见证者、参与者。

本篇文章，将为你盘点移动端小程序技术的前世此生。经过本文，咱们可以鲜活地看到小程序的技术演进历程，以及对于全部开发者来讲，终将去往何处。

（本文同步发布于：http://www.52im.net/thread-26...）

二、关于做者

王安：DCloud 公司创始人，HTML5 中国产业联盟秘书长。2003 年开始从事移动互联网工做，十几年编程和商业经验，连续创业者。曾任北京市学联主席，毕业后创办 DCloud 公司。兴趣爱好：编程、颠覆式创新。

三、相关文章

《最火移动端跨平台方案盘点：React Native、weex、Flutter》
《盘点主流移动端跨平台UI技术：实现原理、技术优劣、横向对比等》

四、中国特点的移动互联网时代

伴随着 QQ 小程序 面向用户开放，这个手机端月活 7 亿的巨无霸正式入场。小程序，终于成为了超级 App 的标配。

盘点下已经支持小程序的超级 App：

微信、企业微信、QQ、支付宝、高德地图、手机淘宝、百度、百度贴吧、百度地图、今日头条、抖音……

这些璀璨耀眼的名字，背后都是巨大的流量。

在这群超级 App 的支持下，中国的移动互联网格局被完全改变。

这个有中国特点的移动互联网时代，被称为“小程序时代”。

这是继手机支付后，中国的移动互联网领先世界的第二个表明事物。

中国的技术标准、开发者生态，第一次获得大规模的普及应用，并且很明显，小程序在功能和体验上均超过了 HTML5。

中国人能创建开发者生态吗？这个命题曾一度让人怀疑。

小程序完成了这一步突破，这是一场值得歌颂的中国技术生态发展史。

让咱们来回顾下这场技术生态革命，是如何开始，又将要去向何方。

五、罗马不是一天建成的，小程序也不是一天发明出来的

HTML5 于 2007 年在 W3C 立项，与 iPhone 发布同年。

乔布斯曾期待 HTML5 能帮助 iPhone 打造起应用生态系统。

但 HTML5 的发展速度并不如预期，它虽然成功地实现了打破 IE+Flash 垄断局面的目标，却没有达到承载优秀的移动互联网体验的地步。

因而在 iPhone 站稳脚跟后，发布了本身的 App Store，开启了移动互联网的原生应用时代。

随后的 Android，原本是基于 Linux 的 OS，与之同期的 MeeGo 等竞争对手采用 C + HTML5 的双模应用生态策略，然而 C 的开发难度太大，HTML5 体验又不行。Android 依靠 Java 技术生态，在竞争中脱颖而出。

因而：在移动互联网初期，应用生态被定了基调 —— 原生开发。

在那个时候，硬件不行，也没有其余办法，原生开发才能在低配硬件上带来商用体验。

但你们都在怀念 HTML，那种无需安装更新、即点即用，直达二级页面的特色，一直让人迷恋。

国内有一批作浏览器的厂商，尝试去改进 HTML5，他们提出了轻应用的概念。

经过给 WebView 扩展原生能力，补充 JS API，让 HTML5 应用能够实现更多功能。

不过这类业务没有取得成功，HTML5 的问题不止是功能不足，性能体验是它更严重的问题，而体验问题，不是简单地扩展 JS 能力能搞定的。

这类业务发展的顶峰，是微信的 JS SDK。

做为国内事实上最大的手机浏览器，微信为它的浏览器内核扩充了大量 JS API，让开发者能够用 JS 调用微信支付、扫码等众多 HTML5 作不到的功能。

▲ 微信 JS SDK 说明文档

但微信团队对这套方案的体验仍然不满意，微信钱包栏目里打车、理财等不少应用虽然嵌入了 JS SDK，但每次点击要等半天白屏，让人用着很痛苦，他们在业内开始寻找新的解决方案。

业内早有专业团队看到了相同的问题。

与浏览器不一样，Hybrid 应用是另外一个细分领域。它们为开发者提供使用 JS 编写跨平台应用的工具，为了让 JS 应用更接近原生应用的功能体验，这个行业的从业者作出了不少尝试。

笔者所在的 DCloud 便是其中之一，咱们提出了改进 HTML5 的“性工能”障碍的解决方案 —— 经过工具、引擎优化、开发模式调整，让开发者能够经过 JS 写出更接近原生 App 体验的应用。

多 WebView 模式，原生接管转场动画、下拉刷新、Tab 分页，预载 WebView……各类优化技术不停迭代，终于让 Hybrid 应用取得了性能体验的突破。

Hybrid 应用和普通的轻应用相比，还有一个巨大的差异：一个是 Client/Server，一个是 Browser/Server。简单来讲，Hybrid 应用是 JS 编写的须要安装的 App，而轻应用是在线网页。

C/S 的应用在每次页面加载时，仅须要联网获取 JSON 数据；而 B/S 应用除了 JSON 数据外，还须要每次从服务器加载页面 DOM、样式、逻辑代码，因此 B/S 应用的页面加载很慢，体验不好。

但是这样的 C/S 应用虽然体验好，却失去了 HTML5 的动态性，仍然须要安装、更新，没法即点即用、直达二级页面。

那么 C/S 应用的动态性是否能够解决呢？对此，咱们提出了流应用概念，把以前 Hybrid 应用里的运行于客户端的 JS 代码，先打包发布到服务器，制定流式加载协议，手机端引擎动态下载这些 JS 代码到本地，而且为了第一次加载速度更快，实现了应用的边下载边运行。

就像流媒体的边下边播同样，应用也能够实现边用边下。

在这套方案的保障下，终于解决了以前的各类难题：让 JS 应用功能体验达到原生，而且可即点即用、可直达二级页面。

现在看来，这已经变成了常识。但在当年，先驱们作了无数艰辛探索。

这套技术，须要让客户端引擎提早预置在手机上，就像流媒体的普及，创建在 Flash 的装机量巨大的基础上，那么普及这个客户端引擎就变得很重要。

2015 年，360 和 DCloud 合做，在 360 手机助手里内嵌了这个客户端引擎，推出了业内第一个商用的小程序，360 称之为 360 微应用。

微应用实现了在 360 手机助手的应用下载页面，同时出现了“秒开”按钮，点击后直接使用。

而且在 360 手机助手的扫码里，应用的分享里，都实现了扫码得到一个应用，点击分享消息得到一个应用。

▲ 在 360 手机助手 3.4 版本中上线的中国第一个小程序

为了作大生态，DCloud 把这套技术标准，捐献给了 HTML5 中国产业联盟，随后，联盟开始推进更多的超级 App 和手机厂商加入，共同推动动态 App 产业的发展。

然而事情并不顺利，巨头们有本身的利益诉求。虽然有一批厂商赞成加入联盟共建生态，但最关键的角色，真正的国民应用“微信”，最终决定自立标准、自研引擎，固然技术原理与流应用是基本一致的。

2016 年 1 月 11 日，微信公开课，张小龙罕见露面，公布了微信应用号的计划，为这个大事件亲自站台。

2016 年 9 月 21 日，微信宣布改名应用号为小程序，面向首批开发者内测。今后，这个词被正式定了下来，“小程序”，成为后续一个时代的代名词。而“流应用”、“微应用”则淹没在历史长河中成为一个使人唏嘘的故事。

2017 年 1 月 9 日，微信公开课，小程序面向用户正式推出。

今后后，阿里巴巴、手机厂商联盟、百度、今日头条，陆续推出了本身的小程序平台，其中也有不少波折与故事，在有偶然、有必然的过程当中，造成了今天的局面。

小程序大潮卷入了更多人，并造成了更大的浪潮，最终迎来了不可逆转的小程序时代。

六、生态难，难于上青天

发明能解决功能体验和动态性的技术方案，虽然难，但不是最难的事情。

最难的是开发者生态的建设。

最初 HTML5 中国产业联盟的策略是在 HTML5 上扩展强化，复用现有的 HTML5 生态。

当微信的标准彻底自立重建时，业内人士都悬着一颗心。

在全球，基于 Web 的技术生态已经很是成熟，各类开发工具、框架、组件、模板...提高着开发者的效率。

小程序丢弃了国际标准组织 W3C 的 DOM 和 Window 标准，仅仅采用基础 JavaScript。这意味着 HTML5 生态的各类轮子没法复用，要彻底重造一个新的小程序开发生态。

当初微信推广 JS SDK 时，是那么地顺其天然，开发者纷纷开始使用，由于对于开发者，只是在他们的 H5 版本上补充一些 API 而已。

而小程序初期，充满了开发者的质疑声：个人业务迭代那么久，让我从新作一个版本，你的生态到底能不能支撑个人投入？

微信用持续而快速的版本升级、高管的站台，告诉你们微信作小程序的决心，并最终经过 2017 年末的跳一跳，引爆了小程序。

今后你们的问题再也不是我要不要作小程序了，而转向了：既然要作，怎么才能提高小程序的开发效率、下降开发成本？

任何一种技术，或者开发模式的演进，在不断成熟的过程当中，都遵循着相似的成熟规律：

技术标准 -> 基础平台 -> 开发工具 -> 培训市场 -> 框架诞生 -> 周边生态逐步完善 -> 轮子之上的轮子

在 HTML5 生态里，已经发展到最终极的形态，好比 Vue 是一个重要框架，而基于 Vue 的各类丰富的 UI 库、测试框架，则是轮子之上的轮子。

多层轮子表明着生态的繁荣，也意味着开发者的开发效率更高。

可微信的全新标准出现时，它把开发者推回了原始社会，一切都要重来。

这在当时看来，并非一个必然会成功的事情（其实直到如今，好比图表类轮子，小程序仍然比不过 HTML5）。

时至今日，讨论这个标准的选择对错已经没有意义。当支付宝、百度、今日头条都开始参考这个标准作小程序时，时代已经不可阻挡。

所幸，最终的结果是，中国人作成了。在国际标准以外，在中国，终于创建起了本身的技术生态。

而且这个生态，给用户带来了更好的体验，给开发者带来了更多流量和变现效率的提高，这是一个比 HTML5 更优秀的生态。

七、野蛮的技术生态成长速度

两年时间，中国的小程序开发者如何从原始社会进阶到现代文明？这也是一段有趣的历史。

咱们来看看小程序技术生态是如何快速成长，走完上面所说的这套技术成熟路线，也就是从技术标准到轮子之上的轮子的。

在 Web 世界里，已经成熟到了原生 JS 用量不多的时代了，开发人员大量使用 Vue 等框架，而且在 Vue 的基础之上，又有更多轮子。

当中国的开发人员面临重头开始时，他们感觉到效率对比的差距，既然时代已不可阻挡，那就拥抱它。勤劳的中国技术人开始蓬勃地建设起了小程序各类周边技术生态。

其中比较重要的是开发框架的迭代，咱们看看每一个小程序开发框架为何会诞生、流行和衰落。

最初的微信小程序，一片荒蛮，一份文档 + 一个难用的 IDE，不少效率工具好比 npm、预处理器这些都不支持，而这些已是大型项目离不开的工具。

因而，第一个标志性的框架出现了 —— WePY。

WePY 紧随微信小程序在 2017 年发布，本来是腾讯其余部门的一个我的工程师的做品。在那个年代，WePY 有效地解决了小程序不支持 npm、预处理器的痛点，被引爆后，腾讯官方才把这个框架收编到官方的 GitHub 下。

不过 WePY 也面临不少问题，它使用了私有语法，这让它在生态建设上面临很大难度，IDE 着色、语法提示、语法校验、格式化、人员招聘培训等各方面问题制约着它的流行和普及。

面对这些问题，人们开始思考，有什么更好的方式，能够复用现有技术生态来快速完善小程序生态？

这时候下一个重要框架借势诞生，美团前端在 2018 年初开源了 MPVue。

MPVue 采用 Vue 语法来开发小程序，经过对 Vue.js 的底层改造，实现了编译到微信小程序。

MPVue 良好地借助了 Vue 的技术生态，周边工具如 IDE、校验器、格式化等支持直接复用、人员招聘培训等生态建设压力大幅降低，受到了大量开发者的欢迎。

看着熟悉 Vue 的开发者终于有了趁手的轮子，那熟悉 React 的开发者怎会无动于衷？

京东团队是 React 的重度用户，还自研了 JDreact，因而他们开发了 Taro 框架，一款基于 React 语法编写小程序的框架。

但 Taro 并非想简单作一个 MPVue 在 React 世界里的翻版，Taro 相比 MPVue，想要解决更多重要问题。

Taro 面世较晚，此时微信、支付宝、百度、头条都已发布或宣传了本身的小程序，开发者面临一个多端开发和适配的问题。

因而 Taro 率先支持多端开发，它甚至还能发布到 H5 和 App。

▲ 京东凹凸实验室

当时小程序领域还有一个重要变化，微信开始支持小程序自定义组件。

组件是一个成熟框架不可缺的东西，无论是 Vue 仍是 React 都有丰富的组件生态。

在过去，MPVue 时代，是把 Vue 组件也编译成页面模板，这带来一个很大的性能问题，在复杂页面里（好比长列表）使用组件，更新组件状态会致使整个页面的数据所有从 JS 逻辑层向视图层通信一次，大量数据通信会很是卡顿。

注意：小程序的逻辑层运行在 V8 或 JSCore 下，和视图层是分离的，通信阻塞很容易引起性能问题。

因而 Taro 把 React 组件编译为新出的微信小程序自定义组件，这种组件在数据更新时，只会更新组件内部的数据，而不是整个页面更新数据，从而大幅减小了数据通讯量。

这一轮的后浪推前浪很猛，Taro 在性能和多端支持上，都超越了 MPVue。

看着 React 阵营取得如此成绩，Vue 阵营天然会继续追击。

咱们基于 Vue 开发了 uni-app，它实现了自定义组件编译模式，并在算法上作了不少优化。另外，以前 MPVue 对 Vue 的语法支持度不太完善，好比过滤器等不支持，在 uni-app 中咱们进行了解决。

一样，uni-app 也看到了前浪的其余问题：Taro 虽然迈出了多端的第一步，但多端支持能力比较弱，每一个平台仍然各自开发大量代码。核心缘由，是Taro 在 H5 端和 App 端，并非一个完整的小程序技术架构，没法保持最大程度的统一。

因而 uni-app 在 App 端，使用了一个技术架构相同的小程序引擎，自己就能够直接运行小程序应用，这个引擎搭配小程序代码打包为 App，开发者一行代码不用改，能够同时发布小程序和 App。

固然，其 App 引擎从 Hybrid 应用起家，它提供的 API 要比小程序多不少，由于 App 的需求会比小程序丰富，它还支持把 WebView 渲染引擎替换为 Weex 渲染引擎。

以后 uni-app 又发布了 H5 版的小程序引擎，原理与小程序的 PC 模拟器相同，实现了良好的跨 H5 版的发布。因而 uni-app 比较完美地实现了开发一次，7 个平台发布。

第一层轮子就这样迅速发展了起来，Web 世界里最成熟的 Vue、React 技术生态被导入了小程序开发生态中。而后轮子之上的轮子开始如火如荼的建设。

以 UI 库为例，以前的 UI 库，有 Vue 库、React 库，有 PC 库、H5 库和小程序库，种类繁多，甚至说混乱。

好比在 Vue 阵营中，Vant 和 iView 这两个 UI 库，都是同时维护两个版本，它们即有 H5 版，又有小程序版。

不止框架做者麻烦，开发者想在多端使用这些 UI 库时，会发如今不一样端还须要引入不一样的 UI 库，写法都不同，这让开发者很崩溃。

既然已经能够多端开发应用，因而在多端开发的领域里，开始出现轮子之上的轮子，多端 UI 库。

首先是 Taro 推出了 Taro UI，实现了 H5 和小程序 UI 库的统一，不过惋惜 Taro UI 不支持 App 端。

而后 uni-app 推出了 uni UI，这个 UI 库同时支持多家小程序、H五、App。

因为 uni-app 和 MPVue 同属 Vue 阵营，它们的组件是互通的。因而这两家联合举办了一场插件大赛，创建了插件市场。

在中国的前端开发者领域，有不少和国外不同的地方：一个是国内有小程序，第二个是国内 Vue 的开发者体量远超过 React 和 Angular。这里面很大的缘由，是 Vue.js 的做者尤雨溪，是中国人。

▲ Vue 和 React 百度指数对比

在庞大的 Vue 用户体量支持下，uni-app 和 MPVue 的周边生态迅速发展起来，开发工具、周边轮子、教育培训等生态快速完善。目前在 Vue 阵营下，开发者在 Web 生态下所需的轮子，在多端开发下基本也都有了。

短短两年时间，小程序开发生态里几拨迭代，轮子之上的轮子不断涌现，快速进入了成熟期。

八、本文小结

产业还在继续发展，每当底层有重大技术变动时，上层框架世界就会发生新机会。

当年 HTML5 标准不统一，浏览器兼容性问题严重，诞生了 jQurey 的机会。而在移动互联网下半场，浏览器兼容已经再也不是核心问题，jQurey 的地位被更适合移动互联网的 Vue 替代。

咱们不知道将来还会有什么新的框架出世，但咱们知道方向：

对于开发者而言，老是会向着更高的开发效率、更高的性能、更高的投入产出比前进。

对于开发商，目前的小程序，虽然发展了 2 年，但流量增加空间仍然巨大，微信以外，不少超级 App 的势能将逐渐释放，整个小程序产业的日活总量有数亿的提高空间。

若是开发商能追上这拨红利，就能得到更多增加。而多端框架的出现，能够帮助开发商更好的把握这拨红利。

中国的技术发展，此刻正在经历一个分水岭，从全面的技术进口，到开始建设本身的标准和开发者生态。早晚，会开始向外输出，引领世界的进步。

无论中美是否开打贸易战，这一转变都是必须作的事情。

中国的移动支付、小程序、5G，不少领域已经走在了全球前面。中国人发明的 Vue 已经在影响全球。

虽然还有不少困难仍需克服，但咱们每一个开发者，都是新时代的见证者，更是新生态的建设者！

附录：更多移动端开发精华文章

《全面了解移动端DNS域名劫持等杂症：技术原理、问题根源、解决方案等》

《美图App的移动端DNS优化实践：HTTPS请求耗时减少近半》

《金蝶随手记团队分享：还在用JSON? Protobuf让数据传输更省更快(原理篇)》

《金蝶随手记团队分享：还在用JSON? Protobuf让数据传输更省更快(实战篇)》

《腾讯技术分享：社交网络图片的带宽压缩技术演进之路》

《通俗易懂：基于集群的移动端IM接入层负载均衡方案分享》

《QQ音乐团队分享：Android中的图片压缩技术详解（上篇）》

《QQ音乐团队分享：Android中的图片压缩技术详解（下篇）》

《腾讯原创分享(一)：如何大幅提高移动网络下手机QQ的图片传输速度和成功率》

《腾讯原创分享(二)：如何大幅压缩移动网络下APP的流量消耗（上篇）》

《腾讯原创分享(三)：如何大幅压缩移动网络下APP的流量消耗（下篇）》

《基于社交网络的Yelp是如何实现海量用户图片的无损压缩的？》

《腾讯技术分享：腾讯是如何大幅下降带宽和网络流量的(图片压缩篇)》

《腾讯技术分享：腾讯是如何大幅下降带宽和网络流量的(音视频技术篇)》

《最火移动端跨平台方案盘点：React Native、weex、Flutter》

《盘点主流移动端跨平台UI技术：实现原理、技术优劣、横向对比等》

《小程序技术始于微信？来看看移动端小程序技术的前世此生！》

《iPhone X 的 UI界面适配官方指南！》

《新浪微博技术分享：微博短视频服务的优化实践之路》

《全面掌握移动端主流图片格式的特色、性能、调优等》

《迈向高阶：优秀Android程序员必知必会的网络基础》

《HTTPS时代已来，打算更新你的HTTP服务了吗？》

《移动端APP的日志上报机制的优化实践》

《移动端网络优化之HTTP请求的DNS优化》

《伪即时通信：分享滴滴出行iOS客户端的演进过程》

《Android版微信从300KB到30MB的技术演进(PPT讲稿) [附件下载]》

《微信团队原创分享：Android版微信从300KB到30MB的技术演进》

《Android程序员的痛你永远不懂(一)：Bitmap到底占用多大内存？》

《Android程序员的痛你永远不懂(二)：如何减小Bitmap内存占用？》

《Android反编译利器APKDB：没有美工的日子里继续坚强的撸》

《微信团队原创分享：Android内存泄漏监控和优化技巧总结》

《全面总结iOS版微信升级iOS9遇到的各类“坑”》

《微信团队原创资源混淆工具：让你的APK立减1M》

《微信团队原创Android资源混淆工具：AndResGuard [有源码]》

《Android版微信安装包“减肥”实战记录》

《iOS版微信安装包“减肥”实战记录》

《移动端IM实践：iOS版微信界面卡顿监测方案》

《iOS端移动网络调优的8条建议》

《微信“红包照片”背后的技术难题》

《移动端IM实践：iOS版微信小视频功能技术方案实录》

《移动端IM实践：Android版微信如何大幅提高交互性能（一）》

《移动端IM实践：Android版微信如何大幅提高交互性能（二）》

《移动端IM实践：iOS版微信的多设备字体适配方案探讨》

《爱奇艺技术分享：爱奇艺Android客户端启动速度优化实践总结》

更多同类文章 ……

（本文同步发布于：http://www.52im.net/thread-26...）