微信小程序系列0——微信小程序原理

前言

工欲善其事，必先利其器。

首先，我们需要知道微信小程序是什么？微信小程序内核是什么？微信小程序的开发语言什么？这样才能更好的开发微信小程序，以及解决遇到的问题。

一、微信小程序是什么

微信小程序是一个依托于微信，微信提供一个接口运行浏览器内核上的一个程序。

微信小程序是一个小程序可以有很多页面，每个页面承载不同的功能，页面之间可以互相跳转。小程序分为渲染层和逻辑层，渲染层中包含了多个 WebView，每个 WebView 对应到我们的小程序里就是一个页面 Page，每一个页面都独立运行在一个页面层级上。它也可以做得很丰富，就像native app一样，可以调用原生的各种接口，像网络状态、罗盘，重力，拨打电话等

二、微信小程序内核是什么

微信小程序的编译内核环境根据不同平台而不同。

在 iOS 上，小程序的 javascript 代码是运行在 JavaScriptCore 中
在 Android 上，小程序的 javascript 代码是通过 X5 内核来解析
在开发工具上，小程序的 javascript 代码是运行在 nwjs（chrome内核）中

JavaScriptCore

JavaScriptCores是开源的，下载地址:https://github.com/phoboslab/JavaScriptCore-iOS

OS X Mavericks 和 iOS 7 引入了 JavaScriptCore 库，它把 WebKit 的 JavaScript 引擎用 Objective-C 封装，提供了简单，快速以及安全的方式接入世界上最流行的语言。不管你爱它还是恨它，JavaScript 的普遍存在使得程序员、工具以及融合到 OS X 和 iOS 里这样超快的虚拟机中资源的使用都大幅增长。(参考iOS官方文档：https://developer.apple.com/documentation/javascriptcore?language=objc)

X5 内核

唯一一个属于国人开发，大鹅厂自己的浏览器解析内核

nwjs

原名：node-webkit 当然也是开源的:https://github.com/nwjs/nw.js/

nw.js 是基于 Chromium和 Node.js运行的，以前也叫nodeWebkit。这就给了你使用HTML和JavaScript来制作桌面应用的可能。在应用里你可以直接调用Node.js的各种api以及现有的第三方包。因为Chromium和 Node.js的跨平台，那么你的应用也是可以跨平台的。现在已经有很多知名的应用是基于NW.js实现，

三、微信小程序的开发语言是什么

1.微信小程序的开发

微信小程序使用了前端技术栈 JavaScript/WXML/WXSS

JavaScript: 微信小程序的 JavaScript 运行环境即不是 Browser 也不是 Node.js。它运行在微信 App 的上下文中，不能操作 Browser context 下的 DOM，也不能通过 Node.js 相关接口访问操作系统 API。所以，严格意义来讲，微信小程序并不是 Html5，虽然开发过程和用到的技术栈和 Html5 是相通的。
WXML: 作为微信小程序的展示层，并不是使用 Html，而是自己发明的基于 XML 语法的描述。
WXSS: 用来修饰展示层的样式。官方的描述是 “ WXSS (WeiXin Style Sheets) 是一套样式语言，用于描述 WXML 的组件样式。WXSS 用来决定 WXML 的组件应该怎么显示。” “我们的 WXSS 具有 CSS 大部分特性...我们对 CSS 进行了扩充以及修改。”基于 CSS2 还是 CSS3？大部分是哪些部分？是否支持 CSS3 里的动画？不得而知。

四、微信小程序

1.小程序与普通网页开发的区别

小程序的主要开发语言是 JavaScript ，所以通常小程序的开发会被用来同普通的网页开发来做对比。两者有很大的相似性，对于前端开发者而言，从网页开发迁移到小程序的开发成本并不高，但是二者还是有些许区别的。

网页开发渲染线程和脚本线程是互斥的，这也是为什么长时间的脚本运行可能会导致页面失去响应，而在小程序中，二者是分开的，分别运行在不同的线程中。网页开发者可以使用到各种浏览器暴露出来的 DOM API，进行 DOM 选中和操作。而如上文所述，小程序的逻辑层和渲染层是分开的，逻辑层运行在 JSCore 中，并没有一个完整浏览器对象，因而缺少相关的DOM API和BOM API。这一区别导致了前端开发非常熟悉的一些库，例如 jQuery、 Zepto 等，在小程序中是无法运行的。同时 JSCore 的环境同 NodeJS 环境也是不尽相同，所以一些 NPM 的包在小程序中也是无法运行的

网页开发者需要面对的环境是各式各样的浏览器，PC 端需要面对 IE、Chrome、QQ浏览器等，在移动端需要面对Safari、Chrome以及 iOS、Android 系统中的各式 WebView 。而小程序开发过程中需要面对的是两大操作系统 iOS 和 Android 的微信客户端，以及用于辅助开发的小程序开发者工具，小程序中三大运行环境也是有所区别的.如表1-1所示。

表1-1 小程序的运行环境

运行环境	逻辑层	渲染层
iOS	JavaScriptCore	WKWebView
安卓	X5 JSCore	X5浏览器
小程序开发者工具	NWJS	Chrome WebView

2.WebView

WebView的运行流程和一些弊端。

流程：
打开一个 WebView 通常会经历以下几个阶段：

交互无反馈
到达新的页面，页面白屏
页面基本框架出现，但是没有数据；页面处于 loading 状态
出现所需的数据

WebView 启动过程大概分为以下几个阶段：

WebView启动过程

存在的问题：
在加载WebView页面时，时常出现白屏现象：

加载WebView出现白屏

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

3.微信小程序

1）通信模型

小程序的渲染层和逻辑层分别由2个线程管理：渲染层的界面使用了WebView 进行渲染；逻辑层采用JsCore线程运行JS脚本。一个小程序存在多个界面，所以渲染层存在多个WebView线程，这两个线程的通信会经由微信客户端（下文中也会采用Native来代指微信客户端）做中转，逻辑层发送网络请求也经由Native转发,小程序的通信模型如下图所示。

渲染过程

这就是小程序双线程模型的由来：

逻辑层：创建一个单独的线程去执行 JavaScript，在这个环境下执行的都是有关小程序业务逻辑的代码
渲染层：界面渲染相关的任务全都在 WebView 线程里执行，通过逻辑层代码去控制渲染哪些界面。一个小程序存在多个界面，所以渲染层存在多个 WebView 线程.

2）双线程下的界面渲染

小程序的逻辑层和渲染层是分开的两个线程。在渲染层，宿主环境会把WXML转化成对应的JS对象，在逻辑层发生数据变更的时候，我们需要通过宿主环境提供的setData方法把数据从逻辑层传递到渲染层，再经过对比前后差异，把差异应用在原来的Dom树上，渲染出正确的UI界面，如下图所示。

界面渲染

小程序的渲染的整体流程：

1.在渲染层把 WXML 转化成对应的 JS 对象。
2.在逻辑层发生数据变更的时候，通过宿主环境提供的 setData 方法把数据从逻辑层传递到 Native，再转发到渲染层。
3.经过对比前后差异，把差异应用在原来的 DOM 树上，更新界面。

总之，小程序通过双线程的方式解决WebView存在的各种问题，让小程序更加想Native的体验。

参考:《小程序开发指南》