小程序开发指南要点整理

【导读】

本文是对官方【小程序开发指南】的精简 + 解读，帮助你更好地理解小程序。理解小程序为什么出现，理解小程序的底层原理等等。

【注】

本文仅做笔记式记录，如有侵权，烦请告知。

第一部分：初识小程序

一、微信为什么要推出小程序

最初，在微信中展现 web 页面，是通过 webview。

web 调用原生的一些能力，通过微信团队未对外开放的 WeixinJSBridge。

后来，WeixinJSBridge 演变为对外开放的 JS-SDK。

JS-SDK 是对之前的 WeixinJSBrige 的一个包装，以及新能力的释放。

【存在痛点】

移动网页体验不良。

【方案 v1】

推出 JS-SDK 增强版（未对外开放）。

增加“微信 web 资源离线存储”功能。

【方案 v1 的问题】

（1）复杂页面依然会有白屏问题。如 CSS、JavaScript 较多，文件执行会占用大量 UI 线程，造成白屏。

（2）缓存方案处理较为繁杂，对开发者的要求较高。

【愿景】

设计一个比较好的系统，使得所有开发者在微信中都能获得比较好的体验。

包括：

（1）快速的加载

（2）更强大的能力（比如使用原生能力）

（3）原生的体验

（4）易用且安全的微信数据开放

（5）高效和简单的开发

【解决方案】

推出小程序。

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

四种主要区别：

UI 渲染和脚本执行是否使用同一线程、是否可进行 DOM 操作、运行环境、开发依赖

1、UI 渲染和脚本执行方式

网页：UI 渲染和脚本执行用同一个线程，脚本执行会阻塞 UI 渲染。

小程序：UI 渲染和逻辑执行使用不同的线程，脚本执行不会阻塞 UI 渲染。

2、DOM 操作

网页：可以使用 DOM、BOM API，执行 DOM、BOM 操作

小程序：逻辑层运行在 JSCore 中，并没有一个完整的浏览器对象，也就没有 DOM、BOM API，无法执行 DOM、BOM 操作。

【注】

JSCore 的环境不同于浏览器，也不同于 NodeJS。因此，除了无法使用 DOM、BOM API，一些 NPM 包在小程序中也无法运行。

3、运行环境

网页：各种浏览器、各式 webview

小程序：iOS、安卓、小程序开发者工具

4、开发依赖

网页：编辑器、浏览器

小程序：小程序帐号、开发者工具

---

第二部分：小程序代码组成

一、JSON 配置

JSON 文件在小程序代码中扮演静态配置的作用，在小程序运行之前就决定了小程序一些表现。

【注意】

小程序是无法在运行过程中去动态更新 JSON 配置文件从而发生对应的变化的。

二、WXML 模板

1、属性大小写敏感：class 和 Class 是不同的属性。

2、变量名大小写敏感：{{name}} 和 {{Name}} 是不同的变量。

3、wx: for = "array"：默认变量名 item，默认下标名 index。

4、wx:key 的两种形式：

wx: key = "uniqueKey" 或 wx:key = "*this"（代表 item 本身，要求 item 是唯一的 string / number）

5、模板：

可以在模板中定义代码片段，然后在不同的地方调用。使用 name 属性，作为模板的名字。然后在