本章节了解小程序的生命周期和小程序如何传参
参考文档: 小程序生命周期
小程序的生命周期指一个小程序从创建到销毁的一系列过程,小程序有两种生命周期:通过APP()来注册小程序,通过Page来注册一个页面
App()函数用来注册一个小程序。接收一个Objet参数,其指定小程序的生命周期回调等。App()必须在app.js中调用,必须调用且只能调用一次
App({
onLaunch() {
// 监听小程序初始化,全局只触发一次
console.log('监听小程序初始化');
},
onShow(){
// 监听小程序显示,小程序启动时,或从后台进入前台显示时
console.log('监听小程序显示');
},
onHide(){
// 监听小程序隐藏,小程序从后台进去前台显示时
console.log('监听小程序隐藏');
},
onError(){
// 错误监听函数,小程序发生脚本错误或者api调用失败时会触发,会带上错误信息
console.log('错误监听函数');
},
onPageNotFound(){
// 页面不存在监听函数,小程序要打开的页面不存在时触发,会带上页面信息回调该函数
console.log('页面不存在监听函数');
},
// 前后台定义:当用户点击左上角关闭,或者按了设备Home键离开微信,小程序并没有直接销毁,而是进入了后台,当再次进入微信或者再次打开小程序,又会从后台进入前台
})
Page()函数用来注册一个页面。接收一个object类型参数,其指定页面的初始数据、生命周期回调、事件处理函数等
Page({
data:{},
onLoad: function (options) {
//监听页面加载
},
onReady: function () {
//监听页面初次渲染完成
},
onShow: function () {
//监听页面显示
},
onHide: function () {
//监听页面隐藏
},
onUnload: function () {
//监听页面卸载
},
})
举例子:
wxml文件:传递:在绑定事件的标签上声明 data-参数名(自己起)="{{参数}}"
<view>当前数字:{{count}}</view>
<button type="primary" bindtap="tapHandeler" data-num="{{2}}">事件点击</button>
js文件:获取参数:在事件处理函数中 e.target.dataset.参数名
//定义
Page({
data:{
count:0
}
})
//时间处理函数
tapHandeler(e) {
console.log(e)
this.setData ({
count:this.data.count+e.target.dataset.num
})
},
1、wx.navigateTo() :保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面。
举例子:
在要跳转的页面url地址上以key=value的形式传递参数 wxml文件
<view>
<button bindtap="navgiatetologs">跳转传参 </button>
</view>
js文件
navgiatetologs () {
wx.navigateTo({
url: '/pages/logs/logs?id='+2,
})
}
接收参数:
在跳转到的页面js文件中的onload()生命周期函数中接收参数
onLoad(options) {
console.log(options);
}
2、wx.redirectTo():关闭当前页面,跳转到应用内的某个页面。传递和接收参数的用法和wx.navigateTo()一样。
但是需要注意的是:wx.navigateTo和 wx.redirectTo不允许跳转到 tab 所包含的页面,只能用 wx.switchTab跳转。而 wx.switchTab中的 url不能传参数。
全局变量实际上是定义了一个全局的对象,并在每个页面中引入。
在初始化代码的时候,小程序会读取一个 app.js的文件,在这里我们可以定义我们所需要的全局变量。
globalData:{
num:3
}
然后在需要使用数据的页面中,可以通过 getApp()方法获取到全局应用对象,可以对全局变量进行读取和修改
//获取全局变量
const app = getApp()
var num = app.globalData.num
console.log('获取全局变量',num)
打印结果
在A页面进行本地存储数据
//获取全局变量
onLoad () {
// 本地存储
var num = 3
wx.setStorageSync('num', num)
},
在B页面获取数据
//获取全局变量
onLoad () {
//获取本地存储
var getnum = wx.getStorageSync('num')
console.log('本地存储',getnum);
},
打印结果