微信小程序生命周期详解-优快云博客

2019独角兽企业重金招聘Python工程师标准>>>

1. 配置

https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html?t=20161102

官方文档, 写的那么详细, 还有什么好记的 ...

2. 逻辑层

注册程序

app 的声明周期: onLaunch, onShow, onHide, 调用时刻顾名思义吧.

//1.当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
  onLaunch: function () {
    //调用API从本地缓存中获取数据
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
    
    util.Logs("app on launch")
  },
 //2.当小程序启动，或从后台进入前台显示，会触发 onShow
 onShow: function () {
    util.Logs("app on show")
 },
 //3.当小程序从前台进入后台，会触发 onHide
 onHide: function () {
   util.Logs("app on hide")
 },

**getApp(): ** 我们提供了全局的 getApp() 函数，可以获取到小程序实例。类似iOS中的AppDelegate类, 相当于是小程序的入口, getApp, 是我们获取这个类的实例的方法. 但是在App 类中, 不能调用getApp函数, 首先当前已经是App类对象中, 可以调用其中任意方法(除生命周期相关方法和数据)和数据; 其次, ....,.

注册页面

一些生命周期函数, 和数据对象, 上拉刷新函数

//1.页面的初始数据, 初始化数据将作为页面的第一次渲染。data 将会以 JSON 的形式由逻辑层传至渲染层，所以其数据必须是可以转成 JSON 的格式：字符串，数字，布尔值，对象，数组。
data: {
    motto: 'Hello World',
    userInfo: {}
  },

//2.生命周期函数--监听页面加载
//  一个页面只会调用一次。
// 接收页面参数可以获取wx.navigateTo和wx.redirectTo及<navigator/>中的 query。
  onLoad: function () {
    this.loadDataFromUserInfo()

    util.Logs("page on load")
  },
  //3.生命周期函数--监听页面初次渲染完成
  // 每次打开页面都会调用一次。
  onReady: function () {
    util.Logs("page on ready")
  },
  //4.生命周期函数--监听页面显示
  // 一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。
  // 对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。详见生命周期
  onShow: function () {
    util.Logs("page on show")
  },
  //5.生命周期函数--监听页面隐藏
  // 当navigateTo或底部tab切换时调用。
  onHide: function () {
    util.Logs("page on hide")
  },
  //6.生命周期函数--监听页面卸载
  // 当redirectTo或navigateBack的时候调用。
  onUnload: function () {
    util.Logs("page on unload")
  },
  //7.监听用户下拉刷新事件。
  // 需要在config的window选项中开启enablePullDownRefresh。
  // 当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新。
  onPullDownRefresh: function () {
    util.Logs("pull down refresh")
  }

绑定事件

<view bindtap="viewTap"> click me </view>

Page({
  viewTap: function() {
    console.log('view tap')
  }
})

绑定数据 setData()

setData 函数用于将数据从逻辑层发送到视图层，同时改变对应的 this.data 的值。

注意：

直接修改 this.data 无效，无法改变页面的状态，还会造成数据不一致。
单次设置的数据不能超过1024kB，请尽量避免一次设置过多的数据。

getCurrentPages()

getCurrentPages() 函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。

注意：不要尝试修改页面栈，会导致路由以及页面状态错误。

pages生命周期示意图

下图来自微信小程序开发文档....

模块化

文件作用域

在 JavaScript 文件中声明的变量和函数只在该文件中有效；不同的文件中可以声明相同名字的变量和函数，不会互相影响。

通过全局函数 getApp() 可以获取全局的应用实例，如果需要全局的数据可以在 App() 中设置

模块化

我们可以将一些公共的代码抽离成为一个单独的 js 文件，作为一个模块。模块只有通过 module.exports 或者 exports 才能对外暴露接口。

利用模块化可以封装一些工具类, 比如, 与时间处理的工具类, 可以封装在一个模块中; 甚至可以为了方便管理某些操作, 将所有的操作都都封装到一个模块中.

function Logs(logs) {
  console.log(logs)
}

module.exports = {
  Logs: Logs
}

转载于:https://my.oschina.net/whforever/blog/782466