一、小程序介绍与开发环境：

1、helloworld代码 【1】请前往https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html 微信开发者工具下载页面根据自己的操作系统下载对应的安装包进行安装。 【2】打开微信开发者工具，选择新建小程序项目，我们先不需理解AppID的概念，新建项目时选择无AppID，并取消勾选“建立普通快速启动模板”的选项。

2、小程序介绍 【1】小程序技术发展历史 【2】小程序与普通网页开发的区别

3、小程序的特色 小程序的模式使得微信可以开放更多的数据，开发者可以获取到用户的一些基本信息，甚至能够获取微信群的一些信息，使得小程序的开放能力变得更加强大。

4、小程序的开发准备 【1】申请AppID： mp.weixin.qq.com/  【2】 安装开发者工具 【3】 编写代码

5、总结 简单介绍了小程序是什么，小程序的技术发展历史以及开发小程序之前需要做的准备工作。

二、小程序代码组成：

1、JSON配置 【1】 打开例子，查看代码 【2】 json语法 【3】 json数据格式：数字，字符串，布尔，数组，对象，Null 注意：JSON 文件中无法使用注释，试图添加注释将会引发报错。

2、WXML模板 【1】 简介 WXML 文件后缀名是 .wxml ，打开 pages/wxml/index.wxml 文件，有过 HTML 的开发经验的读者应该会很熟悉这种代码的书写方式，简单的 WXML语句在语法上同 HTML 非常相似。 【2】 数据绑定 数据绑定正确的写法

【3】逻辑语法 { name: 'world' }

【4】条件逻辑 if单个分支

if多个分支

【5】列表渲染 array是一个数组

【6】模板

【7】引用 WXML 提供两种文件引用方式import和include。 《1》import 可以在该文件中使用目标文件定义的 template。需要注意的是 import 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件中 import 的 template，简言之就是 import 不具有递归的特性。 《2》include 可以将目标文件中除了template外的整个代码引入，相当于是拷贝到 include位置。 【8】共同属性 id：组件的唯一标识 class：组件的样式类 style：组件的内联样式 hidden：组件是否显示 data-：自定义属性 bind/catch*：组件的事件

3、WXSS样式 【1】简介 WXSS（WeiXin Style Sheets）是一套用于小程序的样式语言，用于描述WXML的组件样式，也就是视觉上的效果。 【2】文件组成 other.wxss(其它样式)：其它样式可以被项目公共样式和页面样式引用 index.wxss(页面样式)：与app.json注册过的页面同名且位置同级的WXSS文件 app.wxss(项目公共样式)：根目录中的app.wxss为项目公共样式，它会被注入到小程序的每个页面 【3】尺寸单位 rpx：responsive pixel(尺寸单位) 公式是： iPhone 5：1rpx = 320 / 750 px = 0.42px iPhone 6：1rpx = 375 / 750 px = 0.5px iPhone 6 Plus：1rpx = 414 / 750 px = 0.552px 【4】WXSS引用 @import './test_0.wxss' 这种方法在请求上不会把test_0.css合并到index.css中，也就是请求index.css的时候，会多一个test_0.css的请求。WXSS最终会被编译打包到目标文件中，用户只需要下载一次，在使用过程中不会因为样式的引用而产生多余的文件请求。 【5】内联样式 <!—静态内联样式-->

<!—动态内联样式--> { eleColor: 'red', eleFontsize: '48rpx' }

【6】选择器 权重越高越优先。在优先级相同的情况下，后设置的样式优先级高于先设置的样式。 id选择器：#id 类选择器：.class 元素选择器：element 伪元素选择器：::after 伪元素选择器：::before 【7】官方样式库 为了减轻开发者样式开发的工作量，我们提供了WeUI.wxss基础样式库。WeUI是一套与微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。包含button、cell、dialog、progress、toast、article、actionsheet、icon等各式原生。

4、Javascript脚本 【1】 ECMAScript介绍： ECMAScript是一种由Ecma国际通过ECMA-262标准化的脚本程序设计语言， JavaScript 是 ECMAScript 的一种实现。  ECMAScript语言的重要组成部分：语法、类型、语句、关键字、操作符、对象 浏览器中JavaScript 构成：ECMAScript、BOM(浏览器对象模型)、DOM(文档对象模型) NodeJS中JavaScript 构成：ECMAScript、NPM(包管理系统)、Native(模块) 小程序中JavaScript 构成：ECMAScript、小程序框架、小程序API 【2】 小程序的执行环境： 《1》iOS平台，包括iOS9、iOS10、iOS11 《2》Android平台 《3》小程序IDE 【3】 模块化： 浏览器中，所有 JavaScript 是在运行在同一个作用域下的，定义的参数或者方法可以被后续加载的脚本访问或者改写。同浏览器不同，小程序中可以将任何一个JavaScript 文件作为一个模块，通过module.exports 或者 exports 对外暴露接口。 【4】 脚本执行的顺序： 浏览器中，脚本严格按照加载的顺序执行。而在小程序中的脚本执行顺序有所不同。小程序的执行的入口文件是 app.js 。并且会根据其中 require 的模块顺序决定文件的运行顺序， 【5】 作用域： 同浏览器中运行的脚本文件有所不同，小程序的脚本的作用域同 NodeJS 更为相似。在文件中声明的变量和函数只在该文件中有效，不同的文件中可以声明相同名字的变量和函数，不会互相影响。

5、总结 介绍了小程序里的代码文件构成，以及他们所扮演的角色。

三、理解小程序宿主环境：

1、简介 小程序可以调用宿主环境提供的微信客户端的能力，这就使得小程序比普通网页拥有更多的能力。你也会了解到，你的小程序会运行在不同版本的宿主环境下，因此针对各个版本的宿主环境做程序上的兼容也是在所难免的。

2、渲染层和逻辑层 《1》渲染层 渲染层和数据相关。 逻辑层负责产生、处理数据。 逻辑层通过 Page 实例的 setData 方法传递数据到渲染层。

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

4、数据驱动 在开发UI界面过程中，程序需要维护很多变量状态，同时要操作对应的UI元素。随着界面越来越复杂，我们需要维护很多变量状态，同时要处理很多界面上的交互事件，整个程序变得越来越复杂。通常界面视图和变量状态是相关联的，如果有某种“方法”可以让状态和视图绑定在一起（状态变更时，视图也能自动变更），那我们就可以省去手动修改视图的工作。

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

6、程序和页面 【1】程序：“小程序”指的是产品层面的程序，而“程序”指的是代码层面的程序实例 《1》程序构造器App() 宿主环境提供了 App() 构造器用来注册一个程序App，需要留意的是App() 构造器必须写在项目根目录的app.js里，App实例是单例对象，在其他JS脚本中可以使用宿主环境提供的 getApp() 来获取程序实例。 App实例的生命周期函数：onLaunch / onShow / onHide / onError 《2》程序的生命周期和打开场景 初次进入小程序的时候，微信客户端初始化好宿主环境，同时从网络下载或者从本地缓存中拿到小程序的代码包，把它注入到宿主环境，初始化完毕后，微信客户端就会给App实例派发onLaunch事件，App构造器参数所定义的onLaunch方法会被调用。 《3》小程序全局数据 在上文中说道App实例是单例的，因此不同页面直接可以通过App实例下的属性来共享数据。App构造器可以传递其他参数作为全局属性以达到全局共享数据的目的。

【2】页面：一个小程序可以有很多页面，每个页面承载不同的功能，页面之间可以互相跳转。 《1》文件构成和路径 一个页面是分三部分组成：界面、配置和逻辑。界面由WXML文件和WXSS文件来负责描述，配置由JSON文件进行描述，页面逻辑则是由JS脚本文件负责。 《2》页面构造器Page() 宿主环境提供了 Page() 构造器用来注册一个小程序页面，Page()在页面脚本page.js中调用。 Page实例的生命周期函数：onLoad / onReady / onShow / onHide /onUnload 页面的用户行为函数：onPullDownRefresh / onReachBottom / onShareAppMessage / onPageScroll 《3》页面的生命周期和打开参数 页面初次加载的时候，微信客户端就会给Page实例派发onLoad事件，页面显示之后，Page构造器参数所定义的onShow方法会被调用, 在页面初次渲染完成时，Page构造器参数所定义的onReady方法会被调用。 《4》页面的数据 小程序的页面结构由WXML进行描述，WXML可以通过数据绑定的语法绑定从逻辑层传递过来的数据字段，这里所说的数据其实就是来自于页面Page构造器的data字段，data参数是页面第一次渲染时从逻辑层传递到渲染层的数据。 《5》页面的用户行为 下拉刷新 onPullDownRefresh 上拉触底 onReachBottom 页面滚动 onPageScroll 用户转发 onShareAppMessage 《6》页面跳转和路由 一个小程序拥有多个页面，我们可以通过wx.navigateTo推入一个新的页面。 打开新页面 调用：API wx.navigateTo 页面重定向 调用：API wx.redirectTo 页面返回 调用：API wx.navigateBack Tab：切换 调用 API wx.switchTab 重启动：调用 API wx.reLaunch

7、组件 一个小程序页面可以分解成多个部分组成，组件就是小程序页面的基本组成单元。为了让开发者可以快速进行开发，小程序的宿主环境提供了一系列基础组件。组件是在WXML模板文件声明中使用的，WXML的语法和HTML语法相似，小程序使用标签名来引用一个组件，通常包含开始标签和结束标签，该标签的属性用来描述该组件。

8、API 宿主环境提供了丰富的API，可以很方便调起微信提供的能力。 一般调用的约定：

wx.on* 开头的 API 是监听某个事件发生的API接口，接受一个 Callback 函数作为参数。当该事件触发时，会调用 Callback 函数。 如未特殊约定，多数 API 接口为异步接口 ，都接受一个Object作为参数。 API的Object参数一般由success、fail、complete三个回调来接收接口调用结果，示例代码如代码清单3-17所示，详细说明如表3-9所示。 wx.get* 开头的API是获取宿主环境数据的接口。 wx.set* 开头的API是写入数据到宿主环境的接口。 【6】事件 《1》事件简介 在小程序里边，我们把这种“用户在渲染层的行为反馈”以及“组件的部分状态反馈”抽象为渲染层传递给逻辑层的“事件”。

《2》事件类型和事件对象

《3》事件绑定与冒泡捕获 事件绑定的写法和组件属性一致，以key="value"的形式：

key以bind或者catch开头，然后跟上事件的类型，如bindtap、catchtouchstart。 bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。

9、兼容 小程序的宿主环境一直在迭代更新，提供更多的能力给开发者去完成更多的事情，所以你的小程序会运行在不同版本的宿主环境下。为了让你的小程序在不同环境下都能提供相应的服务，我们需要来了解一下在小程序中如何实现兼容办法。

10、总结 介绍了小程序宿主环境的基本运行机制以及它所提供的各种能力，组合这些能力可以完成一个体验非常流畅的小程序，同时读者也了解到如何对小程序在不同环境下兼容的办法，以便给不同环境下的的微信用户提供可靠或者降级的服务。

四、场景应用：

1、开发流程基本介绍 在启动开发前，首先我们对整个小程序整体的产品体验有一个清晰的规划和定义，一般会通过交互图或者手稿描绘小程序的界面交互和界面之间的跳转关系。

2、基本的布局方法-Flex布局 【1】简介 如果你的小程序要求兼容到iOS8以下版本，需要开启样式自动补全。开启样式自动补全，在“项目”—“项目设置”—勾选“上传代码时样式自动补全”。 【2】基本概念 flex的概念最早是在2009年被提出，目的是提供一种更灵活的布局模型，使容器能通过改变里面项目的高宽、顺序，来对可用空间实现最佳的填充，方便适配不同大小的内容区域。 【3】容器属性 display属性: flex; flex-direction属性: row（默认值） | row-reverse | column |column-reverse flex-wrap:nowrap（默认值） | wrap | wrap-reverse justify-content属性: flex-start（默认值） | flex-end | center |space-between | space-around | space-evenly align-items属性: stretch（默认值） | center | flex-end | baseline | flex-start align-content属性: stretch（默认值） | flex-start | center |flex-end | space-between | space-around | space-evenly 【4】项目属性 order属性: 0（默认值） | flex-shrink属性: 1（默认值） | flex-grow属性: 0（默认值） | flex-basis属性: auto（默认值） | flex属性: none | auto | @flex-grow @flex-shrink @flex-basis align-self属性: auto（默认值） | flex-start | flex-end |center | baseline| stretch

3、界面的常见交互反馈 【1】触摸反馈 通常页面会摆放一些button按钮或者view区域，用户触摸按钮之后会触发下一步的操作。 【2】Toast和模态对话框 在完成某个操作成功之后，我们希望告诉用户这次操作成功并且不打断用户接下来的操作。弹出式提示Toast就是用在这样的场景上，Toast提示默认1.5秒后自动消失。 【3】界面滚动 往往手机屏幕是承载不了所有信息的，所以内容区域肯定会超出屏幕区域，用户可以通过滑动屏幕来查看下一屏的内容，这是非常常见的界面滚动的交互。

4、发起HTTPS网络通信 【1】简介 小程序经常需要往服务器传递数据或者从服务器拉取信息，这个时候可以使用wx.request这个API，在这一节我们会重点讨论wx.request的使用和注意事项。 【2】wx.request接口 url：开发者服务器接口地址 data：请求的参数 header：设置请求的 header，header 中不能设置 Referer，默认header['content-type'] = 'application/json' method：（需大写）有效值：OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT dataType：回包的内容格式，如果设为json，会尝试对返回的数据做一次 JSON解析 success：收到开发者服务成功返回的回调函数，其参数是一个Object fail：接口调用失败的回调函数 complete：接口调用结束的回调函数（调用成功、失败都会执行） 【3】服务器接口 url参数是当前发起请求的服务器接口地址，小程序宿主环境要求request发起的网络请求必须是https协议请求，因此开发者服务器必须提供HTTPS服务的接口，同时为了保证小程序不乱用任意域名的服务，wx.request请求的域名需要在小程序管理平台进行配置[2]，如果小程序正式版使用wx.request请求未配置的域名，在控制台会有相应的报错。 【4】请求参数 通过wx.request这个API，有两种方法把数据传递到服务器：通过url上的参数以及通过data参数。举个例子：我们需要向服务器拿id为1的用户的信息，同时我们把当前小程序的版本带给服务器，让服务器可以做新旧版逻辑兼容。 【5】收到回包 通过wx.request发送请求后，服务器处理请求并返回HTTP包，小程序端收到回包后会触发success回调，同时回调会带上一个Object信息。 【6】一般使用技巧 《1》设置超时时间 小程序发出一个HTTPS网络请求，有时网络存在一些异常或者服务器存在问题，在经过一段时间后仍然没有收到网络回包，我们把这一段等待的最长时间称为请求超时时间。小程序request默认超时时间是60秒，一般来说，我们不需要这么长的一个等待时间才收到回包，可能在等待3秒后还没收到回包就需要给用户一个明确的服务不可用的提示。 《2》请求前后的状态处理 大部分场景可能是这样的，用户点击一个按钮，界面出现“加载中...”的Loading界面，然后发送一个请求到后台，后台返回成功直接进入下一个业务逻辑处理，后台返回失败或者网络异常等情况则显示一个“系统错误”的Toast，同时一开始的Loading界面会消失。 【7】排查异常的方法 《1》检查手机网络状态以及wifi连接点是否工作正常。 《2》检查小程序是否为开发版或者体验版，因为开发版和体验版的小程序不会校验域名。 《3》检查对应请求的HTTPS证书是否有效，同时TLS的版本必须支持1.2及以上版本，可以在开发者工具的console面板输入showRequestInfo()查看相关信息。 《4》域名不要使用IP地址或者localhost，并且不能带端口号，同时域名需要经过ICP备案。 《5》检查app.json配置的超时时间配置是否太短，超时时间太短会导致还没收到回报就触发fail回调。 《6》检查发出去的请求是否302到其他域名的接口，这种302的情况会被视为请求别的域名接口导致无法发起请求。

5、微信登录 【1】获取微信登录凭证code 【2】发送code到开发者服务器 【3】到微信服务器换取微信用户身份id 【4】绑定微信用户身份id和业务用户身份（openid:微信用户的唯一标识,session_key:会话密钥,unionid:用户在微信开放平台的唯一标识符） 【5】业务登录凭证SessionId

6、本地数据缓存 【1】读写本地数据缓存 小程序提供了读写本地数据缓存的接口，通过wx.getStorage/wx.getStorageSync读取本地缓存，通过wx.setStorage/wx.setStorageSync写数据到缓存，其中Sync后缀的接口表示是同步接口[9]，执行完毕之后会立马返回。 【2】缓存限制和隔离 小程序宿主环境会管理不同小程序的数据缓存，不同小程序的本地缓存空间是分开的，每个小程序的缓存空间上限为10MB，如果当前缓存已经达到10MB，再通过wx.setStorage写入缓存会触发fail回调。 【3】利用本地缓存提前渲染界面 讨论一个需求：我们要实现了一个购物商城的小程序，首页是展示一堆商品的列表。一般的实现方法就是在页面onLoad回调之后通过wx.request向服务器发起一个请求去拉取首页的商品列表数据，等待wx.request的success回调之后把数据通过setData渲染到界面上。 【4】缓存用户登录态SessionId 处理用户登录态的一般方法，通常用户在没有主动退出登录前，用户的登录态会一直保持一段时间[10]，就无需用户频繁地输入账号密码。如果我们把SessionId记录在Javascript中某个内存变量，当用户关闭小程序再进来小程序时，之前内存的SessionId已经丢失，此时我们就需要利用本地缓存的能力来持久化存储SessionId。

7、设备能力 【1】利用微信扫码能力 为了让用户减少输入，我们可以把复杂的信息编码成一个二维码，利用宿主环境wx.scanCode这个API调起微信扫一扫，用户扫码之后，wx.scanCode的success回调会收到这个二维码所对应的字符串信息。 【2】获取网络状态 我们知道手机连接到互联网有几种方式：Wifi、2G、3G、4G，包括很快到来的5G，每种方式的上传速度和下载速度差异很大，它们的计费方式的差异也导致用户在使用互联网服务的时候有不同的使用习惯。

8、总结 学习了小程序开发中经常遇到的场景：利用Flex布局来进行小程序界面布局、常见的界面交互反馈、如何进行网络通信让小程序和开发者服务器进行交互等，我们就这些场景详细介绍了相关的API的使用技巧和注意事项。

五、小程序的协同工作和发布：

1、协同工作 【1】人员组织结构和权限分配 多数情况下，一个团队多人同时参与同一个小程序项目，每个角色所承担的工作或者权限不一样，中大公司的分工更为仔细。为了更形象的表达团队不同角色的关系以及权限的管理，我们通过虚拟一个项目成员组织结构来描述日常如何协同合作完成一个小程序的发布。 项目管理：产品组、设计组、开发组、测试组 工作流程：需求提出 —》 设计 —》 开发 —》 体验 —》 测试 —》 发布 【2】小程序的版本 一般的软件开发流程，开发者编写代码自测开发版程序，直到程序达到一个稳定可体验的状态时，开发者会把这个体验版本给到产品经理和测试人员进行体验测试，最后修复完程序的Bug后发布供外部用户正式使用。 所有版本：开发版本、体验版本、审核中版本、线上版本

2、用户体验审视 【1】产品和运营思路 在运营行为上，小程序需要遵从微信小程序运营规范。若开发者的小程序违反了其中的条款、相关平台规则或法律法规，或对公众平台、开放平台造成了影响，可能会被强制处罚。条款将根据新问题、相关法律法规或产品运营需要对其内容进行修改并更新，详细条款请查阅小程序运营文档。 【2】体验和设计评估 9点基础设计原则： 《1》导航清晰 《2》流程明确 《3》重点突出 《4》符合预期 《5》 等待与反馈 《6》 异常处理 《7》内容和文案准确友好 《8》和谐统一 《9》平台适配

【3】用户体验测试和完善体验 《1》用户体验测试，可以在设计、开发、测试等全部阶段使用。是一种低成本检测设计质量的方法。 《2》尽早进行用户体验测试。在产品及设计过程中，尚未启动开发时，便可以用低保真/高保真模型进行用户体验测试，以检测设计质量。这样更有利于及早发现问题并进行调整，减少开发成本。 《3》用户测试之前需要确定好需要被检验的流程和任务，需要为用户构建明确的目标，并提示用户以完成任务的方式完成目标。 《4》最好选择产品真实的受众，作为被测试的用户。并在测试时，使用户处于真实的场景和时间下。 《5》设计开放性的问题让用户回答。不用带有主观性的询问语言，引导用户回答。 《6》在用户测试过程中，需要全程做好记录。

3、发布 【1】发布前最后的检查 《1》如果小程序使用到Flex布局，并且需要兼容iOS8以下系统时，请检查上传小程序包时，开发者工具是否已经开启“上传代码时样式自动补全”。 《2》小程序使用的服务器接口应该走HTTPS协议，并且对应的网络域名确保已经在小程序管理平台配置好。 《3》在测试阶段不要打开小程序的调试模式进行测试，因为在调试模式下，微信不会校验域名合法性，容易导致开发者误以为测试通过，导致正式版小程序因为遇到非法域名无法正常工作。 《4》发布前请检查小程序使用到的网络接口已经在现网部署好，并且评估好服务器的机器负载情况。

【2】发布模式 小程序提供了两种发布模式：全量发布和分阶段发布。 《1》全量发布是指当点击发布之后，所有用户访问小程序时都会使用当前最新的发布版本。 《2》分阶段发布是指分不同时间段来控制部分用户使用最新的发布版本，分阶段发布我们也称为灰度发布。

【3】小程序码 小程序码在样式上更具辨识度和视觉冲击力，相对于二维码来说，小程序主题的品牌形象更加清晰明显，可以帮助开发者更好地推广小程序。在发布小程序之后，小程序管理平台会提供对应的小程序码的预览和下载，开发者可以自行下载用于线上和线下的小程序服务推广。

4、运营 【1】数据分析 《1》常规分析 小程序数据分析，是面向小程序开发者、运营者的数据分析工具，提供关键指标统计、实时访问监控、自定义分析等，帮助小程序产品迭代优化和运营。主要功能包括每日例行统计的标准分析，以及满足用户个性化需求的自定义分析。 《2》自定义分析 除了小程序宿主环境提供的数据分析能力，为了让开发者可以更加灵活多维和近实时的用户行为分析，小程序平台提供了自定义上报的特性，开发者可以对用户在小程序内的行为做精细化跟踪，满足页面访问等标准统计以外的个性化分析需求。

【2】运维中心 我们的程序变更总会伴随一些Bug产生，小程序的逻辑代码由JavaScript脚本编写，JavaScript可以通过一些方法[7]来检测运行时异常的发生，小程序宿主环境已经内置了异常检测的模块，并且上报到小程序平台，开发者可以通过小程序平台的“运维中心”查看具体的错误日志，开发者根据日志详细定位自己代码的异常处并及时修复。

【3】微信开发者社区 小程序的宿主环境和微信客户端持续在迭代变更，避免不了变更的同时引起一些Bug导致小程序无法正常工作，所以微信官方提供了微信开发者社区[8]，开发者可以在社区上进行提问或者查看问题进展，小程序官方会在社区第一时间同步各种Bug的解决办法。由于小程序官方的人力有限，所以我们鼓励开发者在社区上互助答疑，提高效率。

一般提问反馈Bug时需要的信息： 《1》一个清晰的问题标题，直接简洁的描述问题的核心点，可以有效的让回答者在问题列表中更快的理解你的难处。 《2》Bug的类型归属，例如是开发者工具出现的问题，还是小程序API出现的问题，开发者要描述清楚。 《3》Bug发生的环境是什么？是在微信客户端的iOS端还是安卓端，对应的微信版本是多少，宿主环境的版本是多少？ 《4》Bug详细的描述，开发者应该清晰地描述Bug的具体表现，产生Bug的具体途径，并且给出自己期望的结果，以便回答者可以验证是否能解决此问题。 《5》给出一个最简单能够复现问题的代码能够让回答者更快的定位问题所在。

5、总结 阐述了软件项目的各个角色的合作流程，罗列了小程序提供的角色权限管理，让项目管理者可以更便捷地管理团队成员。同时为了配合项目开展的各个流程，小程序提供了不同的版本，开发者要合理运用不同版本的特点来进行开发、测试、体验等工作。我们还给了一些用户体验审视的原则，开发者可以在发布小程序之前认真审视自己的小程序体验，以达到更高的用户水准。最后我们提到发布时可以利用小程序平台提供的两种模式进行发布，开发者根据业务情况选择合理的模式进行发布，并且利用小程序平台提供的数据分析服务来帮助运营自己的小程序，让用户可以使用一个稳定可靠的小程序服务。

六、底层框架：

1、双线程模型 【1】技术上选型 《1》用纯客户端原生技术来渲染 《2》用纯 Web 技术来渲染 《3》用客户端原生技术与 Web 技术结合的混合技术（下称 Hybrid 技术）来渲染 【2】管控与安全 【3】天生的延时

2、组件系统 【1】Exparser框架 Exparser的主要特点包括以下几点： 《1》基于Shadow DOM模型：模型上与WebComponents的ShadowDOM高度相似，但不依赖浏览器的原生支持，也没有其他依赖库；实现时，还针对性地增加了其他API以支持小程序组件编程。 《2》可在纯JS环境中运行：这意味着逻辑层也具有一定的组件树组织能力。 《3》高效轻量：性能表现好，在组件实例极多的环境下表现尤其优异，同时代码尺寸也较小。

【2】内置组件 基于Exparser框架，内置了一套组件，提供了视图容器类、表单类、导航类、媒体类、开放类等几十种组件。有了这么丰富的组件，再配合WXSS，我们可以搭建出任何效果的界面。在功能层面上，也满足绝大部分需求。

【3】自定义组件 《1》ShadowTree的概念 在Exparser的组件模型中，这两个节点树可以被拼接成上方的页面节点树。其中，组件的节点树称为“ShadowTree”，即组件内部的实现；最终拼接成的页面节点树被称为“Composed Tree”，即将页面所有组件节点树合成之后的树。在进行了这样的组件分离之后，整个页面节点树实质上被拆分成了若干个ShadowTree（页面的body实质上也是一个组件，因而也是一个ShadowTree）。 《2》运行原理 在使用自定义组件的小程序页面中，Exparser将接管所有的自定义组件注册与实例化。 组件创建的过程大致有以下几个要点： 《1》根据组件注册信息，从组件原型上创建出组件节点的JS对象，即组件的this； 《2》将组件注册信息中的data 复制一份，作为组件数据，即this.data； 《3》将这份数据结合组件WXML，据此创建出Shadow Tree，由于Shadow Tree中可能引用有其他组件，因而这会递归触发其他组件创建过程； 《4》将ShadowTree拼接到Composed Tree上，并生成一些缓存数据用于优化组件更新性能； 《5》触发组件的created生命周期函数； 《6》如果不是页面根组件，需要根据组件节点上的属性定义，来设置组件的属性值； 《7》 当组件实例被展示在页面上时，触发组件的attached 生命周期函数，如果Shadw Tree中有其他组件，也逐个触发它们的生命周期函数。 《3》组件间通信 不同组件实例间的通信有WXML属性值传递、事件系统、selectComponent和relations等方式。其中，WXML属性值传递是从父组件向子组件的基本通信方式，而事件系统是从子组件向父组件的基本通信方式。

3、原生组件 【1】原生组件运行机制 渲染的几个步聚： 《1》组件被创建，包括组件属性会依次赋值。 《2》组件被插入到DOM树里，浏览器内核会立即计算布局，此时我们可以读取出组件相对页面的位置（x, y坐标）、宽高。 《3》组件通知客户端，客户端在相同的位置上，根据宽高插入一块原生区域，之后客户端就在这块区域渲染界面。 《4》当位置或宽高发生变化时，组件会通知客户端做相应的调整。

【2】原生组件渲染机制 原生组件脱离在WebView渲染流程外，这带来了一些限制。最主要的限制是一些CSS样式无法应用于原生组件，例如，不能在父级节点使用overflow:hidden来裁剪原生组件的显示区域；不能使用transformrotate让原生组件产生旋转等。

4、小程序与客户端通信原理 【1】视图层组件 内置组件中有部分组件是利用到客户端原生提供的能力，这类组件基本都是前一个章节描述的原生组件。既然需要客户端原生提供的能力，那就会涉及到视图层与客户端的交互通信。

【2】逻辑层接口 逻辑层与客户端原生通信机制与渲染层类似，不同在于，iOS平台可以往JavaScripCore框架注入一个全局的原生方法，而安卓方面则是跟渲染层一致的。

5、总结 介绍了小程序底层框架的设计和原理，提出了一个全新的双线程模型，这是小程序框架与业界大多数前端Web框架不同之处。基于这个模型，我们可以做到更好地管控以及提供更安全的环境。但同时带来了无处不在的异步问题，不过我们在框架层面去封装好异步带来的时序问题，让开发者只需要懂得上层更易为理解的接口。此外，我们也介绍了基于双线程模型的组件框架，以及原生组件的机制，让开发者进一步理解以写出更合理的代码。最后，我们也阐述了小程序是如何与客户端通信的，这是小程序运行起来的最基本的原理。

6、其它框架 【1】PhoneGap 是一个采用HTML，CSS和JavaScript的技术，创建移动跨平台移动应用程序的框架 【2】ReactNative 是一个 JavaScript 框架，用来编写原生的 iOS 和 Android 应用 【3】微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包

七、性能优化：

1、启动： 下载小程序代码包 —》 加载小程序代码包 —》 初始化小程序首页 【1】代码包下载 在某个小程序第一次启动时，微信需要下载小程序代码包。此后，如果小程序代码包未更新且还被保留在缓存中，则下载小程序代码包的步骤会被跳过。下载到的小程序代码包不是小程序的源代码，而是编译、压缩、打包之后的代码包。 控制代码包大小的方法： 《1》精简代码，去掉不必要的WXML结构和未使用的WXSS定义。 《2》减少在代码包中直接嵌入的资源文件。 《3》压缩图片，使用适当的图片格式。

【2】分包加载流程 小程序的代码将打包在一起，在小程序启动时一次性下载完成。采用分包时，小程序的代码包可以被划分为几个：一个是“主包”，包含小程序启动时会马上打开的页面代码和相关资源；其余是“分包”，包含其余的代码和资源。 【3】代码包加载 微信会在小程序启动前为小程序准备好通用的运行环境。这个运行环境包括几个供小程序使用的线程，并在其中完成小程序基础库的初始化，预先执行通用逻辑，尽可能做好小程序的启动准备。这样可以显著减少小程序的启动时间。

2、页面层级准备 在视图层内，小程序的每一个页面都独立运行在一个页面层级上。小程序启动时仅有一个页面层级，每次调用wx.navigateTo，都会创建一个新的页面层级；相对地，wx.navigateBack会销毁一个页面层级。 页面层级的准备工作分为三个阶段： 第一阶段是启动一个WebView，在iOS和Android系统上，操作系统启动WebView都需要一小段时间。 第二阶段是在WebView中初始化基础库，此时还会进行一些基础库内部优化，以提升页面渲染性能。 第三阶段是注入小程序WXML结构和WXSS样式，使小程序能在接收到页面初始数据之后马上开始渲染页面（这一阶段无法在小程序启动前执行）。

3、数据通信 【1】页面初始数据通信 【2】更新数据通信 《1》执行setData调用时，最好遵循以下原则： 不要过于频繁调用setData，应考虑将多次setData合并成一次setData调用； 《2》数据通信的性能与数据量正相关，因而如果有一些数据字段不在界面中展示且数据结构比较复杂或包含长字符串，则不应使用setData来设置这些数据； 《3》与界面渲染无关的数据最好不要设置在data中，可以考虑设置在page对象的其他字段下。 【3】用户事件通信

4、视图层渲染 【1】初始渲染 初始渲染发生在页面刚刚创建时。初始渲染时，将初始数据套用在对应的WXML片段上生成节点树。节点树也就是在开发者工具WXML面板中看到的页面树结构，它包含页面内所有组件节点的名称、属性值和事件回调函数等信息。最后根据节点树包含的各个节点，在界面上依次创建出各个组件。 【2】重渲染 初始渲染完毕后，视图层可以多次应用setData的数据。每次应用setData数据时，都会执行重渲染来更新界面。每次重渲染时，将data和setData数据套用在WXML片段上，得到一个新节点树。然后将新节点树与当前节点树进行比较，这样可以得到哪些节点的哪些属性需要更新、哪些节点需要添加或移除。最后，将setData数据合并到data中，并用新节点树替换旧节点树，用于下一次重渲染。

5、原生组件通信

6、总结 介绍了小程序的运行流程和一些重要细节，还介绍了进行优化的基本方法。主要的优化策略可以归纳为三点：精简代码，降低WXML结构和JS代码的复杂性；合理使用setData调用，减少setData次数和数据量；必要时使用分包优化。

八、小程序基础库的更新迭代：

1、小程序基础库 【1】基础库载入时机 我们在开发网页时，经常会引用很多开源的JS库，在使用到这些库所提供的API前，我们需要先在业务代码前边引入这些库。比如我们在使用jQuery库的$函数前，需要在业务代码前用script标签先引入jQuery.js。

【2】基础库的版本号 小程序基础库版本号使用 semver 规范，格式为 Major.Minor.Patch，其中Major、Minor、Patch均为整数，1.9.901、2.44.322、10.32.44 都是符合 semver 风格的版本号。通常我们月度发布版本会把Minor提升一位，例如从1.9.x升级到1.10.x，如果是修正版本，会把Patch提升一位，例如1.10.0升级到 1.10.1。Major位则是重大特性发布时才会被提升一位。

2、异常 【1】JS运行异常 【2】捕捉JS异常的方法 在WebView层有两种方法可以捕捉JS异常： 《1》try, catch方案。你可以针对某个代码块使用try,catch包装，这个代码块运行时出错时能在catch块里边捕捉到。 《2》. window.onerror方案。也可以通过window.addEventListener("error", function(evt){})，这个方法能捕捉到语法错误跟运行时错误，同时还能知道出错的信息，以及出错的文件，行号，列号。

3、基础库的更新 【1】基础库版本变动 【2】推送基础库

4、总结 介绍了如何进行小程序日常能力的迭代发布，在发布新版本基础库的过程，我们需要有检测异常现象的能力，避免故障的发生。正是这样严格的迭代流程使得小程序框架能够稳定运行在各个版本的微信客户端中，同时这种小步快跑的迭代速度让开发者可以使用新能力去完善他们的小程序交互。

九、微信开发者工具： 1、简介 微信开发者工具是一个基于nw.js ，使用node.js、chromium以及系统API来实现底层模块，使用React、Redux等前端技术框架来搭建用户交互层，实现同一套代码跨Mac和Windows 平台使用。 开发者可以借助微信开发者工具完成小程序的代码开发、编译运行、界面和逻辑调试、真机预览和提交发布版本等功能。

2、代码编译 【1】编译WXML WXML（WeiXin Markup Language）是小程序框架设计的一套标签语言，用于构建出页面的结构。小程序的渲染层的运行环境是一个WebView，而WebView无法直接理解WXML标签，所以需要经过编译。 【2】编译WXSS WXSS (WeiXin Style Sheets) 是一套样式语言，用来决定 WXML 的组件应该怎么显示。为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。与 CSS 相比，WXSS 扩展的一些特性，包括rpx尺寸单位和样式导入语法，这些特性都是WebView无法直接理解的。 【3】编译JavaScript 微信客户端在运行小程序的逻辑层的时候只需要加载一个JS文件（我们称为app-service.js），而小程序框架允许开发者将 JavaScript 代码写在不同的文件中，所以在代码上传之前，微信开发者工具会对开发者的JS 文件做一些预处理，包括ES6转ES5和代码压缩（开发者可以选择关闭预处理操作），在服务器编译过程将每个JS文件的内容分别包裹在define域中，再按一定的顺序合并成 app-service.js 。

3、模拟器 【1】逻辑层模拟 在iOS微信客户端上，小程序的JavaScript代码是运行在JavaScriptCore中，在Android微信客户端上，小程序的JavaScript代码是通过 X5 JSCore来解析的。而在微信开发者工具上我们采用了一个隐藏着的Webivew来模拟小程序的逻辑运行环境。 【2】渲染层模拟 微信开发者工具使用chrome的 标签来加载渲染层页面，每个渲染层WebView加载。 【3】客户端模拟 微信客户端为丰富小程序的功能提供了大量的API。在微信开发者工具上，通过借助BOM（浏览器对象模型）以及node.js访问系统资源的能力，同时模拟客户端的UI和交互流程，使得大部分的API能够正常执行。 【4】通讯模拟 微信开发者工具的有一个消息中心底层模块维持着一个WebSocket服务器，小程序的逻辑层的WebView和渲染层页面的WebView通过WebSocket与开发者工具底层建立长连，使用WebSocket的protocol字段来区分Socket的来源。

4、调试器 代码调试是开发者工具的最主要的功能之一，包括界面调试和逻辑调试。nw.js对提供打开Chrome Devtools调试界面的接口，使得开发者工具具备对小程序的逻辑层和渲染层进行调试的能力。同时为了方便调试小程序，开发者工具在Chrome Devtools的基础上进行扩展和定制。

5、总结 通过编译过程我们将WXML文件和WXSS文件都处理成JS代码，使用script标签注入在一个空的html文件中（我们称为：page-frame.html）；我们将所有的JS文件编译成一个单独的app-service.js。 在小程序运行时，逻辑层使用JsCore直接加载app-service.js，渲染层使用WebView加载page-frame.html，在确定页面路径之后，通过动态注入script的方式调用WXML文件和WXSS文件生成的对应页面的JS代码，在结合逻辑层的页面数据，最终渲染出指定的页面。 开发者工具使用一个隐藏着的标签来模拟JSCore作为小程序的逻辑层运行环境，通过将JSCore中不支持的BOM对象局部变量化，使得开发者无法在小程序代码中正常使用BOM，从而避免不必要的错误。 在开发者工具底层有一个HTTP服务器来处理来自WebView的请求，并将开发者代码编译处理后的结果作为HTTP请求的返回，WebView按照普通的网页进行渲染。 开发者工具利用BOM、node.js以及模拟的UI和交互流程实现对大部分客户端API的支持。 同时开发者工具底层维护着一个WebSocket服务器，用于在WebView与开发者工具之间建立可靠的消息通讯链路，使得接口调用，事件通知，数据交换能够正常进行，从而使小程序模拟器成为一个统一的整体。 微信开发者工具使用webview.showDevTools 打开Chrome Devtools调试逻辑层WebView的JS代码，同时开发了Chrome Devtools插件 WXML 面板对渲染层页面WebView进行界面调试。WXML面板对渲染层WebView中真实的DOM树做了一个最小树算法的裁剪之后，呈现出与WXML源码一致的节点树列表。