生命周期函数、路由跳转

生命周期函数及其执行时机

小程序页面常用的生命周期函数如下，

• onLoad()，页面加载时触发
• onShow()，页面显示时触发
• onReady()，页面初次渲染完成时触发
• onHide()，页面隐藏时触发
• onUnload()，页面卸载时触发

以上生命周期函数的执行时机如下图所示，

1. 逻辑层在创建页面实例、初始化页面数据时，会先后调用onLoad、onShow。
2. 视图层在初次渲染前会向逻辑层索要初始化数据，并在渲染完成后通知逻辑层，此时，逻辑层会调用onReady。

路由跳转

路由跳转常用API有，

1. wx.navigateTo()，保留当前页面，跳转到应用内的某个页面。
2. wx.redirectTo()，关闭当前页面，跳转到应用内的某个页面。
3. wx.reLaunch()，关闭所有页面，打开应用中的某个页面。

接下来从生命周期函数的调用情况，来感受以上3个API的异同。

小程序项目

项目代码涉及的主要文件有：

1. app.json
2. app.wxss
3. app.js
4. pages/index/index.wxml
5. pages/index/index.wxss
6. pages/index/index.js
7. pages/logs/logs.json
8. pages/logs/logs.wxml

app.json

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "navigationBarBackgroundColor": "#FFA500",
    "navigationBarTitleText": "首页",
    "navigationBarTextStyle": "white"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

app.wxss

page{
  height: 100%;
}

app.js

App({})

pages/index/index.wml

<view class="container">
  <view class="userInfo">
    <image src="/static/images/aito.jpg" class="avatar"></image>
    <view class="nickname">{{nickname}}</view>
  </view>
  <view class="btnBox" bindtap="toLogs">
    <text class="btn">hello world</text>
  </view>
</view>

pages/index/index.wxss

.container{
  display: flex;
  flex-direction: column;
  align-items: center;
  background:lightgoldenrodyellow;
  padding: 100rpx;
  height: 100%;
}
.userInfo{
  padding: 20rpx 0;
  text-align: center;
}
.avatar{
  width: 128rpx;
  height: 128rpx;
  border-radius: 50%;
}
.nickname{
  color: gray;
}
.btnBox{
  margin: 64rpx;
}
.btn{
  height: 80rpx;
  line-height: 80rpx;
  padding: 10rpx 20rpx;
  border-radius: 4rpx;
  text-align: center;
  border: 1rpx solid #333;
  font-size: 26rpx;
}

pages/index/index.js

Page({
  data:{
    nickname:"问界M5"
  },
  onLoad(){
    console.log("onLoad");
  },
  onShow(){
    console.log("onShow");
  },
  onReady(){
    console.log("onReady");
  },
  onHide(){
    console.log("onHide");
  },
  onUnload(){
    console.log("onUnload");
  },
  toLogs(){
    console.log("路由跳转：wx.navigateTo");
    wx.navigateTo({
      url: '/pages/logs/logs',
    })
  }
  
  // toLogs(){
  //   console.log("路由跳转：wx.redirectTo");
  //   wx.redirectTo({
  //     url: '/pages/logs/logs',
  //   })
  // } 

  // toLogs(){
  //   console.log("路由跳转：wx.reLaunch");
  //   wx.reLaunch({
  //     url: '/pages/logs/logs',
  //   })
  // }
})

pages/logs/logs.json

{
  "usingComponents": {},
  "navigationBarTitleText": "日志"
}

pages/logs/logs.wxml

<text>pages/logs/logs.wxml</text>

小结

1. wx.navigateTo()，将保留当前页面。从index页面跳转到logs页面时，会触发index页面的onHide；再次返回index页面时，会触发index页面的onShow。
   
2. wx.redirectTo()，将关闭当前页面。从index页面跳转到logs页面时，会触发index页面的onUnload；再次回到index页面时，会依次触发index页面的onLoad、onShow、onReady。
   
3. wx.reLaunch()，将关闭所有页面。从index页面跳转到logs页面时，会触发index页面的onUnload；再次回到index页面时，会依次触发index页面的onLoad、onShow、onReady。
   

相关链接

新建微信小程序项目
微信小程序的数据绑定
微信小程序的事件绑定