王安：移动端小程序技术的前世今生

菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技

王安：移动端小程序技术的前世今生

1 简介

微信的成功并不局限于某个特定的功能。 微信的成功实际上是大量创新技术和经验的成功集合。 这就是它如此难以被超越的根本原因。

作为超级社交应用微信中*引人注目的技术之一，微信小程序已经成为移动小程序的代名词。 一提到“小程序”这个词，很多人都会条件反射地想到微信。 小程序。 事实上，小程序技术并非微信独有。 它的出现和演变实际上包含了大量企业和各类产品技术先驱的努力。

事实上，早在微信小程序之前，百度就大力推广轻应用，也有HTML5中国产业联盟倡导的流应用，但*终都淹没在了移动互联网的历史长河中。 只有微信小程序火了，引发了巨头们的争相入局。

小程序开启了中国移动互联网的竞争时代。

本文作者王安是流媒体应用的创建者。 作为移动领域的资深人士，他仍然坚定不移地构建移动开发工具框架和生态系统，从原生应用到HTML5再到如今的小程序。 他是这段历史的一部分。 见证者和参与者。

本文将盘点移动小程序技术的前世今生。 通过这篇文章，我们可以形象地看到小程序的技术演进以及对于所有开发来说*终将走向何方。

（本文同步发表于：）

2. 关于作者

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

3.相关文章

《盘点*热门的移动跨平台解决方案：React、weex》

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

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

随着小程序对用户的开放，这个拥有7亿手机月活跃用户的巨头正式进军市场。 小程序终于成为超级应用的标配。

查看已经支持小程序超级应用：

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

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

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

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

这是继移动支付之后，中国移动互联网领先全球的第二件具有代表性的事情。

中国的技术标准和开发生态首次得到广泛应用，小程序在功能和体验上超越HTML5是显而易见的。

中国人能打造开发生态系统吗？ 这个提议曾一度受到质疑。

小程序实现这一突破，是一部值得称道的中国科技生态发展史。

让我们回顾一下这场技术生态革命是如何开始的以及将走向何方。

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

HTML5 于 2007 年作为 W3C 项目成立，并于同年发布。

乔布斯曾期望 HTML5 能够帮助构建应用程序生态系统。

然而，HTML5的发展速度并没有想象中那么快。 虽然成功实现了打破IE+Flash垄断的目标，但还没有达到承载优秀移动互联网体验的地步。

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

随后，它*初是一个基于Linux的操作系统。 与此同时，MeeGo等竞争对手采取了C+HTML5的双模应用生态策略。 但C开发难度太大，HTML5体验也不好。 依靠Java技术生态系统在竞争中脱颖而出。

所以：移动互联网初期，应用生态就定下了基调——原生开发。

当时硬件不好，没有其他办法。 只有原生开发才能在低端硬件上带来商业体验。

但每个人都缺少 HTML。 无需安装更新、点击即用、直接进入二级页面的特点一直让人们着迷。

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

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

然而，此类业务并未取得成功。 HTML5的问题不仅仅是功能的缺失，还有更严重的性能体验问题。 体验问题并不能通过简单扩展JS能力来解决。

这类业务开发的巅峰之作就是微信的JS SDK。

微信作为国内事实上*大的手机浏览器，用大量的JS API扩展了浏览器核心，让开发可以使用JS调用微信支付、二维码扫描等许多HTML5无法做到的功能。

▲ 微信JS SDK文档

不过，微信团队对于这一解决方案的体验仍然不满意。 虽然微信钱包栏目中的打车、理财等很多应用都嵌入了JS SDK，但每次点击都要等待很长时间才能看到黑屏，使用起来非常痛苦。 他们开始在行业中寻找新的解决方案。

业内已经有专业团队看到了同样的问题。

与浏览器不同，应用程序是另一个部分。 它们为开发提供了使用 JS 编写跨平台应用程序的工具。 为了让JS应用更接近原生应用的功能体验，这个行业的从业者做了很多尝试。

笔者就是其中之一。 我们提出了改善HTML5“性能”障碍的解决方案——通过工具、引擎优化、开发模式调整，开发可以使用JS编写更接近原生App体验的App。 应用。

多模式、原生接管过渡动画、下拉刷新、tab分页、预加载……各种优化技术不断迭代，*终让应用在性能体验上实现突破。

与普通的轻应用相比，还有一个巨大的区别：一个是/，另一个是/。 简单来说，应用就是用JS编写的需要安装的应用，而轻应用就是在线网页。

C/S应用只需在每次页面加载时连接互联网即可获取JSON数据； 而B/S应用程序，除了JSON数据外，每次还需要从服务器加载页面DOM、样式、逻辑代码，因此B/S应用程序页面加载速度慢，体验差。

然而，这样的C/S应用虽然体验很好，但却失去了HTML5的动态特性。 仍需安装更新，无法直接点击使用或直接进入二级页面。

那么C/S应用的动态性能解决吗？ 对此，我们提出了流式应用的概念。 我们将之前应用中客户端运行的JS代码打包发布到服务器，并制定流式加载协议。 移动引擎将这些JS代码动态下载到本地，**次加载速度更快，可以同时下载和运行应用程序。

就像流媒体可以同时下载和播放一样，应用程序也可以同时使用和下载。

在这个方案的保护下，之前的各种问题终于得到了解决：让JS应用功能体验原生，可以立即使用，直达二级页面。

现在看来，这已经成为常识。 但当年，先行者们进行了无数艰苦的探索。

该技术需要提前在手机上预设客户端引擎。 就像流媒体的普及是建立在Flash巨大的装机量基础之上的，普及这个客户端引擎就变得非常重要。

2015年，360与谷歌合作，将这款客户端引擎嵌入到360手机助手中，并推出了业界**个商业小程序，360称之为360微应用。

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

并且在360手机助手的二维码扫描和应用分享中，可以扫描二维码获取应用，点击分享消息即可获取应用。

▲ 360手机助手3.4版上线国内首小程序

为了扩大生态系统，这套技术标准被捐赠给HTML5中国产业联盟。 随后，联盟开始推动更多超级App和手机厂商加入，共同推动充满活力的App产业发展。

然而，事情进展并不顺利。 巨头们都有自己的利益。 虽然一批厂商同意加入联盟共建生态系统，但*关键的角色，真正的全民应用“微信”，*终决定建立自己的标准，开发自己的引擎。 当然，技术原理和流媒体应用基本相同。

2016年1月11日，张小龙罕见亮相微信公开课，宣布了微信应用号的规划，并亲自为这一重大事件站出来。

2016年9月21日，微信宣布将应用号更名为小程序，面向首批开发进行内测。 从此，这个词正式定论，“小程序”成为随后时代的代名词。 然而，“流应用”和“微应用”却淹没在历史的长河中，成为一段悲伤的故事。

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

此后，阿里巴巴、手机厂商联盟、百度、今日头条等相继推出了自己的小程序平台。 过程中也有很多曲折和故事，通过偶然和必然的过程才导致了今天的局面。

小程序风潮牵动了更多人，形成了更大的浪潮，*终迎来了不可逆转的小程序时代。

6.生态难，登天难

虽然发明能够解决功能体验和动态的技术方案很难，但这还不是*困难的事情。

其中*困难的就是开发生态的建设。

HTML5中国产业联盟的*初战略是扩大和加强HTML5并重用现有的HTML5生态系统。

当微信的标准完全自行重建时，业内人士感到担忧。

在全球范围内，基于Web的技术生态系统已经非常成熟，各种开发工具、框架、组件、模板……正在提高开发的效率。

小程序抛弃了DOM和国际标准组织W3C的标准，只使用基础的Java。 这意味着HTML5生态系统的各个轮子无法复用，必须彻底重新构建新的小程序开发生态系统。

当微信推广JS SDK的时候，很自然的，开发就开始纷纷使用它，因为对于开发来说，无非是在自己的H5版本中添加一些API而已。

在小程序的早期，开发充满了疑惑：我的业务迭代了这么久，如果让我做一个新版本，你们的生态系统能支持我的投资吗？

微信持续快速的版本升级和高层的站台，向大家传达了微信做小程序决心，并*终在2017年底通过跳一跳引爆了小程序。

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

任何技术或开发模式的演变，随着其成熟，都遵循类似的成熟规则：

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

在HTML5生态系统中，它已经发展到了终极形态。 比如Vue是一个重要的框架，基于Vue的各种丰富的UI库和测试框架就是轮子上的轮子。

多层轮子代表生态繁荣，也意味着开发可以更高效地开发。

但当微信的新标准出现后，却把开发推回了原始社会，不得不重新开始。

在当时，这并不是一件注定会成功的事情（事实上，直到现在，小程序，比如图表轮子，仍然不如 HTML5）。

今天，讨论这个标准的选择是对还是错，已经没有意义了。 当支付宝、百度、今日头条都开始参照这个标准来打造小程序时，时代已经势不可挡。

幸运的是，*终的结果是中国人成功了。 除了国际标准之外，中国也终于建立了自己的技术生态系统。

而这个生态系统给用户带来了更好的体验，也给开发带来了更多的流量和变现效率的提升。 这是一个比 HTML5 更好的生态系统。

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

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

我们来看看小程序技术生态是如何快速成长并完成前面提到的技术成熟路线，即从技术标准到轮上轮的。

在Web世界中，已经成熟到了很少使用原生JS的时代。 开发大量使用Vue等框架，基于Vue的轮子也比较多。

当中国开发面临重新开始时，他们感受到了效率上的差距。 既然时代不可阻挡，那就拥抱吧。 勤劳的中国技术人开始大力打造小程序各种周边技术生态。

更重要的是开发框架的迭代。 我们来看看各个小程序开发框架为何诞生、流行、衰落的原因。

*初的微信小程序是野蛮的，由一个文档+一个难以使用的IDE组成。 许多效率工具如npm和预处理器不被支持，而这些已经是大型项目不可或缺的工具。

于是王安：移动端小程序技术的前世今生，**个标志性框架出现了——WePY。

WePY继微信小程序之后于2017年发布。 原本是腾讯另一个部门的个人工程师的作品。 当时WePY有效解决了小程序不支持npm和预处理器的痛点。 被引爆后，腾讯正式将这个框架纳入官网。

然而，WePY也面临着很多问题。 它使用私有语法，这使得构建生态系统变得非常困难。 IDE着色、语法提示、语法验证、格式化以及人员招聘和培训等各种问题限制了它的普及。 和人气。

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

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

MPVue使用Vue语法来开发小程序。 通过Vue.js底层改造，编译成微信小程序。

MPVue很好地利用了Vue的技术生态。 IDE、验证器、格式化等外围工具支持直接复用，人员招聘、培训等生态建设的压力大大减轻，受到了大量开发的欢迎。

看到熟悉Vue的开发终于有了可以利用的轮子，熟悉React的开发又怎能无动于衷呢？

京东团队是React的重度用户，也自己开发了React，因此他们开发Taro框架，一个基于React语法编写小程序的框架。

但 Taro 并不只是想成为 React 世界中 MPVue 的翻版。 Taro 想要解决比 MPVue 更重要的问题。

太郎出来的比较晚。 此时，微信、支付宝、百度、今日头条都发布或推广了自己的小程序。 开发面临多终端开发和适配问题。

所以Taro率先支持多终端开发，甚至可以发布到H5和App。

▲ 京东凹凸实验室

彼时，小程序领域又发生了一次重要变化。 微信开始支持小程序自定义组件。

对于一个成熟的框架来说，组件是不可或缺的。 Vue 和 React 都拥有丰富的组件生态。

以前MPVue时代，Vue组件也被编译成页面模板，带来了很大的性能问题。 在复杂页面（比如长列表）中使用组件时，更新组件状态会导致整个页面的所有数据都从JS逻辑层通信一次到视图层，大量的数据通信会很不方便。慢的。

注：小程序逻辑层运行在V8及以下版本，与视图层分离。 通信阻塞很容易导致性能问题。

于是Taro将React组件编译成了新的微信小程序自定义组件。 当数据更新时，该组件只会更新组件内部的数据，而不是更新整个页面的数据，从而大大减少了数据通信量。

本轮推击激烈，Taro 在性能和多终端支持方面超越了 MPVue。

看到React阵营取得了这样的成绩，Vue阵营自然会继续追求。

我们基于Vue开发uni-app，实现了自定义组件编译模式，并在算法上做了很多优化。 另外，之前MPVue对Vue的语法支持并不完善，比如过滤器等，我们在uni-app中已经解决了这个问题。

同样，uni-app也看到了千浪的其他问题：Taro虽然迈出了多端的**步，但其多端支持能力相对较弱，各个平台仍然独立开发大量代码。 核心原因是Taro在H5端和App端并不是一个完整的小程序技术架构，无法保持*大程度的统一。

因此uni-app在App端采用了相同技术架构的小程序引擎，可以直接运行小程序应用。 该引擎与小程序代码一起打包为App。 开发无需更改一行代码，即可同时发布小程序。 和应用程序。

当然，它的App引擎是从应用程序开始的。 它提供的API比小程序多很多，因为应用的需求会比小程序更丰富。 它还支持将渲染引擎替换为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和React。 造成这种情况的很大原因是Vue.js的作者尤玉溪是中国人。

▲ Vue 和 React 百度指数对比

在Vue海量用户的支持下，uni-app、MPVue周边生态发展迅速，开发工具、外设轮子、教育培训等生态系统迅速完善。 目前，在Vue阵营中，开发在Web生态中所需要的轮子基本上已经具备了多终端开发能力。

短短两年的时间，小程序开发生态经历了数次迭代，周而复始，迅速进入成熟阶段。

八、本文总结

行业不断发展，每当底层发生重大技术变革时，上层框架的世界就会出现新的机会。

当时HTML5标准不统一，浏览器兼容性问题严重，于是机会就诞生了。 移动互联网下半场，浏览器兼容性不再是核心问题，其位置被更适合移动互联网的Vue所取代。

我们不知道未来会发布什么新框架，但我们知道方向：

对于开发来说，永远都会朝着更高的开发效率、更高的性能、更高的投入产出比迈进。

对于开发来说，目前的小程序虽然已经开发了2年，但流量增长空间依然巨大。 除微信外，众多超级应用的潜力将逐渐释放，整个小程序行业的日活总量还有数亿的提升空间。

如果开发能够抓住这个红利，他们就能实现更多的增长。 多端框架的出现可以帮助开发更好地抓住这个红利。

中国的技术发展目前正在经历一个分水岭，从全面的技术引进到开始建立自己的标准和开发生态系统。 迟早它会开始向外界输出，引领世界的进步。

无论中美是否发动贸易战，这种改变都是必须要做的事情。

中国的移动支付、小程序、5G等多个领域已经领先全球。 Vue，中国人发明的，已经在影响世界。

虽然还有很多困难需要克服，但我们每一个开发都是新时代的见证者，都是新生态的建设者！

附录：更多移动开发亮点文章《全面了解移动DNS域名劫持及其他并发症：技术原理、根源、解决方案等》 《美图App手机DNS优化实践：HTTPS请求时间减少近一半》》金蝶随手记团队分享：还在用JSON？ 让数据传输更便宜、更快（原理）》《金蝶随手记团队分享：还在用JSON？ 让数据传输更便宜、更快（实践部分）》《腾讯技术分享：社交网络图片带宽压缩技术的演进》《通俗易懂：基于集群的移动终端IM接入层负载均衡解决方案分享》《QQ音乐团队》分享：中国图像压缩技术详解（下）》《QQ音乐团队分享：中国图像压缩技术详解（下）》《腾讯原创分享（一）：如何大幅提升图像传输速度》移动网络下手Q的成功率及》《腾讯原创分享（二）：如何大幅降低移动网络下APP的流量消耗（上）》《腾讯原创分享（三）：如何大幅降低APP在移动网络下的流量消耗（下）》移动网络APP的流量消耗（下二）》《基于社交网络的Yelp如何实现海量用户图片无损压缩？》《腾讯技术分享：腾讯如何大幅降低带宽和网络流量（图像压缩）》《腾讯技术分享：腾讯如何大幅降低带宽和网络流量（音视频技术）》《*受欢迎的移动终端平台解决方案盘点：React、weex》《主流移动跨平台UI技术盘点：实现原理、技术优缺点》 、横向比较等” “小程序技术是从微信开始的？ 让我们来看看移动小程序技术的前世今生吧！ 》《X的UI界面适配官方指南！ 》《新浪微博技术分享：微博短视频服务的优化实践》《全面掌握移动端主流图像格式的特点、性能、调优等》《迈向高级：优秀程序员必须了解和掌握的知识》了解《网络基础知识》HTTPS时代已经到来，您是否打算更新您的HTTP服务？ 《移动APP日志上报机制的优化实践》《移动网络优化的HTTP请求DNS优化》《伪即时通讯：分享滴滴出行iOS客户端的演进》《微信版本从300KB到30MB的技术演进（PPT讲座）注）【下载附件】》《微信团队原创分享：微信从300KB到30MB的技术演进》《你永远不会懂程序员的苦（一）：占用多少内存？》你永远不会懂程序员之痛（二）：如何减少内存使用？ 》《反编译工具APKDB：在没有艺术家的日子里继续坚强》《微信团队原创分享：内存泄漏监控和优化技巧总结》《iOS版微信升级到iOS9遇到的各种“坑”的全面总结》 《微信团队原创资源混淆工具：让你的APK瞬间缩小1M》《微信团队原创资源混淆工具：[附源码]》《微信版安装包“减肥”实用记录》《iOS版微信》安装包《减肥》实战记录》《移动IM实践：iOS微信界面卡顿监控解决方案》《iOS移动网络调优8个建议》《微信“红包照片”背后的技术问题》《移动IM实践：iOS微信短视频》功能技术方案记录》《移动IM实践：微信版如何大幅提升交互性能（一）》《移动IM实践：微信版如何大幅提升交互性能（二）》《移动IM实践：多设备》 iOS版微信字体适配解决方案探讨》《爱奇艺技术分享：爱奇艺客户端启动速度优化实践总结》>>更多类似文章...

（本文同步发表于：）

编辑：

炫佑科技专注互联网开发小程序开发-app开发-软件开发-网站制作等