微信小程序开发进阶 - 生命周期

swift 发布于 2017年11月20日

关于生命周期,这在很多开发生态周都会有,比如原生的 iOS 和 Android 开发中都有类似的概念。 微信小程序也有这个概念, 这点在咱们第一篇介绍的文章中大家应该已经看到了,如果大家需要了解更多背景,可以参看上篇文章:不需内测账号,带你体验微信小程序完整开发过程

这次咱们就详细了解一下小程序的生命周期。以及两个核心概念 —— App 和 Page。

App()

App 函数是整个小程序的入口, 这在我们上篇文章中已经介绍了, 咱们再把代码贴出来回顾一遍:

App({
  onLaunch: function () {
    //调用API从本地缓存中获取数据
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
  },  
  getUserInfo:function(cb){
    var that = this
    if(this.globalData.userInfo){
      typeof cb == "function" && cb(this.globalData.userInfo)
    }else{
      //调用登录接口
      wx.login({
        success: function () {
          wx.getUserInfo({
            success: function (res) {
              that.globalData.userInfo = res.userInfo
              typeof cb == "function" && cb(that.globalData.userInfo)
            }
          })
        }
      })
    }
  },
  globalData:{
    userInfo:null
  }
})

大体上就是这样了, 微信开发工具的默认项目中定义了 onLaunch 方法, 它就是一个生命周期方法。 除了这个方法之外, 还有另外两个生命周期方法, 这里给大家列出:

onLaunch: 小程序初始化完成。 onShow: 小程序显示,初始化完成后会调用, 从后台切换进来也会调用。 onHide: 小程序隐藏,用户在微信中点后退按钮算隐藏, 用户按 Home 键切回桌面也算隐藏, 这时 onHide 方法都会被调用。

这就是 App 目前开放的所有的生命周期方法了。根据你的小程序业务逻辑,使用这些生命周期方法即可。

getApp()

微信还给我们提供了 getApp 函数, 这是一个全局函数, 在任何地方调用这个函数都可以得到 App 的实例,供我们使用。 这样我们在需要使用 App 对象相关属性的时候,就可以引用到它了。

Page

Page 是小程序中另外一个重要的对象, 它表示小程序的每一个单独的页面。 它也包含生命周期。 它的方法如下:

data: 表示页面的数据, 用于前端 UI 显示数据。 onLoad: 页面加载完成。 onReady: 页面渲染完成。 onShow: 页面显示。 onHide: 页面隐藏。 onUnload: 页面卸载。

Page 的基本结构如下:

Page({

  data: {
    message: "Hello world."
  },
  onLoad: function(options) {
    // Do some initialize when page load.
  },
  onReady: function() {
    // Do something when page ready.
  },
  onShow: function() {
    // Do something when page show.
  },
  onHide: function() {
    // Do something when page hide.
  },
  onUnload: function() {
    // Do something when page close.
  }

})

当前端页面需要显示数据的时候, 可以这样:

<view>{{message}}</view> 
-->

这里面的 message 就是引用的 Page 对象中,我们定义在 data 属性中的 key 所对应的内容了。 这样 Page 以及它的数据如何与前端显示绑定起来的流程咱们就明白了。

接下来, 我们怎么处理前端 UI 上面的用户操作事件呢? 比如用户点击, 我们可以使用 bindtap 属性:

<view bindtap="viewTapped" >{{message}}</view> 
-->

bindtap 属性指定了一个方法名,我们只需要在 Page 对象里面实现这个方法就可以处理用户的点击操作了:

Page({

  viewTapped: function() {
    console.log('hello world.')
  }

})

当然, Page 还提供了修改它内部数据的方法 —— setData, 我们可以在刚才这个点击事件中使用 setData 修改显示在前端中的文字:

 Page({

  viewTapped: function() {

    this.setData({
      message: '你好, 世界'
    });

  }

})

如果你觉得这篇文章有帮助,还可以关注微信公众号 swift-cafe,会有更多我的原创内容分享给你~

本站文章均为原创内容,如需转载请注明出处,谢谢。
关注微信公众号
发现更多精彩
swift-cafe