一位微信小程序萌新的学渣笔记(四）页面和应用生命周期

---

应用生命周期

//app.js
App({
  // 1 应用第一次启动就会触发的事件
  onLaunch(){
    // 在应用第一次启动的时候 获取用户个人信息
    console.log("onLaunch");
    // js的方式来跳转 不能触发onPageNotFound事件
    wx.navigateTo({
      url: '11/22/33',
    });
  },

  // 2 当应用 被用户看到 就会触发 例如玩手机时切换小程序和微信主页时
 onShow(){
   // 对应用的数据或页面效果 重置
    console.log("onShow");
 },
 // 3 当应用 被隐藏时 会触发
 onHide(){
   // 暂停或者清除定时器
   console.log("Hide");
 },
 // 4 应用的代码发生了报错的时候 就会触发
 onError(err){
   // 在应用发生代码报错的时候，收集用户的错误信息
   // 通过异步请求 将错误的信息发送后台去
  console.log("onError");
  console.log(err);
 },
 // 5 页面找不到就会触发
 // 应用第一次启动的时候 ，如果找不到第一个入口页面 才会触发
 // 通过改变编译方式 来制造一个错误入口页面

 onPageNotFound(){
   //如果页面不存在了 通过js的方式重新跳转页面 重新跳到第二个首页
   
   // 不能跳到tabbar 页面  与导航组件类似
   wx.navigateTo({
     url: '/pages/demo01/demo01',
   });
   // console.log("onPageNetFound");
 }
})

页面生命周期

// pages/demo17/demo17.js
Page({
  /**
   * 页面的初始数据
   */
  data: {

  },
  /**
   * 生命周期函数--监听页面加载
   */
  //先触发onLoad 再触发onShow 最后是onReady
  onLoad: function (options) {
    console.log("onload");
    //onLoad发送异步请求来初始化页面数据 
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    console.log("onShow");
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    console.log("onReady");
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    console.log("onHide");
    //整个页面隐藏的时候 也代表小程序隐藏 

  },
  /**
   * 生命周期函数--监听页面卸载 也是可以通过点击超链接来演示
   * 也就是关闭当前页面的意思
   */
  onUnload: function () {
    console.log("onUnLoad");
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    console.log("onPullDownRefresh");
  },
  /**
   * 页面上拉触底事件的处理函数
   * 需要让页面 出现上下滚动才行
   */
  onReachBottom: function () {
    console.log("onReachBottom");
    // 上拉加载下一页的数据
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    console.log("onShareAppMessage");
  },
   /**
   * 页面滚动 就可以触发
   */
  onPageScroll(){
    console.log("onPageScroll");
  },
    /**
   * 页面的尺寸发生改变的时候 触发
   * 当小程序 发生了 横屏竖屏 切换的时候 触发
   * 如果你想要当前页面可以发生旋转
   * 将代码 放在demo17.json中 
   *    "pageOrientation":"auto" 
   * 如果你想要所有的页面可以发生旋转 则放在app.json中
   */
  onResize(){
    console.log("onResize");
  },
  /**
   * 1 必须要求当前页面 也是tabbar页面
   * 2 点击的是自己的tab item的时候才触发
   */
  onTabItemTap(){
    console.log("onTabItemTap");
  }
})

// pages/demo17/demo17.json
{
    "pageOrientation":"auto"
}

<!--pages/demo17/demo17.wxml-->
<text>pages/demo17/demo17.wxml</text>
<navigator url="/pages/demo16/demo16"  open-type="navigate">
  dmeo16
</navigator>
<navigator url="/pages/demo16/demo16"  open-type="redirect">
  dmeo16 redirect
</navigator>
view{$}*100