微信小程序页面的生命周期和参数传递

页面的生命周期

修改index.wxmllogs.wxml

<!--index.wxml-->
<view class="container">
  <view>
    <text> 文章1 </text>
  </view>
  <view>
    <text> 文章2 </text>
  </view>
  <view>
    <text> 文章3 </text>
  </view>
  <view>
    <text> 文章4 </text>
  </view>
</view>

<!--logs.wxml-->
<view class="container log-list">
  这里是文章详情...
</view>

index.js内的事件都加上打印函数。

//index.js
//获取应用实例
const app = getApp()

Page({
  /**
   * 页面的初始数据
   */
  data: {
  },
  /**
   * 生命周期函数--监听页面加载
   */
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log("--- index page onLoad ---")
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    console.log("--- index page onReady ---")
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    console.log("--- index page onShow ---")
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    console.log("--- index page onHide ---")
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    console.log("--- index page onUnload ---")
  }
})

App.js内也加上打印函数。

//app.js
App({
  /**
 1. 当小程序初始化完成时,会触发 onLaunch(全局只触发一次)
   */
  onLaunch: function () {
    console.log("--- App onLaunch ---")
  },
  /**
 2. 当小程序启动,或从后台进入前台显示,会触发 onShow
   */
  onShow: function (options) {
    console.log("--- App onShow ---")
  },
  /**
 3. 当小程序从前台进入后台,会触发 onHide
   */
  onHide: function () {
    console.log("--- App onHide ---")
  }
})

保存编译小程序,观察控制台的输出情况。
这里写图片描述
可以看出顺序是:

  1. App onLaunch
  2. App onShow
  3. index page onLaunch
  4. index page onShow
  5. index page onReady

App onShow后,我们的App就启动完毕了,接下来App会启动第一个页面index,页面初次被加载时,会执行onLoadonShow以及onReady这三个方法。
下面给文章添加点击事件跳转到详情页面。

<view>
    <text bindtap='itemClick'> 文章1 </text>
</view>
itemClick: function(){
    wx.navigateTo({
      url: '../logs/logs',
    })
}



当我们跳转到文章详情页面后,触发了index page的onHide方法,再返回index page时,又触发了onShow方法。
这里写图片描述
这里写图片描述
下面也将文章详情页面的生命周期打印出来。

//logs.js
const app = getApp()
Page({
  /**
   * 页面的初始数据
   */
  data: {
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log("--- logs page onLoad ---")
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    console.log("--- logs page onReady ---")
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    console.log("--- logs page onShow ---")
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    console.log("--- logs page onHide ---")
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    console.log("--- logs page onUnload ---")
  }
})

重启项目,点击“文章1”,观察控制台的打印输出可以看到logs page和index page一样,依次触发了onLaunchonShowonReady 方法。
这里写图片描述
从logs page返回index page时,控制台又有如下打印:
这里写图片描述
当前后台进行切换时,也会依次打印onHideonShow,此时App的onHideonShow也会被触发。
这里写图片描述
以上说明:

  • 当一个页面跳转至另一个页面,就会触发前一个页面的onHide方法,再返回该页面时,会触发该页面的onShow方法
  • 每一个页面在被创建的时候,会触发 onLoad用来加载数据, onShow用来绑定数据,onReady表明我们的页面已经正常显示
  • onUnload表明页面被卸载

除了wx.navigateTo()还有另外一种页面跳转方式。

itemClick: function(){
    // wx.navigateTo({
    //  url: '../logs/logs',
    // })
    wx.redirectTo({
      url: '../logs/logs',
    })
}

重新编译后的打印信息和之前是一样的。
这里写图片描述
点击文章1,进入文章详情页面。
这里写图片描述
从控制台的输出可以看出,index page的onHide方法并没有被触发,而是触发了onUnload方法,该页面被卸载掉了,详情页面的返回按钮也消失了。

redirectTo相当于把当前页面直接替换成了另一个页面,之前的页面就没了。
下面给首页添加tabBar再来观察页面的生命周期是如何变化的。

"tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "详情"
      }
    ]
 }


点击“详情”:
这里写图片描述
再点击首页:
这里写图片描述
如此循环,两个页面会依次触发onHideonShow,这说明当前的页面上是有两个页面同时存在的,两个页面都没有被卸载。

页面的参数传递

在首页上有“文章1”,“文章2”,“文章3”,“文章4”,点击每一个标题跳转到详情页面,需要告诉详情页面,要显示的是文章几的内容,所以点击时,需要将第一个页面的基本数据传递到第二个页面上去,这就涉及到了两个页面的数据传递。
将logs page的onLoad方法的参数option打印出来:

itemClick: function(){
    wx.navigateTo({
      url: '../logs/logs?id=1'   // 点击时传递一个id
    })
}
data: {
    articleId:null
}
onLoad: function (options) {
    console.log("--- logs page onLoad ---")
    console.log(options)                       // onLoad时打印信息
    this.setData({articleId: options.id})     
}

这里写图片描述
点开AppData:
这里写图片描述
将这个Id显示在首页上:

<!--logs.wxml-->
<view class="container log-list">
  当前的文章Id是:{{articleId}}
  这里是文章详情... 
</view>


通过这种方式就可以把前一个页面的数据传递到第二个页面,除了这种方式,还有另一种页面跳转、传递数据的方式。

  <navigator url='../logs/logs?id=100'>
  <view>
    <text> 文章1 </text>
  </view>
  </navigator>


以上的url中加上redirect就可以改变页面的跳转方式。

<navigator url='../logs/logs?id=100 redirect'>
  <view>
    <text> 文章1 </text>
  </view>
</navigator>

想传递多个参数的方式也很简单,用&连接起来即可。

<navigator url='../logs/logs?id=100&title=标题'>
  <view>
    <text >文章1</text>
  </view>
</navigator>

这里写图片描述
接受参数在onLoad中读取options中的数据即可。

onLoad: function (options) {
    console.log("--- logs page onLoad ---")
    console.log(options.id)
    console.log(options.title)
}

这里写图片描述

阅读更多

没有更多推荐了,返回首页