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

  1. 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
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,242评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,769评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,484评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,133评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,007评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,080评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,496评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,190评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,464评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,549评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,330评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,205评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,567评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,889评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,160评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,475评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,650评论 2 335

推荐阅读更多精彩内容