uniapp生命周期函数
应用生命周期:
<script>
//应用生命周期
export default {
//小程序初始化完成时,全局触发一次
onLaunch: function() {
console.log('App Launch')
},
//小程序启动,或从后台进入前台时显示
onShow: function() {
console.log('App Show')
},
//小程序从前台进入后台时
onHide: function() {
console.log('App Hide')
}
}
</script>
页面生命周期:
设tabBar首页为A,tabBar其余两个页面为B,C,其中有个tabBar外的页面设P页面。
项目启动初始化进入首页A页面,此时A页面会触发三个函数,onLoad(),onShow(),onReady()。
点击B页面,会触发A页面的onHide(),B页面的三个函数,onLoad(),onShow(),onReady(),点击C页面P页面亦然。
从B页面回到A页面会触发B页面的onHide(),A页面的onShow()。
从P页面回到A页面会触发P页面的onUnload()和onBackPress(),因为普通的页面不会像tabbar那么持久,比较短暂,并且会触发A页面的onShow()
onLoad(){
console.log('页面加载')
},
onShow(){
console.log('页面显示')
},
onReady() {
console.log('页面初次显示')
},
onHide() {
console.log('页面隐藏')
},
onUnload() {
console.log('页面卸载')
},
onBackPress() {
console.log('页面返回')
},
onShareAppMessage() {
console.log('页面分享')
},
路由与页面跳转
-
uni.navigateTo
特性:
1.保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面。
2.不能跳转到tabBar页面
使用方法:
跳转到audio页面并传递id和name参数
export default {
uni.navigateTo({
url: /pages/audio/index?id=1&name=uniapp'
});
}
audio页面接收参数
export default {
onLoad:function(option){
console.log(option.id)
},
}
-
uni.redirectTo
特性:
关闭当前页面,跳转到应用内的某个页面。
使用方法:
跳转到audio页面并传递id和name参数
uni.redirectTo({
url: '/pages/audio/index?id=1&name=uniapp'
});
audio页面接收参数
export default {
onLoad:function(option){
console.log(option.id)
},
}
-
uni.reLaunch
特性:
关闭所有页面,打开到应用内的某个页面。
使用方法:
跳转到audio页面并传递id和name参数
uni.reLaunch({
url: '/pages/audio/index?id=1&name=uniapp'
});
audio页面接收参数
export default {
onLoad:function(option){
console.log(option.id)
},
}
-
uni.switchTab
特性:
1.需要跳转的 tabBar 页面的路径,并且后面不能携带参数。
2.关闭所有页面,打开到应用内的某个页面。
使用方法:
跳转到tabBar的页面
export default {
uni.switchTab({
url: '/pages/user/index'
});
}
-
uni.redirectTo
特性:
1.关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈,决定需要返回几层。
- navigateTo 跳转时,调用该方法的页面会被加入堆栈,而 redirectTo 方法则不会。
使用方法:
返回两级
export default {
uni.switchTab({
delta:2
});
}
uni-app本地存储
-
uni.setStorage
特性:
将数据存储在本地缓存中指定的 key 中,会覆盖掉原来该 key 对应的内容,这是一个异步接口。
用法:
uni.setStorage({
key: 'storage_key',
data: 'hello',
success: function () {
console.log('success');
}
});
-
uni.setStorageSync(key,data)
特性:
将 data 存储在本地缓存中指定的 key 中,会覆盖掉原来该 key 对应的内容,这是一个同步接口。
用法:
try {
uni.setStorageSync('storage_key', 'hello');
} catch (e) {
// error
}
-
uni.getStorage(object))异步获取指定key对应的内容, uni.getStorageSync(key) 同步获取数据
用法:
//异步
uni.getStorage({
key: 'storage_key',
success: function (res) {
console.log(res.data);
}
});
//同步
try {
const value = uni.getStorageSync('storage_key');
if (value) {
console.log(value);
}
} catch (e) {
// error
}
-
uni.getStorageInfo异步获取storage信息,uni.getStorageSync同步获取storage信息
特性:
从本地缓存中获取当前 storage 的相关信息。
用法:
//异步
uni.getStorageInfo({
success: function (res) {
console.log(res.keys);
console.log(res.currentSize);
console.log(res.limitSize);
}
});
//同步
try {
const value = uni.getStorageSync('storage_key');
if (value) {
console.log(value);
}
} catch (e) {
// error
}
-
uni.removeStorage(object)异步移除指定key,uni.removeStorageSync(key) 同步移除指定key
用法:
//异步
uni.removeStorage({
key: 'storage_key',
success: function (res) {
console.log('success');
}
});
//同步
try {
uni.removeStorageSync('storage_key');
} catch (e) {
// error
}
-
uni.clearStorage(object)异步清理本地数据缓存,uni.clearStorageSync(key) 同步清理本地数据缓存
用法:
//异步
uni.clearStorage();
//同步
try {
uni.clearStorageSync();
} catch (e) {
// error
}