一文带你了解小程序技术的发展脉络。

提到小程序,大家就会不自觉地带上(微信)两个字吧,但是对于小程序这一应用形态的探索却不是最先从微信开始的。
首先我们来问自己一个问题,小程序是啥?(可以先自己思考一下)
之前分享过一个图片小程序发展时间轴,我们可以知道业界对于这一技术领域的探索已经持续了7年了。
(微信)小程序的前身叫"应用号",我们可以知道它首先是个应用。
所以当你听到『小程序就是个H5嘛~』这种说法是有失偏颇的,h5是一种技术,遵循W3C的开放标准规范,可以运行在符合H5标准的容器内(外壳是浏览器),小程序则是有自己的封闭规范的,它是一个应用,运行的壳子是APP。

# 轻应用

在微信应用号之前,2013年的时候百度就基于H5技术推出了轻应用这种形态,轻应用如何理解?我们可以把它当做是加强版的H5,webview+JS API从而实现更多功能。这一形态的顶峰则是2015年1月9日微信公众平台面向开发者开放微信内网页开发工具包(微信JS-SDK)。

通过微信JS-SDK提供的11类接口集,开发者不仅能够在网页上使用微信本身的拍照、选图、语音、位置等基本能力,还可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力,为微信用户提供更优质的网页体验。

JS-SDK 解决了移动网页能力不足的问题,通过暴露微信的接口使得 Web 开发者能够拥有更多的能力,然而在更多的能力之外,JS-SDK 的模式并没有解决使用移动网页遇到的体验不良的问题,因为它的架构还是Browser/Server,所以依然还是会出现诸如白屏、卡顿等性能问题。

# 流应用

B/S 应用除了 JSON 数据外,还需要每次从服务器加载页面 DOM、样式、逻辑代码,导致 B/S 应用的页面加载很慢,体验很差。Hybrid 混合应用是 JS 编写的需要安装的 App,架构是Client/Server,页面加载时只需获取JSON数据,体验大大提升,但是仍然需要安装、更新。那么如何实现 Hybrid 应用的即时更新呢?

所以『流应用』的概念应运而生,把之前 Hybrid 应用里的运行于客户端的 JS 代码,先打包发布到服务器,制定流式加载协议,手机端引擎动态下载这些 JS 代码到本地,并且为了第一次加载速度更快,实现了应用的边下载边运行,让 JS 应用功能体验达到原生,并且可即点即用、可直达二级页面。

这套技术的核心是要把客户端引擎预预置在手机端,于是2015年 360 手机助手内嵌了客户端引擎实现了名为『360 微应用』的流式应用,做到了应用的秒开。

# 小程序

在2015年9月,DCloud 推进微信团队开展小程序业务,演示了流应用的秒开应用、扫码获取应用、分享链接获取应用等众多场景案例,以及分享了webview体验优化的经验。随后的2016年,微信团队经过分析,放弃了HTML5中国产业联盟的标准,订制了自己的标准、自研引擎。

  • 2016 年 1 月 11 日,微信公开课,张小龙罕见露面,公布了微信应用号的计划。
  • 2016 年 9 月 21 日,微信宣布更名应用号为小程序,面向首批开发者内测。
  • 2017 年 1 月 9 日,微信公开课,小程序正式发布。

随后各大厂商陆续推出了自己的小程序平台。

然而这不是最难的,小程序作为前端开发的一个细分领域出来了,但是开发者呢?开发工具、框架、组件、模板、以及各种轮子呢...
之前好不容易写的代码让我再用小程序的技术标准重写一遍?怎么保证我的投入产出?开发者们仿佛又回到了原始社会,一切都需要重来。

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

幸运的是小程序做到了,随着跳一跳引爆小程序,各大厂商跟进。越来越多的开发者加入到了小程序的技术生态中来,小程序的开发效率也在不断提高,成本也在不断降低,中小型创业公司往往会选择小程序测试自己的产品MVP,快速迭代自己的业务。

终于,国际标准之外,在中国,建立起了自己的技术生态,时至今日小程序已经拥有了数百万开发者,日活4亿,全网小程序数量超550万,已有 11 家企业入局小程序赛道,包括微信小程序、QQ 小程序、京东小程序、360 小程序、网易云小程序、美团小程序、字节跳动小程序、百度小程序、支付宝小程序、轻淘店、快应用,纷纷在小程序方面进行发力。

# 小程序的本质

看到这里,让我们回到最初的问题--小程序的本质是什么?
应该有不少同学心中已经有了答案了吧...没错,小程序本质上还是一个 Hybrid 应用(即混合模式应用)。

渲染界面的技术有三种:

  • 用纯客户端原生技术来渲染
  • 用纯 Web 技术来渲染
  • 介于客户端原生技术与 Web 技术之间的,互相结合各自特点的技术(统称 Hybrid 技术)来渲染

小程序的宿主是微信,所以不太可能用纯客户端原生技术来编写小程序 。如果这么做,那小程序代码需要与微信代码一起编包,跟随微信发版本,这种方式跟开发节奏必然都是不对的。因此,我们需要像Web 技术那样,有一份随时可更新的资源包放在云端,通过下载到本地,动态执行后即可渲染出界面。

但是,如果用纯 Web 技术来渲染小程序,在一些有复杂交互的页面上可能会面临一些性能问题,这是因为在 Web 技术中,UI渲染跟 JavaScript 的脚本执行都在一个单线程中执行,这就容易导致一些逻辑任务抢占UI渲染的资源。

最终,小程序选择了类似于微信 JSSDK 这样的 Hybrid 技术,界面主要由成熟的 Web 技术渲染,定义了一套内置组件以统一体验,并且提供一些基础和通用的能力,辅之以大量的接口提供丰富的客户端原生能力。同时,每个小程序页面都是用不同的WebView去渲染,这样可以提供更好的交互体验,更贴近原生体验,也避免了单个WebView的任务过于繁重。

开发者上传代码时,微信开发者工具直接将本地的代码文件提交到后台,由后台进行编译打包。在渲染层使用的各类组件,在逻辑层使用的各类API都是小程序基础库提供的,用户在使用小程序时会先载入基础库,接着会从CDN服务器下载小程序代码包再载入业务代码,最后完成小程序首页初始化。此后,如果小程序代码包未更新且还被保留在缓存中,则下载小程序代码包的步骤会被跳过。

这一套全新的系统使得所有的开发者都能做到:

  • 快速的加载
  • 更强大的能力
  • 原生的体验
  • 易用且安全的微信数据开放
  • 高效和简单的开发

至此相信你已经对小程序这一细分技术领域有了一个比较深入的认识了吧。

直击本质:聊聊小程序的前世今生相关推荐

  1. 聊聊小程序的登录逻辑

    聊聊小程序的登录逻辑 一直聊的都是客户运营方面的话题,毕竟斗金客户运营系统小程序产品是依靠技术实现的,今天来聊聊大家都能感知到的小程序登录问题吧,大家可能都碰到过很多小程序刚打开就要求授权获取信息之类 ...

  2. 小程序引用其他页面js_来聊聊小程序页面之间如何通信

    小程序页面之间如何通信? 首先将通信的模型列举出来, 分为以下几种 兄弟页面间通信 父路径页面向子路径页面通信 子路径页面向父路径页面通信 通信的方式 localStorage 本地存储 global ...

  3. 微信小程序的前世今生

    马化腾一直想做电商,不然马化腾怎会投了京东再投拼多多呢?更为重要的是,马化腾想做电商并不是随便想想,而是真的在行动. 比如腾讯推出的微信小程序,这对于开网店的人来说就非常不错,因为现在阿里系一是饱和, ...

  4. 【微信小程序】微信小程序入门与实战-个人笔记

    微信小程序入门与实战 文章目录 微信小程序入门与实战 1 初识微信小程序 1-1 2020版重录说明 1-2 下载小程序开发工具 1-3 新建小程序项目 1-4 小程序appid的注册 1-5 新版小 ...

  5. 让小程序在自有App中启动的技术来了:mPaaS小程序架构深度解析

    简介:mPaaS 小程序框架作为一款 App 通用框架,帮助开发者面向自身的 App 实现小程序投放.不止如此,小程序代码仅需撰写一次,便可多端投放至自有 App.支付宝.钉钉甚至其他小程序开放平台. ...

  6. mPaaS小程序技术架构深度解析

    ⚅ 点击观看<mPaaS 小程序新品发布会>回放 > > 随着小程序技术的愈发成熟,不同平台的优势和典型使用场景各有侧重,同时越来越多的开发者可以结合自身的业务特色,通过小程序 ...

  7. 小程序_小程序开发,小程序定制开发,小程序搭建,小程序系统开发

    说了那么久的小程序的应用场景,今天就跟大家聊些技术上的话题,聊聊小程序定制开发成本以及开发周期问题,希望能给一些对小程序感兴趣的商家们一些参考.一般的小程序7天左右就可以搞定,具体开发成本请接着往下看 ...

  8. 微信小程序周报(第十二期)-极乐小程序商店出品

    重要:极乐商店域名变更:wxapp.dreawer.com/变更为store.dreawer.com/ 每周一笑 对于各种凌乱的电脑问题,手机问题,其他行业的人,以为程序员们,什么都会,程序员中,女程 ...

  9. 基于微信小程序java音乐播放器毕业设计论文/程序代码

    摘  要 5G时代已经慢慢的融入了我们的日常生活,随着国家的通信政策以及各大运营商的宣传的影响,5G手机已经随处可见,面对全球信息.技术空前高速发展,信息高速化发展更是社会进步的一个标志.在全球信息化 ...

最新文章

  1. Android自动化测试框架
  2. LINUX下查看CPU、主板、硬盘、内存,网卡信息
  3. haskell,lisp,erlang你们更喜欢哪个?
  4. 【渝粤题库】国家开放大学2021春2717家畜解剖基础题目
  5. poj 1426 BFS
  6. 有毒!OPPO Reno证件照曝光:“铡刀式”前置摄像头抢眼
  7. bzoj3275 Number
  8. java day01【前言、入门程序、常量、变量】
  9. 使用Socket通信实现Silverlight客户端实时数据的获取(模拟GPS数据,地图实时位置)...
  10. 03.SpringBoot入门案例及详解
  11. mysql存储过程返回结果集_原来MySQL的存储过程也可以这么玩?
  12. 十五个Python经典案例,学会这些,Python基础已过关!
  13. 电脑无限循环cmd代码 Window系统下死循环
  14. linux备份压缩tgz,linux关于解压和压缩命令 zip rar tar.gz tgz
  15. 支付宝称:已支持微信转账,结果被骂惨了...
  16. 织梦联动添加三级分类后无法添加二级分类的解决方案
  17. Java 中的设计模式详细介绍
  18. android实现定位打卡,基于Android的移动定位课堂考勤系统设计与实现
  19. CSP-S 2022 总结
  20. 高中数学40分怎么办_高一数学40分有救吗?

热门文章

  1. 获取处于选中状态的checkbox的id值
  2. 牛客小白月赛58 B(暴力)C(思维)D(dp滚动数组优化)
  3. 智安新闻丨智安网络与“南滨路国家级文化数字产业中心”就等保云业务展开成功签署战略合作协议
  4. WIn10 1909 Windows Hello 指纹:出现错误,请稍后再试一次
  5. 互联网盈利模式研习笔记 1:流量变现
  6. 层次分析法(参考:清风)
  7. 如何验证office是否已永久激活。
  8. Python开发工具Spyder安装
  9. 海洋环境保护具体内容
  10. Win10打印机使用异常?windows系统如何删除更新补丁解决方案