默认
开启辅助访问
打赏 发表评论 1
即时通讯网»社区 › 专项技术区 › 其它分享 › 小程序技术始于微信？来看看移动端小程序技术的前世今生 ...
想开发IM：买成品怕坑？租第3方怕贵？找开源自已撸？尽量别走弯路了... 找站长给点建议
推荐 方案：MobileIMSDK框架、RainbowChat产品、RainbowChat-Web产品 / 签到领积分！ / 官方技术交流群：185926912
小程序技术始于微信？来看看移动端小程序技术的前世今生！
阅读（72065） | 评论（1） 收藏2 淘帖1 赞1
JackJiang Lv.9 精华之王 白金版主 终身成就 5 年前 | 只看该作者 |只看大图 倒序浏览 |阅读模式
微信扫一扫关注！

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


1、引言


微信的成功，并非特定于某个具体的功能，微信的成功实际上是一大批创新技术和体验的成功合集，这也是它为何如此难此被超越的根本原因。

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

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

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

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

本篇文章，将为你盘点移动端小程序技术的前世今生。通过本文，我们能够鲜活地看到小程序的技术演进历程，以及对于所有开发者来说，终将去往何处。

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

2、关于作者


小程序技术始于微信？来看看移动端小程序技术的前世今生！_aa.jpg
王安：DCloud 公司创始人，HTML5 中国产业联盟秘书长。2003 年开始从事移动互联网工作，十几年编程和商业经验，连续创业者。曾任北京市学联主席，毕业后创办 DCloud 公司。兴趣爱好：编程、颠覆式创新。

3、相关文章


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

4、中国特色的移动互联网时代


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

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

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


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

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

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

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

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

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

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

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

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


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

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

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

于是在 iPhone 站稳脚跟后，发布了自己的 App Store，开启了移动互联网的原生应用时代。

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

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

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

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

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

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

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

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

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

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

小程序技术始于微信？来看看移动端小程序技术的前世今生！_2.jpeg
▲ 微信 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 手机助手的扫码里，应用的分享里，都实现了扫码获得一个应用，点击分享消息获得一个应用。

小程序技术始于微信？来看看移动端小程序技术的前世今生！_3.jpg
▲ 在 360 手机助手 3.4 版本中上线的中国第一个小程序

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

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

  • 2016 年 1 月 11 日，微信公开课，张小龙罕见露面，公布了微信应用号的计划，为这个大事件亲自站台。
  • 2016 年 9 月 21 日，微信宣布更名应用号为小程序，面向首批开发者内测。从此，这个词被正式定了下来，“小程序”，成为后续一个时代的代名词。而“流应用”、“微应用”则淹没在历史长河中成为一个令人唏嘘的故事。
  • 2017 年 1 月 9 日，微信公开课，小程序面向用户正式推出。

从此后，阿里巴巴、手机厂商联盟、百度、今日头条，陆续推出了自己的小程序平台，其中也有很多波折与故事，在有偶然、有必然的过程中，形成了今天的局面。

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

6、生态难，难于上青天


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

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

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

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

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

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

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

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

微信用持续而快速的版本升级、高管的站台，告诉大家微信做小程序的决心，并最终通过 2017 年底的跳一跳，引爆了小程序。

从此大家的问题不再是我要不要做小程序了，而转向了：既然要做，怎么才能提升小程序的开发效率、降低开发成本？

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

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


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

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

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

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

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

所幸，最终的结果是，中国人做成了。在国际标准之外，在中国，终于建立起了自己的技术生态。

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

小程序技术始于微信？来看看移动端小程序技术的前世今生！_7.jpg
▲ 京东凹凸实验室

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

组件是一个成熟框架不可缺的东西，不管是 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 库同时支持多家小程序、H5、App。

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

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

小程序技术始于微信？来看看移动端小程序技术的前世今生！_8.jpg
▲ Vue 和 React 百度指数对比

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

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

8、本文小结


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

当年 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客户端启动速度优化实践总结》
>> 更多同类文章 ……

即时通讯网 - 即时通讯开发者社区！ 来源： - 即时通讯开发者社区！

标签:小程序 Hybrid开发 移动端开发 微信
上一篇：盘点主流移动端跨平台UI技术：实现原理、技术优劣、横向对比等▪下一篇：揭秘阿里、腾讯、华为、百度的职级和薪酬体系

本帖已收录至以下技术专辑

相关文章
推荐方案
评论 1
2 楼: 大马仕格 Lv.3 5 年前 | 只看该作者
微信的小程序体验很好，就是打开的时候加载不爽
签名: 不想上班，啦啦啦
返回列表 发新帖 发表评论
打赏楼主 ×
使用微信打赏！ 使用支付宝打赏！
即时通讯技术的分享和传播需要您的支持，感谢打赏！

返回顶部