目录
1、小程序的启动流程
通过了解小程序的启动流程，可以了解小程序的代码执行顺序。每个小程序都需要在 app.js 中调用 App() 方法注册小程序实例，绑定生命周期回调函数、错误监听和页面不存在监听函数等，而且整个小程序只有一个 App 实例，是全部页面共享的。开发者可以通过 getApp() 方法获取到全局唯一的 App 实例，获取 App 上的数据或调用开发者注册在 App 上的函数。官方文档
小程序的启动流程简述：小程序在启动的时候会先下载小程序包，再启动小程序，然后加载 app.json 全局配置文件，然后在 app.js 中调用 App() 方法注册小程序实例，绑定生命周期回调函数、错误监听和页面不存在监听函数等。app.js 文件下小程序的 App 相关生命周期代码如下：
// app.js
App({
//小程序初始化完成，会执行的生命周期函数 onLaunch
onLaunch (options) { // Do something initial when launch. }, //例如网络请求、获取用户信息等：异步
//小程序界面显示出来，会执行的生命周期函数 onShow
onShow (options) { // Do something when show. },
//小程序界面被隐藏时，会执行的生命周期函数 onHide，隐藏后小程序会在后台存活两个小时，该时间内打开小程序不会重新加载
onHide () { // Do something when hide. },
//小程序中发生错误时，会执行的生命周期函数 onError
onError (msg) { console.log(msg) },
globalData: 'I am global data' //全局数据，可以在其他页面通过getApp()获取App()产生的实例对象
//const app = getApp(); console.log(app.globalData.name);
})注册完 App 实例后，会加载自定义组件并注册，之后会加载某一个页面（一般是app.json配置中的pages数组的第一个路径的页面，如果配置了编译环境的话，就会在该配置环境下先加载指定页面），首先会加载某个页面的 json 文件，读取该文件下的相关页面配置，然后是渲染 wxml 文件，将代码转化成 JS 对象，进而转化成 真实DOM树，然后把 DOM 树渲染出来。而且也会加载某个页面的 js 文件（双线程模型），会调用 Page() 函数，并绑定 Page 生命周期函数。
每个小程序都需要在 app.js 中调用 App() 方法注册小程序实例，在注册时，可以绑定对应的生命周期函数，在小程序的生命周期函数中，执行对应的代码，具体的参数及介绍可以参考一下 官方文档。
2、注册APP时做什么
在注册 App 时，一般会做几个操作：（1）判断小程序的进入场景。（2）监听生命周期函数，在生命周期中执行对应的业务逻辑，比如在某个生命周期函数中获取微信用户的信息。（3）因为 App() 实例只有一个，并且全局共享的（单例对象），所以可以将一些共享数据放在这里。
（1）判断小程序的进入场景。常见的进入场景：群聊会话中打开、小程序列表中打开、微信扫一扫打开、另一个小程序打开。那么如何确定场景？在 onLaunch() 和 onShow() 生命周期回调函数中，会有 options 参数，其中有 scene 值。官方文档-场景值列表
// app.js
App({
onLaunch (options) { console.log(options) }, //可以打印出小程序进入的场景值
onShow (options) { console.log(options) }, //可以打印出小程序进入的场景值
onHide () { // Do something when hide. },
onError (msg) { console.log(msg) },
globalData: 'I am global data' //全局数据，可以在其他页面通过getApp()获取App()产生的实例对象
//const app = getApp(); console.log(app.globalData.name);
})（2）在注册 App 时，还可以监听生命周期函数，获取用户的信息，并在获取到用户信息齐后，将用户的信息传递给服务器，获取用户信息的方式有三种：
① wx.getUserlnfo() — 即将废弃的接口，不过好在除了这种方式之外，还有另外两种方式也可以获取用户的信息；
// app.js
App({
onLaunch (options) { // Do something initial when launch. },
onShow (options) {
wx.getUserInfo({
success:function(res){
console.log(res); //可以在控制台查看用户信息
}
}
},
onHide () { // Do something when hide. },
onError (msg) { console.log(msg) },
globalData: 'I am global data'
})② button 组件：将 open-type 改成 getUserlnfo，并且绑定 bindgetuserinfo 事件去获取用户信息；
//.wxml文件中的代码
<button size='mini' open-type='getUserInfo' bindgetuserinfo='handleGetUserInfo'>获取授权</button>
//.js文件中的代码
handleGetUserInfo(event){
console.log(event); //可以在控制台查看用户信息
}
③ 使用 open-data 组件，展示用户信息，open-data 的相关参数可以参考 官方文档；
<open-data type="userNickName"></open-data>
<open-data type="userAvatarUrl"></open-data>（3）因为 App() 实例只有一个，并且全局共享的（单例对象），所以可以将一些共享数据放在这里：globalData 官方文档
// app.js
App({
//小程序初始化完成，会执行的生命周期函数 onLaunch
onLaunch (options) { // Do something initial when launch. }, //例如网络请求、获取用户信息等：异步
//小程序界面显示出来，会执行的生命周期函数 onShow
onShow (options) { // Do something when show. },
//小程序界面被隐藏时，会执行的生命周期函数 onHide，隐藏后小程序会在后台存活两个小时，该时间内打开小程序不会重新加载
onHide () { // Do something when hide. },
//小程序中发生错误时，会执行的生命周期函数 onError
onError (msg) { console.log(msg) },
globalData: 'I am global data' //全局数据，可以在其他页面通过getApp()获取App()产生的实例对象
//const app = getApp(); console.log(app.globalData.name);
})3、注册Page时做什么
每个小程序都需要在 app.js 中调用 App() 方法注册小程序实例，小程序中的每个页面，都有一个对应的 js 文件，其中调用Page() 方法注册页面示例，在注册时，可以绑定初始化数据、生命周期回调、事件处理函数等。在页面的生命周期函数中，执行对应的代码，具体的参数及介绍可以参考一下 官方文档。
在注册一个 Page 页面时，一般会做几个操作：（1）在生命周期函数中发送网络请求，从服务器获取数据；（2）初始化一些数据，以方便被 wxml 引用展示；（3）监听 wxml 中的事件，绑定对应的事件函数；（4）其他一些监听（比如页面滚动、上拉刷新、下拉加载更多等）；
（1）在生命周期函数中发送网络请求，从服务器获取数据；然后可以将从服务器获取的数据保存到本地，注意的是在保存的时候，需要通过 setData() 方法，这样可以保证数据的响应式，即数据改变后，页面数据及时刷新。
//index.js
Page({
data:{ //初始化数据，方便 wxml 引用展示
model:[]
},
onLoad: function(options) { //页面被加载出来时执行
wx.request({
url:' http://123.0.0.1:8080/recommend", //这个域名需要在微信公众平台进行合法配置
success:(res)=>{
const data = res.data;
this.setData({ //这样给 model 赋值，可以保证数据的响应式
model:data;
})
}
})
},
onReady: function() {// Do something when page ready.}, //页面初次渲染完成时执行
onShow: function() {// Do something when page show.}, //页面显示出来时执行
onHide: function() {// Do something when page hide.}, //当页面隐藏起来时执行
onUnload: function() {// Do something when page close.} //页面跳转后销毁时执行
})（2）初始化数据，以方便被 wxml 引用展示；就是在 Page 实例中的 data 对象中可以保存一些数据，方便 wxml 引用展示。
（3）监听 wxml 中的事件，绑定对应的事件函数；
//home.wxml文件中的代码：
<view>当前数字：{{count}}</view>
<button size="mini",bindtap='handleBtnClick'>+</button>
//home.js文件中的代码：
Page({
data:{
count:0
},
handleBtnClick(){
//this.data.count += 1; //这种方式页面数据不会刷新，因为它不像vue有数据双向绑定的特性
this.setData({ count:this.data.count++ }) //通过 setData() 来实现页面数据的响应式
}
})（4）其他一些监听（比如页面滚动、上拉刷新、下拉加载更多等）；
//home.js文件中的代码：监听页面的滚动
onPageScroll(obj){
console.log(obj); //返回一个对象，scrollTop
},
onReachBottom(){ //监听页面滚动到底部
console.log('页面滚动到底部');
},
onPullDownRefresh(){ //监听下拉刷新事件 注意：要向监听下拉刷新事件，必须到该页面下的json文件进行配置
console.log('下拉刷新的事件'); //"enablePullDownRefresh":true
}4、Page生命周期图解
下图是小程序官方给定的 Page 生命周期图，分为两个线程：渲染层线程（View Thread）和 逻辑层线程（AppService Thread），在页面加载时，这两个线程同时执行。
首先是渲染层和逻辑层的线程同时启动，渲染层初始化，逻辑成注册 App 实例，渲染层在渲染页面时需要用到数据时，会通知 notify 逻辑层，然后逻辑层会把数据发送给渲染层，当小程序后台数据发生改变时，逻辑层继续将数据发送给渲染层，渲染层会比对 DOM 树，将新数据渲染出来。当小程序被隐藏到后台时，会进入 onHide() 生命周期，当下程序再次被显示到屏幕上时，会再次进入 onShow() 生命周期，当小程序被关闭时，会进入 onUnload() 生命周期，然后是关闭渲染层和逻辑层的线程。
