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

原创 2018年04月17日 19:38:57

页面的生命周期

修改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)
}

这里写图片描述

软件工程杂志《非程序员》第一期

软件工程杂志《非程序员》第一期名    称: 《非程序员》第一期设    计: UMLCHINA编    者: UMLCHINA联系邮件: think@umlchina.com 版    本: 第一期...
  • dbbdggdbbdgg
  • dbbdggdbbdgg
  • 2001-05-27 12:05:00
  • 668

微信小程序的生命周期

文章来源:http://www.wxapp-union.com/portal.php?mod=view&aid=2939 通俗的讲,生命周期就是指一个对象的生老病死。 从软件的角度来看,生命周期...
  • rolan1993
  • rolan1993
  • 2017-08-29 14:37:14
  • 547

微信小程序开发详解(八)---微信小程序页面生命周期和参数传递

1:页面的生命周期 在初始页面:index.js中增加如图1所示代码 图1 点击“编译”后,运行这个小程序:日志如图2所示:初始页面index.js启动会从app,js中的生命周期方法调用开始:o...
  • aoaoxiexie
  • aoaoxiexie
  • 2016-12-27 16:04:45
  • 6908

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

页面的生命周期函数如下: Page({   data:{        },   onLoad:function(options){     // 生命周期函数--监听页面加载     ...
  • console__
  • console__
  • 2017-05-05 10:24:15
  • 487

微信小程序的生命周期实例演示 —— 微信小程序教程系列(2)

上篇教程 微信小程序的文件结构 —— 微信小程序教程系列(1) 微信小程序的生命周期函数有2个 一个是App的生命周期 另一个是Page的生命周期 App的生命周期 示例:...
  • michael_ouyang
  • michael_ouyang
  • 2017-02-06 15:06:55
  • 9718

微信小程序把玩(五)页面生命周期

这里只要熟悉页面的基本生命周期即可,业务在指定生命周期函数内书写。以下是官网给出的生命周期函数方法和状态图 上面的生周期函数图对于做Android 或者IOS的来书理解起来应该不是难事,具体怎么掌握只...
  • u014360817
  • u014360817
  • 2016-09-24 15:40:36
  • 23139

微信小程序之三(设置页面标题)

设置页面标题 ,相当的简单, 找到所在页面的目录,新建一个 json 文件,比如我们上一次建造的 test 页面 我们  找到 pages/test/ 目录 新建一个 test.json 文件 加...
  • han_cui
  • han_cui
  • 2017-01-13 16:50:30
  • 2686

微信小程序开发详解(七)---微信小程序APP生命周期

1:微信小程序APP的生命周期方法: 在微信小程序工程中的app.js中增加如图1所示方法 图1 编译运行,查看日志如图2,图3所示:微信小程序启动时,调用生命周期方法为:onLaunc...
  • aoaoxiexie
  • aoaoxiexie
  • 2016-12-27 14:46:04
  • 4708

微信小程序之程序、页面注册及生命周期

程序注册App() App() 函数用来注册一个小程序。接受一个 object 参数,其指定小程序的生命周期函数等。 object参数说明: 前台、后台定义: 当用户点击左上角关闭,或者按了设备...
  • hedong_77
  • hedong_77
  • 2017-01-22 12:42:29
  • 1106

微信小程序 生命周期详解

这篇文章主要介绍了微信小程序 生命周期的相关资料,创建、到开始、暂停、唤起、停止、卸载等过程,需要的朋友可以参考下 微信小程序 生命周期 通俗的讲,生命周期就是指一个对象的生老病死。 从软件的...
  • yelin042
  • yelin042
  • 2017-05-12 15:09:01
  • 459
收藏助手
不良信息举报
您举报文章:微信小程序页面的生命周期和参数传递
举报原因:
原因补充:

(最多只允许输入30个字)