微信小程序的开发与原理

小程序的诞生

小程序并非凭空冒出来的一个概念. 当微信中的 WebView 逐渐成为移动 Web 的一个重要入口时, 微信就有相关的 JS-SDK 了. JS-SDK 解决了移动网页能力不足的问题, 通过暴露微信的接口使得 Web 开发者能够拥有更多的能力, 然而在更多的能力之外, JS-SDK 的模式并没有解决使用移动网页遇到的体验不良的问题.

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

• 快速的加载

• 更强大的能力

• 原生的体验

• 易用且安全的微信数据开放

• 高效和简单的开发

这就是小程序的由来.

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

小程序的主要开发语言是 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 的微信客户端, 以及用于辅助开发的小程序开发者工具, 小程序中三大运行环境也是有所区别的.

小程序配置

小程序开发目录结构

|-- app.js
|-- app.json
|-- app.wxss
|-- project.config.json
|-- sitemap.json
|-- pages
|   |-- index
|   |   |-- index.wxml
|   |   |-- index.js
|   |   |-- index.json
|   |   |-- index.wxss
|   |-- logs
|   |   |-- logs.wxml
|   |   |-- logs.js
|-- utils

JSON 语法

这里说一下小程序里 JSON 配置的一些注意事项.

JSON 文件都是被包裹在一个大括号中 {}, 通过 key-value 的方式来表达数据. JSON 的 Key 必须包裹在一个双引号中, 在实践中, 编写 JSON 的时候, 忘了给 Key 值加双引号或者是把双引号写成单引号是常见错误.

JSON 的值只能是以下几种数据格式, 其他任何格式都会触发报错, 例如 JavaScript 中的 undefined.

• 数字, 包含浮点数和整数

• 字符串, 需要包裹在双引号中

• Bool值, true 或者 false

• 数组, 需要包裹在方括号中 []

• 对象, 需要包裹在大括号中 {}

• Null

还需要注意的是 JSON 文件中无法使用注释, 视图添加注释会引发报错.(JSON5可以)

app.json 配置

app.json 是当前小程序的全局配置, 包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等.

举个栗子

{
    "pages": [
        "pages/index/index",
        "pages/logs/logs"
    ],
    "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "WeChat",
        "navigationBarTextStyle": "black"
    }
}

我们简单说一下这个配置各个项的含义:

• pages 字段 -- 用于描述当前小程序所有页面路径, 这是为了让微信客户端知道当前你的小程序页面定义在哪个目录.

• window 字段 -- 定义小程序所有页面的顶部背景颜色, 文字颜色定义等.

页面配置

每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置, 页面中配置项会覆盖 app.json 的 window 中相同的配置项.

举个栗子

{
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "微信接口功能演示",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light"
}

小程序的运行时

渲染层和逻辑层

首先, 我们来简单了解下小程序的运行环境. 小程序的运行环境分成渲染层和逻辑层, 其中 WXML 模板和 WXSS 样式工作在渲染层, JS 脚本工作在逻辑层.

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

...先放一放