uni-app小结(3)

uniapp生命周期函数

生命周期.png

应用生命周期：

<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() 获取当前的页面栈，决定需要返回几层。

2. 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
}