微信小程序技术发展史

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

微信小程序技术发展史

小程序简介

小程序是连接用户和服务的新方式。 它们可以在微信内轻松获取和传播，并提供出色的用户体验。

小程序技术发展史

小程序并不是一个凭空出现的概念。 当微信逐渐成为移动Web的重要入口时，微信就有了相关的JS API。

代码清单1-1 使用预览图像

WeixinJSBridge.invoke('imagePreview', {
    current: 'http://inews.gtimg.com/newsapp_bt/0/1693121381/641',
    urls: [ // 所有图片的URL列表，数组格式
        'https://img1.gtimg.com/10/1048/104857/10485731_980x1200_0.jpg',
        'https://img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg',
        'https://img1.gtimg.com/10/1048/104857/10485729_980x1200_0.jpg'
    ]
}, function(res) {
    console.log(res.err_msg)
})

​代码1-1是调用微信原生组件浏览图片的JS API。 与引入额外的JS图片预览组件库相比，这种调用方式非常简单高效。

​事实上，微信官方从未向外界曝光过此类呼吁。 此类API*初是为腾讯内部的一些业务使用提供的。 许多外部开发发现后纷纷效仿并使用微信小程序开发图片，逐渐成为微信中网页的标准。 事实上的标准。 2015年初，微信发布了一整套网页开发工具包，名为JS-SDK，开放了拍照、录音、语音识别、二维码、地图、支付、分享、优惠券等数十个API。面向所有网页开发，让所有开发都可以利用微信原生的能力，完成以前不可能或者很难做到的事情。

同样的方法调用原生浏览图片，如代码表1-2所示。

代码1-2 使用JS-SDK调用图片预览组件

wx.previewImage({
  current: 'https://img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg',
  urls: [ // 所有图片的URL列表，数组格式
    'https://img1.gtimg.com/10/1048/104857/10485731_980x1200_0.jpg',
    'https://img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg',
    'https://img1.gtimg.com/10/1048/104857/10485729_980x1200_0.jpg'
  ],
  success: function(res) {
    console.log(res)
  }
})

​JS-SDK是对前一个的封装，并发布了新的能力。 它由向所有开发开放而非内部开放，并在短时间内获得了极大关注。 从数据监控的角度来看，微信内传播的移动网页大多使用相关接口。

​JS-SDK解决了移动端Web能力不足的问题。 通过暴露微信的接口，Web开发可以拥有更多的能力。 然而，除了更多的能力之外，JS-SDK模式并没有解决移动网页的使用问题。 体验不好的问题。 当用户访问网页时，在浏览器开始显示之前会有一个白屏过程。 在移动端，受限于设备性能和网络速度，白屏会更加明显。 我们团队投入了大量的技术精力来帮助平台上的网页开发解决这个问题。 因此微信小程序技术发展史，我们设计了增强版的JS-SDK，其中有一个重要的功能叫做“微信网页资源离线存储”。

以下文字引自内部文件（*终未向公众发布）：

微信网页资源离线存储是基于微信为网页开发提供的网页加速解决方案。

通过使用微信离线存储，网页开发可以利用微信提供的资源存储能力，直接从微信本地加载网页资源，无需从服务器拉取，从而减少网页加载时间，为微信用户提供更好的网页浏览体验。 经验。 每个公众号下的所有Web App总共*多可以缓存5M资源。

​这样的设计有点类似于HTML5 Cache，但是它在设计上避免了Cache的一些缺点。

​在内部测试中，我们发现离线存储可以解决一些问题，但是对于一些复杂的页面，比如加载大量CSS或者文件的页面，仍然会出现白屏问题。 除了白屏之外，影响Web体验的问题就是操作反馈缺失，主要体现在两个方面：页面切换的僵硬和点击的滞后。

微信面临的问题是如何设计一个更好的系统，让所有开发都能在微信中获得更好的体验。 这个问题是之前的JS-SDK无法处理的，需要一个全新的系统来解决。 它需要使所有开发能够执行以下操作：

- 快速加载

- 更强大的能力

- 本土经验

- 简单易用、安全的微信数据开放

- 高效、简单的开发

这就是小程序的由来。

小程序和普通Web开发的区别

小程序的主要开发语言是。 与普通的Web开发相比，小程序的开发非常相似。 对于前端开发来说，从Web开发迁移到小程序开发的开发并不高，但两者还是有一些区别的。

网页开发渲染线程和脚本线程是互斥的，这就是为什么长期脚本运行可能会导致页面无响应的原因。 在小程序中，两者是分开的，运行在不同的线程中。 Web开发可以使用各种浏览器公开的DOM API来选择和操作DOM。 前面说过，小程序的逻辑层和渲染层是分离的。 逻辑层运行在应用程序中，没有完整的浏览器对象，因此缺少相关的DOM API和BOM API。 这种差异导致一些前端开发非常熟悉的库，比如Zepto等，在小程序中无法运行。 同时环境也不同，所以有些npm包无法在小程序中运行。

​Web开发需要面对的环境是各种各样的浏览器。 在PC端需要面对IE、QQ浏览器等，在移动端需要面对各种浏览器，以及iOS和iOS系统。 在开发小程序我们需要面对iOS和微信客户端两大操作系统，以及辅助开发小程序开发工具。 小程序的三大运行环境也有所不同，如表1 -1所示。

表1-1小程序运行环境

运行环境 逻辑层 渲染层

iOS系统

安卓

V8

定制内核

小程序开发工具

西北地区

Web开发开发网页时，只需要使用浏览器并使用一些辅助工具或编辑器即可。 小程序的开发则不同。 需要经历申请小程序账号、安装小程序开发工具、配置项目等流程。

体验小程序

开发可以使用微信客户端（6.7.2及以上版本）扫描下方小程序码体验小程序。

查看小程序示例源码

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