小程序生命周期
项目根目录生命周期
App({
onLaunch (options) {
//
console.log('小程序初始化')
},
onShow(options) {
console.log('监听小程序启动或切前台')
},
onHide() {
console.log('监听小程序切后台')
},
onError(msg) {
console.log('错误监听函数')
},
onPageNotFound(res) {
console.log('小程序要打开的页面不存在时触发');
wx.redirectTo({ // 重定向
url: 'pages/...'
}) // 如果是 tabbar 页面，请使用 wx.switchTab
}
})
页面生命周期
// pages/a.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/*页面生命周期*/
onReady: function () {
console.log('监听页面初次渲染完成')
},
onShow: function () {
console.log('监听页面显示')
},
onHide: function () {
console.log('监听页面隐藏')
},
onUnload: function () {
console.log('监听页面卸载')
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击
右上角分享
*/
onShareAppMessage: function () {
}
})
组件生命周期
// pages/myComponent.js
Component({
/**
* 组件的属性列表
*/
properties: {
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
},
/*组件生命周期*/
lifetimes: {
created() {
console.log("在组件实例刚刚被创建时执行")
},
attached() {
console.log("在组件实例进入页面节点树时执行")
},
ready() {
console.log("在组件在视图层布局完成后执行")
},
moved() {
console.log("在组件实例被移动到节点树另一个位置时执行")
},
detached() {
console.log("在组件实例被从页面节点树移除时执行")
},
error() {
console.log("每当组件方法抛出错误时执行")
},
/*组件所在页面的生命周期 */
pageLifetimes: {
show: function () {
// 页面被展示
console.log("页面被展示")
},
hide: function () {
// 页面被隐藏
console.log("页面被隐藏")
},
resize: function (size) {
// 页面尺寸变化
console.log("页面尺寸变化")
}
}
}
})
传参方式
使用页面栈传参 getCurrentPages() 可以获取当前页面栈
路由传参 url后面接参数
状态管理 globalData全局对象
//app.js
globalData: {
userInfo: null,
globalName:"lhs"
}
//子页面中
let app = getApp();
console.log(app.globalData.globalName)
跳转方式
tabBar栏跳转( 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面 )
wx.switchTab({
url: '/index'
})
tabBar栏跳转( 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面 )
wx.switchTab({
url: '/index'
})
指定跳转 - 1( 关闭所有页面，打开到应用内的某个页面 )
//father
wx.reLaunch({
url: 'test?id=1'
})
//children
Page({
onLoad (option) {
console.log(option.query)//{id:1}
}
})
指定跳转 - 2( 关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。 )
//father
wx.redirectTo({
url: 'test?id=1'
})
//children
Page({
onLoad (option) {
console.log(option.query)//{id:1}
}
})
保存状态跳转 ( 保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。 )
//father
wx.navigateTo({
url: 'test?id=1',
events: {
// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
acceptDataFromOpenedPage: function(data) {
console.log(data)
},
someEvent: function(data) {
console.log(data)
}
...
},
success: function(res) {
// 通过eventChannel向被打开页面传送数据
res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })
}
})
//children
Page({
onLoad: function(option){
console.log(option.query)
const eventChannel = this.getOpenerEventChannel()
eventChannel.emit('acceptDataFromOpenedPage', {data: 'test'});
eventChannel.emit('someEvent', {data: 'test'});
// 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
eventChannel.on('acceptDataFromOpenerPage', function(data) {
console.log(data)
})
}
})
返回跳转( 关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。 )
// 此处是A页面
wx.navigateTo({
url: 'B?id=1'
})
// 此处是B页面
wx.navigateTo({
url: 'C?id=1'
})
// 在C页面内 navigateBack，将返回A页面
wx.navigateBack({
delta: 2
})
