微信小程序学习笔记2 --- 小程序的配置及生命周期

1、小程序的架构和配置（app.json全局配置）

小程序的很多开发需求都被规定在了配置文件中例如导航、tabbar、路由

常见的配置文件：

• project.config.json: 配置文件，比如项目名称、appid等（一般不需要修改）
• sitemap.json:小程序搜索相关的（一般不需要修改）
• app.json：全局配置
  1. pages：页面路径列表
     -用于指定小程序由哪些页面组成，每一项对应一个页面的路径信息 -小程序所有的页面都是必须在 pages 中进行注册的
  2. window：全局的默认窗口展示
     用于指定窗口如何展示，其中包含了很多其他属性
  3. tabBar：底部tab栏的展示
• page.json：页面配置
  在局部配置下配置单独页面不需要 "window"，直接添加属性即可。局部配置会覆盖全局配置。

2、小程序的双线程模型

• WXML模板和WXSS样式运行与渲染层，渲染层使用WebView线程渲染（一个程序有多个页面，会使用多个WebView线程）
• Js脚本运行于逻辑层，逻辑层使用JsCore运行脚本
• 这两个线程都会经由**微信客户端（Native）**进行中转交互

2.1、界面渲染过程 ---- 初始化渲染

• WXML 可以先转成 JS 对象，在渲染出真正的 DOM 树

2.2、界面渲染过程 ---- 数据发生改变

• 通过 setData 将 data 中的数据改变，此时会产生一个新的 JS 对象，对应的节点也会发生改变
• diff 算法对比前后两个 JS 对象，得到变化的部分，然后把这个差异应用到原来的 DOM 树上
• 从而达到更新 ui 的目的，这就是数据驱动的原理

2.3、界面渲染的整体流程：

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

3、小程序启动流程

4、小程序的生命周期

小程序的生命周期分为整个小程序的生命周期 App()生命周期 以及页面的生命周期 Page()生命周期

4.1、App() 生命周期

• onLaunch：小程序初始化完成
  options 参数：option.scene (判断小程序进入的场景)
• onShow：小程序界面显示时触发（从后台进入前台）
• onHide：小程序界面隐藏时触发（从前台进入后台）
• onError：当小程序发生一些错误时触发

4.2、Page() 生命周期

• onLoad：页面加载完成
• onReady：页面初次渲染完成
  页面显示（onShow）完成后才会触发 onReady 回调
• onShow：页面显示触发
• onHide：页面隐藏触发
• onUnload：页面销毁触发