1.小程序宿主环境

2021.4.20 微信小程序开发文档的阅读笔记。不详细，写给自己看的。

渲染层和逻辑层

wxml相当于html文件，wxss相当于css文件。
小程序的运行环境分成渲染层和逻辑层，其中 WXML 模板和 WXSS 样式工作在渲染层，JS 脚本工作在逻辑层。

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

程序与页面

微信客户端在打开小程序之前，会把整个小程序的代码包下载到本地。
通过 app.json 的 pages 字段指定当前小程序的所有页面路径：

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ]
}

第一个元素指向的地址（pages/index/index）就是首页。


小程序启动之后，在 app.js 定义的 App 实例的 onLaunch 回调会被执行:

App({
  onLaunch: function () {
    // 小程序启动之后 触发
  }
})

整个小程序只有一个 App 实例，是全部页面共享的。

pages/logs/是用来显示日志的程序和页面。首页点击头像即可进入。里面包括了4个文件，微信客户端加载顺序是：json文件 --> wxml文件和wxss文件 --> js文件。
微信客户端会先根据 logs.json 配置生成一个界面，顶部的颜色和文字在 json 文件里定义（所以网络不好的时候，页面没加载出来，但是我们可以看到页头的文字）。

组件

官方写好的轮子。