初识微信小程序

本文作者为 360 奇舞团前端开发工程师

本期介绍

小程序的开发现在已经越来越火了，目前微信、支付宝、QQ等都已经推出了各自的小程序框架/解决方案，那么也就意味着拥有小程序开发的工程师也越来越受欢迎。而微信小程序凭借微信巨大的用户群和社交红利，微信小程序相对其他家在技术和生态建设上都处于绝对领先阶段。但是作为一个小程序侧的“小白”；或者说并没有详细了解过微信小程序的开发人员，想必大家会关注以下几个问题：

• 什么是微信小程序

• 微信小程序与传统的H5有什么区别？

• 微信小程序为什么会越来越受欢迎/优点是什么？

什么是微信小程序

小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。

微信小程序与传统的h5有什么区别

运行环境方面

web端需要面对的环境是各式各样的浏览器，PC端需要面对 IE、Chrome、QQ浏览器等，在 移动端需要面对     Safari、Chrome以及 iOS、Android 系统中的各式 WebView 。小程序：运行于特定的软件平台（wx、支付宝、qq）。拿微信举例，小程序开发过程中需要面对的是两大操作系统 iOS和       Android的客户端，以及还会有用于辅助开发的小程序开发者工具，小程序中三大运行环境也是有所区别的：

运行环境	逻辑层	渲染层
iOS	JavaScriptCore	WKWebView
安卓	V8	chromium定制内核
小程序开发者工具	NWJS	Chrome WebView

将以上三个环境都兼顾到了，基本就👌 微信小程序是基于浏览器内核重构的内置解析器，它并不是一个完整的浏览器，因而缺少相关的DOM API和BOM API。这一区别导致了前端开发非常熟悉的一些库，例如 jQuery等，在小程序中是无法运行的。同时 JSCore 的环境同 NodeJS 环境也是不尽相同，所以一些 NPM 的包在小程序中也是无法运行的。

运行机制方面

H5 的运行就是一个网页的运行，这里不过多叙述。小程序：小程序从启动到最终被销毁，会经历很多不同的状态，小程序在不同状态下会有不同的表现。从用户认知的角度看，广义的小程序启动可以分为两种情况，一种是冷启动，一种是热启动。

名词	解释
热启动	如果用户已经打开过某小程序，在一定时间内再次打开该小程序，此时无需重新启动，只需将后台的小程序切换到前台即可，整个过程就是所谓的热启动。
冷启动	如果用户首次打开或小程序被微信主动销毁后再次打开的情况，此时小程序需要重新加载启动，就是冷启动。
销毁	当小程序进入后台一定时间，或系统资源占用过高，或者是你手动销毁，才算真正的销毁。

（从小程序生命周期的角度来看，我们一般讲的「启动」专指冷启动，热启动一般被称为后台切前台。）

系统权限

名词	解释
h5	网络通信状态、数据缓存能力、通讯录、或调用硬件的，如蓝牙功能等等一些APP有的功能，H5就没有这些系统权限，因为它重度依赖浏览器能力。
小程序	微信客户端的这些系统级权限都可以和微信小程序无缝衔接，官方宣称拥有 Native App 的流畅性能。

开发语言

名词	解释
h5	标准的 HTML、CSS、JavaScript， 前端三剑客🔪
小程序	不同平台的小程序有不同语言。最常用的微信小程序，自定义的 WXML、WXSS，WXML 中全部是微信自定义   的标签，WXSS、JSON 和 JS 文件中的写法都稍有限制，官方文档中都有明确的使用介绍，虽容易上手，但还是有区别的。

开发成本

名词	解释
h5	首先开发工具 ( vscode/webstorm... )，其次是开发框架 ( Vue/React...),模块化工具、UI库、各种   包的选择，还要考虑兼容问题，成本还是比较高的。
小程序	不用再去考虑浏览器兼容性，拿微信小程序举例子，只需要看着文档开发就可以，小程序独立出来了很多原生APP的组件，H5需要模拟才能实现的功能，小程序里可以直接调用组件，都是封装好的。

• 不过小程序再简单也是需要学习成本在里面的，遇到的问题当然也不少。比如我前两天在小程序中写了个表单，用的<ul> <li>标签，在开发web的时候这套标签组合使用率还是蛮高的，结果却发现微信小程序里是没有<ul> <li>标签的。虽然在开发的过程中并没有发现什么异常，但是去文档里面搜了一下，确实是没有的。在开微信小程序前，还是有必要去研究下文档的😂

更新机制

名词	解释
h5	基本上可以做到实时的更新，把代码推到正确的环境上部署完成后，刷新当前的页面，不出意外的话应该就可以刷   新到最新版本了。
小程序	1.更新机制较h5来说较难控制。每次更新需要提交最新版本进行审核，只有审核通过才可以发布成功。而且开   发者在发布新版本之后，无法立刻影响到所有现网用户，要在发布之后 24 小时之内才下发新版本信息到用户小   程序。每次冷启动时，都会检查有无更新版本，如果发现有新版本，会异步下载新版本代码包，并同时用客户端本地包   进行启动，所以新版本的小程序需要等 下一次冷启动 才会应用上。2.需要开发者手动出发更新，在启动时异步更新的情况下，如果开发者希望立刻进行版本更新，可以使用 wx.getUpdateManager API 进行处理。在有新版本时提示用户重启小程序更新新版本。

const updateManager = wx.getUpdateManager()

updateManager.onCheckForUpdate(function (res) {
  // 请求完新版本信息的回调
  console.log(res.hasUpdate)
})

updateManager.onUpdateReady(function () {
  wx.showModal({
    title: '更新提示',
    content: '新版本已经准备好，是否重启应用？',
    success(res) {
      if (res.confirm) {
        // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
        updateManager.applyUpdate()
      }
    }
  })
})

updateManager.onUpdateFailed(function () {
  // 新版本下载失败
})

如果更新失败或超时，为了保障小程序的可用性，还是会使用本地版本打开。

• 渲染机制

名词	解释
h5	web渲染，浏览器渲染。
小程序	宿主环境是微信，宿主环境为了执行小程序的各种文件：wxml文件、wxss文件、js文件，提供了双线模型

那么什么是双线程模型呢？先看一张官方图：

小程序的渲染层和逻辑层分别由2个线程管理

渲染层：界面渲染相关的任务全都在 WebView 线程里执行，一个小程序存在多个界面，所以渲染层存在多个 WebView线程逻辑层：一个单独的线程执行 JavaScript，在这个环境下执行的都是有关小程序业务逻辑的代码，就是通过图中的 JsCore 线程来运行 JS 脚本 这两个线程都会经过微信客户端( Native )中的 WeixinJsBridage 进行中转通信，逻辑层把数据变化通知到视图层，触发视图层页面更新，视图层把触发的事件通知到逻辑层进行业务处理。

• 小程序的渲染逻辑

在渲染层将WXML先转换为 js 对象也就是虚拟 DOM在逻辑层将虚拟 DOM 对象生成真实DOM树，交给渲染层渲染 当视图有数据需更新时，逻辑层调用小程序宿主环境提供的 setData 方法将数据从逻辑层传递到渲染层。经过对比前后差异，把差异应用在真实的 Dom 树上，渲染出正确的 UI 界面完成视图更新。

虽然小程序是通过 Native 原生渲染的，但是小程序也支持web渲染，就是 web-view 组件，在 web-view 中加载 H5 页面，而我们开发小程序时，通常会使用 hybrid 的方式(混合模式移动应用)。，根据具体情况选择部分功能用小程序原生的代码来开发，部分功能通过 web-view 加载 H5 页面来实现，Native 与 Web 渲染 混合使用，实现项目最优解。

微信小程序为什么会越来越受欢迎/优点是什么？

• 不占内存,随用随走。 小程序不需要存储空间,不用下载、注册等一系列繁琐的操作,用户使用简介方便,随用随走。

• 成本低、利润大。 相对于APP，小程序的开发成本更低,小程序还可以结合线上线下的营销活动,争取更大的利润。

• 宣传应用范围广。 不管是餐饮、旅游、教培、电商,还是政务,几乎每个领域都可以通过小程序实现自己的业务。而且小程序、社群、直播,等多种方式都可以进行宣传,相对于传统的实体门店宣传范围更广泛。

• 日活量丰富,用户基数大。 那微信小程序来说，小程序是基于微信的,微信的十亿日活量,带给小程序巨大的流量池,用转化更容易。

一些兼容性问题 && 好用的代码库

• IOS 的 Date 构造函数 不支持2018-04-26这种格式的日期，必须转换为2018/04/26这种格式，可以通过相应的方式进行处理

• mp-html 小程序富文本组件

本期分享的受众人群

• 小程序新手、想从事小程序开发工作的开发者

• 想了解小程序的互联网从业人员

• 对小程序感兴趣的it工作者们💻

- END -

关于奇舞团

奇舞团是 360 集团最大的大前端团队，代表集团参与 W3C 和 ECMA 会员（TC39）工作。奇舞团非常重视人才培养，有工程师、讲师、翻译官、业务接口人、团队 Leader 等多种发展方向供员工选择，并辅以提供相应的技术力、专业力、通用力、领导力等培训课程。奇舞团以开放和求贤的心态欢迎各种优秀人才关注和加入奇舞团。