初识微信小程序

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

本期介绍

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

• 什么是微信小程序
• 微信小程序与传统的H5有什么区别？
• 微信小程序为什么会越来越受欢迎/优点是什么？

什么是微信小程序

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

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

运行环境方面

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

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

运行机制方面

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

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

系统权限

开发语言

开发成本

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

更新机制

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 () {
  // 新版本下载失败
})

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

• 渲染机制

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

小程序的渲染层和逻辑层分别由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工作者们💻