微信小程序学习第二天（微信小程序的启动流程，生命周期，进入场景判断，生命周期函数）

微信小程序的启动流程

app.js的生命周期

App({

  /**
   * 当小程序初始化完成时，会触发（全局只触发一次）
   */
  onLaunch: function () {
    //初始化这里获取信息
  },

  /**
   * 当小程序启动，或从后台进入前台显示，或者说界面显示出来后就会触发 onShow
   */
  onShow: function (options) {
    
  },

  /**
   * 当小程序从前台进入后台，也就是界面被隐藏后，会触发 onHide，
   */
  onHide: function () {
    
  },

  /**
   * 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息，也就是小程序发生错误后。触发方法
   */
  onError: function (msg) {
    
  }
})

小程序的进入场景判断

上面讲解了一下小程序app的生命周期，那么现在重新回到启动小程序。
在启动小程序里的注册小程序，这个注册小程序就是什么呢

首先看第一个

我们通过上面看到

onShow: function (options) {
    
  },

这里有一个options这个参数


然后通过这个参数就知道是如何打开我们的小程序的

监听生命周期函数

比如下面我们在监听到界面展示的时候，获取当前微信用户信息，获取用户信息必须要点击再获取，这是做小程序的规定

第一种方法
使用wx的getUserInfo api ，里面的success就是获取成功后的回调函数，res是获取到的信息。

但是上面这种wx说要关掉了

第二种
在home.wxml 这里设置一个点击事件，这个点击事件就是获取用户信息的

<button 
 open-type="getUserInfo"   //这里设置一个属性是代表或者用户信息的
 bindgetuserinfo="handleGetUserInfo">  //这里这个属性绑定获取用户属性，绑定在handleGetUserInfo
 按纽
</button>

home.js中，点击事件会产生一个event参数，这个参数里面的就有获取到的用户信息

Page({
  handleGetUserInfo(event) {
    console.log(event)
  }
})

第三种
就是使用微信给的标签open-data，直接获取用户信息，type就是要获取的信息

 <open-data type="userNickName"></open-data>  //获取用户名称
 <open-data type="userAvatarUrl"> </open-data>  //获取用户头像

调用app.js叫注册小程序，那么现在调用page方法就是注册页面

首先来看page的生命周期函数

Page({

  /**
   * 页面的初始数据
   */
  data: {
    
  },

  /**
   * 生命周期函数--页面被加载出来就调用，关闭后打开不调用
   */
  onLoad: function (options) {
    
  },

  /**
  * 生命周期函数--页面显示出来就调用
  */
  onShow: function () {

  },

  /**
   * 生命周期函数--页面初次渲染完成就调用，再次打开不调用
   */
  onReady: function () {
    
  },
//上面3个函数的初次执行顺序是从上到下，当关闭小程序后又打开，就会只执行onShow方法
  /**
   * 生命周期函数--页面隐藏
   */
  onHide: function () {
    
  },

  /**
   * 生命周期函数--页面被删除或者销毁，就调用
   */
  onUnload: function () {
    
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  }
})

讲解一下生命周期
经过上面对page生命周期初次的理解，下面来真正讲解一下生命周期，首先左边是view层，右边是逻辑层，一开始大家一起start
然后左边会执行初始化，右边会把page创建出来，在左边初始化的情况下，可能需要获取一些数据来进行初始化。
然后左边就是进行nitity（通知）右边。然后右边这时候执行到waiting notity 在等待通知，在阻塞状态。这时候传来通知就会跳出阻塞，然后就会发送数据到左边/。
然后左边收到数据来到ready（准备好了）状态就会发送通知给右边说准备好了，右边就执行onready方法
然后如果右边数据发送改变，就会把新数据发到左边，左边就会执行rerender（重新渲染）

然后退到后台又回到前台会进行的操作

小程序其他知识补充
当我们使用小程序右上角的，圆圈关掉的小程序的时候，它会有两个小时的保留期间，当再次启动的时候就直接展示出来就可以 ；
2、当我们想要使数据能够像vue那样数据的响应式的时候，那么在数据赋值给data里面的数据时候，就不能直接

this.data.list = data

而是

> this.setData({ list : data })

3、wxml中的共同属性

4、全局样式，定义再app.wxss里面，所有都可以使用，

那wxml里面样式的优先级是
行内（就是标签内使用style）> 页面 （就是本也页面的wxss）> 全局（app.wxss）
那是为什么呢，其实就是权重的问题，越大越优先

然后!important如何使用