专栏首页编程坑太多「小程序JAVA实战」 小程序私有页面的生命周期以及导航(10)

「小程序JAVA实战」 小程序私有页面的生命周期以及导航(10)

之前讲了小程序全局的生命周期,今天咱们说说单个页面的生命周期!源码:https://github.com/limingios/wxProgram.git 中的No.5

Page页面的生命周期

  • 官方介绍

https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html

  • 运行小程序查看生命周期
//index.js
//获取应用实例
const app = getApp()
Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  onLoad: function () {
    console.log("index->onLoad")
      this.setData({
        motto: app.globalData
      })
  },
  onReady: function () {
    console.log("index->onReady")
  },
  onShow: function () {
    console.log("index->onShow")
  },
  onHide: function () {
    console.log("index->onHide")
  },
  onUnload: function () {
    console.log("index->onUnload")
  },
})

加载onLoad,加载onShow,全部显示的时候调用onReady

  • 修改代码演示onHide 和 onUnload

增加一个绑定事件跳转的方式来演示onHide和onUnLoad

  1. navigateTo
//index.js
//获取应用实例
const app = getApp()
Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  onLoad: function () {
    console.log("index->onLoad")
      this.setData({
        motto: app.globalData
      })
  },
  onReady: function () {
    console.log("index->onReady")
  },
  onShow: function () {
    console.log("index->onShow")
  },
  onHide: function () {
    console.log("index->onHide")
  },
  onUnload: function () {
    console.log("index->onUnload")
  },
  clickMe: function(){
    wx.navigateTo({
      url: '../test/test',
    })
  }
})

左上角有返回键

navigateTo 可以hide

  1. redirectTo
//index.js
//获取应用实例
const app = getApp()
Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  onLoad: function () {
    console.log("index->onLoad")
      this.setData({
        motto: app.globalData
      })
  },
  onReady: function () {
    console.log("index->onReady")
  },
  onShow: function () {
    console.log("index->onShow")
  },
  onHide: function () {
    console.log("index->onHide")
  },
  onUnload: function () {
    console.log("index->onUnload")
  },
  clickMe: function(){
    wx.redirectTo({
      url: '../test/test',
    })
  }
})

redirectTo 有onUnLoad 没有hide

PS:这块主要是对配置的生命周期的熟悉,了解下redirectTo 和 navigateTo 之前的区别。

本文分享自微信公众号 - 编程坑太多(idig88)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-11-28

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 「小程序JAVA实战」 小程序远程调试(九)

    PS:最后想到了什么老铁,可以查看远端的代码是不是就可以获取到借鉴他的代码了。其实微信早就想到了,不是所有的都可以的。远端调试必须知道他的APPID的,不是说直...

    IT故事会
  • js的坑,你遇到过几个

    IT故事会
  • 「小程序JAVA实战」小程序视频上传方法的抽象复用(57)

    IT故事会
  • Product Archive相关的标准function module

    版权声明:署名,允许他人基于本文进行创作,且必须基于与原先许可协议相同的许可协议分发本文 (Creative Commons)

    Jerry Wang
  • JavaScript 常见面试题分析(二)

    ④ call() 方法 apply() 方法 bind() 方法 (this 指向第一个参数)

    Nian糕
  • RFC and session issue - why we should use DESTINATION NONE?

    在function module source code里有一个COMMIT WORK。

    Jerry Wang
  • js的并行加载以及顺序执行

    重新温习了下这段内容,发现各个浏览器的兼容性真的是搞大了头,处理起来很是麻烦。 现在现总结下并行加载多个js的方法:   1,对于动态createElement...

    欲休
  • 固定宽高比例盒模型实现方案

    常规布局中,我们经常会遇到百分比布局的方式,也经常会遇到宽度与高度都设置百分比的情况,但高度值我们一般很少用百分比。尤其在百分比布局中,可能很多布局你是宽度百分...

    RobinsonZhang
  • 微信小程序入门《二》实例:条件渲染、数据遍历、网络请求、获取本地图片

    实例内容 条件渲染 数据遍历 网络请求 获取本地图片 实例一: 条件渲染 如果motto为Hello World,则输出你好世界,否则原样输出。 这里是分支条件...

    极乐君
  • 网站F12审核元素自定义输出内容

    Youngxj

扫码关注云+社区

领取腾讯云代金券