小程序学习2

好多天前

• 介绍了一下小程序
• 如何注册小程序账号
• 开发工具基本使用
• 小程序项目目录结构
• 小程序初体验
• 小程序配置
• wx92167dc7ea03b186

project.config.json : 项目配置文件，如项目名称、appid 等
sitemap.json: 小程序搜索相关

app.json：全局配置
page.json: 页面配置

全局配置中比较重要的内容

属性	类型	描述
pages	string[]	小程序页面路径列表
window	object	全局的默认窗口表现
tabBar	object	底部tab栏的表现

双线程模型

• 小程序的宿主环境？
• 宿主环境为了执行小程序的各种文件： wxml,wxss,js（json文件只是配置，直接解析）
• 提供了小程序的双线程模型

• wxml 和 wxss 运行与渲染层， 渲染层使用 webview线程渲染（小程序有多个页面，会使用多个webView 的线程，小程序页面栈）
• js 脚本 （app.js/home.js等） 运行与逻辑层， 逻辑层使用JsCore 运行脚本。
• 这两个线程都会经由微信客户端（Native） 进行中转交互。

界面渲染过程

• wxml和DOM树
• wxml 可以等价于一颗 DOM 树， 也可以使用一个JS 对象来模拟 （虚拟DOM）

实际开发中 wxml 的数据大都是 由 js 的data 提供的，这时 只有一个 线程 无法完成 最终的渲染
因此 是 渲染层 和 逻辑层 互相配合 渲染出 js 对象 再将 对象转化为真实DOM

• 初始化渲染

wxml 和 wxss 通过渲染层线程的 处理， 转成 JS 对象

• 数据发生变化

通过setData 把msg 数据从 “hello World” 变成 "Goodbye"

1. 产生的 JS对象 对应的节点就会发生变化
2. 此时可以 对比前后两个JS对象得到变得部分
3. 然后把这个差异应用到原来的Dom 树上
4. 从而达到更新UI 的目的，这就是数据驱动的原理

• 界面渲染的整体流程

1. 在渲染层，宿主环境会把 WXML 转化成对应的JS对象
2. 将JS对象再次转化成真实DOM 树，交由渲染层线程渲染
3. 数据变化时，逻辑层提供最新的变化数据，JS对象发生变化比较进行diff 算法对比
4. 将最新变化的内容反映到真实的DOM 树中， 更新UI

小程序启动流程

• 通过了解小程序的启动流程，我们就知道了自己代码的执行顺序

注册小程序-参数解析

• 在注册时, 可以绑定对应的生命周期函数, 在生命周期函数中, 执行对应的代码