小程序的启动流程

当我们启动一个小程序时，会按照下面的流程开始执行

第一步：下载小程序包
首先，我们需要知道的是，当我们使用小程序的时候就跟使用一个手机上的 app 一样，都需要下载，只不过，小程序的包文件很小，所以下载就很快，我们几乎就感受不到它的下载过程

第二步：启动小程序
当小程序下载好之后，就开始了小程序的启动

第三步：加载解析 app.json
当小程序启动之后，第一件做的事情就是加载解析 app.json 文件，这个文件里面包含着许多重要的全局配置，比如 pages（定义了页面的路径）、window（定义了窗口的如何展示）、tabBar（定义了底部tab 栏的展示）

第四步：注册 App（App里面包含了许多的声明周期函数），当注册 App 的时候也会执行 App里面的生命周期函数

第五步：加载自定义组件代码注册自定义组件

从这一步开始，就开始了每个页面的相关解析以及界面的渲染，一个小程序会有许多的页面，而每个页面都会执行下面的这些步骤

第六步：加载解析 page.json
page.json里面包含了许多局部配置

第七步

渲染层加载渲染 page.wxml
逻辑层注册 Page（逻辑层也有对应的生命周期）并执行 Page 生命周期

以上的步骤可以如图下图所示
在这里插入图片描述

注册 App

每个小程序都需要在 app.js 文件中调用 App 方法注册小程序实例
另外在注册的同时，也可以绑定不同的生命周期函数；
除此之外，还可以根据各个生命周期函数的不同特点从而在不同的生命周期函数里执行不同的代码

常用的几个生命周期函数

App({
  // 当小程序初始化完成时，会触发 onLaunch (全局只触发一次)
  onLanuch: function() {
   console.log('小程序初始化完成，onLaunch');
  },
  // 当小程序启动，或从后台进入前台显示，会触发 onShow
  onShow: function() {
    console.log('小程序第一次启动，或者从后台进入前台，onShow');
  },
  // 当小程序从前台进入后台，会触发 onHdie
  onHide: function() {
    console.log('小程序从前台进入后台，onHide');
  },
  // 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
  onError: function(err) {
    console.log('小程序发生错误，err');
  }
})

1.判断小程序的进入场景
常见的进入场景：群聊会话中打开、小程序列表打开、微信扫一扫打开、另一个小程序中打开

在 onlaunch 和 onShow 声明周期回调函数中，有一个 options 参数，options 中有一个值 scene，我们可以将得到的 scene 的值去和官方文档比较从而得知小程序的进入场景是什么

2.监听声明周期函数，在不同的生命周期函数中执行对应的业务逻辑，比如可以在某个生命周期函数中或获取用户的信息

获取用户信息
第一种方式

wx.getUserInfo({
  success: function(res) {
    console.log(res);
  }
})

第二种方式

<button open-type="getUserInfo" bindgetuserinfo="getuserinfo">授权</button>

获取的用户的信息之后，可一通过使用 open-data组件将用户的信息展示到界面上

<open-data type="userAvatarUrl"></open-data>

3.保存全局变量
因为 App() 实例只有一个，并且是全局共享的，所以我们就可以在 App 里面保存一些可以共享的数据

globalData: {
    name: '木子雨',
    age: 18
  }

const app = getApp();
Page({
  data: {
    name: '',
    age: app.globalData.age
  },
  getData() {
    this.setData({
      name: app.globalData.name,
      age: app.globalData.age
    })
  },
})

注册 Page

 onLoad: function (options) {
    console.log('页面加载：onLoad');
  },
  onShow: function () {
    console.log('页面展示：show');
  },
  onReady: function () {
    console.log('页面渲染：ready');
  },
  onHide: function () {
    console.log('页面隐藏：hide');
  },
  onUnload: function () {
    console.log('页面卸载：unload');
  },

注册 App 时，我们能够做的事情
1.在生命周期函数中发送网络请求，从服务器获取数据；
2. 初始化一些数据，以方便被wxml引用展示；
3.监听wxml中的事件，绑定对应的事件函数；
4.其他一些监听（比如页面滚动、上拉刷新、下拉加载更多等）；

Page 实例的生命周期

在这里插入图片描述

木子雨吧

发布了61 篇原创文章 · 获赞 15 · 访问量 4063

私信关注