小程序技术发展历史

本博主语录:任何一门技术都有它的由来,作为一名合格的小程序员,要做到知其然知其所以然!

熟悉技术发展史不仅可以帮助你更深入的理解微信技术的发展路线,还有助于你在脑海中构建自己的技术认知体系思维,培养出独特的理念视角,提高自己的专业水平。

 

从技术的维度看,小程序并非凭空冒出来的一个概念。当微信内嵌网页浏览器 WebView 逐渐成为移动 H5网站的一个重要入口时,微信就有相关的JAVASCRIPT通讯接口(也就是API了。

 

WeixinJSBridge 是最早的调用微信原生组件 JS API,诞生于2014年,实际上,微信官方是没有对外暴露过如此调用的,此类 API 最初是提供给腾讯内部一些业务使用,很多外部开发者发现了之后,依葫芦画瓢地使用了,逐渐成为微信中网页的事实标准。

2015年初,微信发布了一整套网页开发工具包,称之为 JS-SDK,开放了拍摄、录音、语音识别、二维码、地图、支付、分享、卡券等几十个API。给所有的 Web 开发者打开了一扇全新的窗户,让所有开发者都可以使用到微信的原生能力,去完成一些之前做不到或者难以做到的事情了。

 

JS-SDK是对之前的 WeixinJSBrige 的一个包装,以及新能力的释放,并且由对内开放转为了对所有开发者开放,在很短的时间内获得了极大的关注。从数据监控来看,绝大部分在微信内传播的移动网页都使用到了相关的接口。

 

JS-SDK 解决了移动网页能力不足的问题,通过暴露微信的接口使得 Web 开发者能够拥有更多的能力,然而在更多的能力之外,JS-SDK 的模式并没有解决使用移动网页遇到的体验不良的问题。

 

用户在访问网页的时候,在浏览器开始显示之前都会有一个的白屏过程,在移动端,受限于设备性能和网络速度,白屏会更加明显。我们团队把很多技术精力放置在如何帮助平台上的Web开发者解决这个问题。因此微信团队设计了一个 JS-SDK 的增强版本,其中有一个重要的功能,称之为“微信 Web 资源离线存储”。

 

微信 Web 资源离线存储是面向 Web 开发者提供的基于微信内的 Web 加速方案。

 

通过使用微信离线存储,Web 开发者可借助微信提供的资源存储能力,直接从微信本

 

地加载 Web 资源而不需要再从服务端拉取,从而减少网页加载时间,为微信用户提供更优质的网页浏览体验。每个公众号下所有 Web App 累计最多可缓存 5M 的资源。

 

可惜的是,微信 Web 资源离线存储技术并没有对外开放,最终是一个半成品被遗弃。

下面我带大家解析一下原因:

这个设计有点类似 HTML5 的应用缓存机制 Application Cache,但在设计上规避了一些 应用缓存的不足。

在内部测试中,微信团队发现离线存储 能够解决了一些问题,但是对于一些复杂的页面依然会有白屏的问题,例如页面加载了大量的 CSS 或者是 JavaScript 文件,这些文件的执行时间占用了大量的 UI 线程,这种时候,即使通过离线存储快速的加载资源,但是依旧会有页面的白屏现象,同时这样分文件的 Cache 在处理代码文件更新的时候操作较为繁杂,对开发者的要求较高。

除了白屏,影响 Web 体验的问题还有缺少操作的反馈,主要表现在两个方面:页面切换的生硬和点击的迟滞感。

对于一些有经验的 Web开发者而言,会使用一些 SPA 的框架,来模拟客户端原生的页面切换过渡。通常的方式是在一个 WebView 中去模拟多个页面,通过 CSS 处理,加之精细化的脚本代码做到点击反馈和页面切换,获得较好的体验。然而并不是所有的开发者都有足够的时间和精力来使得页面的体验变得出色。

微信面临的问题是如何设计一个比较好的系统,使得所有开发者在微信中都能获得比较好的体验。这个问题是之前的 JS-SDK 所处理不了的,需要一个全新的系统来完成,它需要使得所有的开发者都能做到:

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

 

  为了满足这5点,给微信用户带来极致的体验,规范管理第三方应用服务,小程序技术诞生了,顺应了产品发展的必然趋势,以后本教程也会围绕于此,手把手的教你从入门到实战,全面掌握微信开发技术。

 


 本节课为大家总结了小程序诞生的历史背景,下节课我将介绍:

微信小程序和H5网页(公共号内的微网站)之间有什么区别,请一定要认真坚持学习,

你也可以订阅并分享转发至微信朋友圈,支持我们!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值