微信小程序的生命周期以及两个核心概念——App和Page
发表时间：2023-10-14 10:13:41
文章来源：炫佑科技
浏览次数：127
菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技
微信小程序的生命周期以及两个核心概念——App和Page
这次我们就来详细了解一下小程序的生命周期。 还有两个核心概念——App和Page。
应用程序（）
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
}
})
基本上就是这样。 该方法定义在微信开发工具默认项目中，是一个生命周期方法。 除了这个方法之外，还有另外两个生命周期方法，这里列出：
：小程序初始化完成。
：小程序展示，初始化完成后会调用，后台切换时也会调用。
：小程序被隐藏。 当用户点击微信中的后退按钮时，就被认为是隐藏的。 当用户按下Home键切换回桌面时，也被认为是隐藏的。 这时候就会调用该方法。
这些是App当前开放的所有生命周期方法。 只需根据你的小程序业务逻辑来使用这些生命周期方法即可。
()
微信还给我们提供了一个功能，就是全局功能。 在任何地方调用这个函数都可以得到一个App的实例供我们使用。 这样我们在需要使用App对象的相关属性时就可以引用它。
页
页面是小程序中另一个重要的对象。 它代表小程序的每个单独页面。 它还包含生命周期。 其方法如下：
data：代表页面的数据，用于前端UI展示数据。
: 页面已加载。
：页面渲染完成。
：显示页面。
: 页面被隐藏。
：卸载页面。
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.
}
})
当前端页面需要显示数据时微信小程序的生命周期以及两个核心概念——App和Page，可以这样：
{{message}}
里面的内容就是我们在引用的Page对象的data属性中定义的key对应的内容。 这样我们就了解了Page及其数据是如何绑定到前端显示的过程了。
接下来我们如何处理前端UI上的用户操作事件呢？ 例如，当用户点击时，我们可以使用属性：
{{message}}
该属性指定方法名称。 我们只需要在Page对象中实现这个方法来处理用户的点击操作：
Page({
viewTapped: function() {
console.log('hello world.')
}
})
当然微信小程序开发周期，Page也提供了修改其内部数据的方法——我们可以在刚才的点击事件中使用它来修改前端显示的文字：
Page({
viewTapped: function() {
this.setData({
message: '你好， 世界'
});
}
})
