目录
-
-
- uniapp页面跳转方式
- 1. `uni.navigateTo(object)`
- 2. `uni.redirectTo(object)`
- 3. `uni.reLaunch(object)`
- 4. `uni.switchTab(object)`
- 5. `uni.navigateBack(object)`
- 6. `uni.preloadPage(object)`
- 本地数据缓存
- 1. `uni.setStorage(object)`
- 2. `uni.setStorageSync(KEY,DATA)`
- 3. `uni.getStorageSync(KEY)`
- 4. `uni.removeStorageSync(KEY)`
- 5. uni.clearStorageSync()
-
uniapp页面跳转方式
1. uni.navigateTo(object)
保留当前页面,
跳转到新页面
,使用uni.navigateBack()
可以返回到原页面。
navigator 组件跳转:
// 跳转到 /pages/info/index.vue页面,注意此页面不可以是tabBar页面
<navigator url="/pages/info/index?key=100&key2=300" open-type="navigate">
<view class="uni-link-item">点我跳转</view>
</navigator>
// /pages/info/index.vue页面接受参数
export default {
onLoad: function (option) {
//option为object类型,会序列化上个页面传递的参数
console.log(option.key); //打印出上个页面传递的参数。
console.log(option.key2); //打印出上个页面传递的参数。
}
}
// 在起始页面跳转到../components/test.vue页面并传递item={name:"kity",id:1} 参数,注意url有长度限制,过长会导致参数传递失败,可用encodeURIComponent方式解决。
<navigator :url="'/pages/info/index?item='+ encodeURIComponent(JSON.stringify(item))" open-type="navigate">
点我跳转
</navigator>
export default {
// 接受参数
onLoad: function (option) {
//解码后,并转换成对象
const item = JSON.parse(decodeURIComponent(option.item));
}
}
@tap事件调用API跳转转
//在起始页面跳转到../components/test.vue页面并传递参数
uni.navigateTo({
url: '../components/test?id=1&name=uniapp'
});
// 在test.vue页面接受参数
export default {
onLoad: function (option) {
//option为object类型,会序列化上个页面传递的参数
console.log(option.id); //打印出上个页面传递的参数。
console.log(option.name); //打印出上个页面传递的参数。
}
}
2. uni.redirectTo(object)
在当前页面打开
,关闭当前页面,跳转到应用内的某个页面。不可以使用uni.navigateBack()
可以返回到原页面。
3. uni.reLaunch(object)
关闭所有页面
,打开到应用内的某个页面。不可以使用uni.navigateBack()
可以返回到原页面。
4. uni.switchTab(object)
跳转到 tabBar 页面
,并关闭其他所有非 tabBar 页面。
pages.json
{
"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": "首页"
},{
"pagePath": "pages/other/other",
"text": "其他"
}]
}
}
other.vue
uni.switchTab({
url: '/pages/index/index'
});
5. uni.navigateBack(object)
返回上一个页面
// 注意:调用 navigateTo 跳转时,调用该方法的页面会被加入堆栈,而 redirectTo 方法则不会。见下方示例代码
// 此处是A页面
uni.navigateTo({
url: 'B?id=1'
});
// 此处是B页面
uni.navigateTo({
url: 'C?id=1'
});
// 在C页面内 navigateBack,将返回A页面
uni.navigateBack({
delta: 2
});
//如上 A-->B-->C , C返回A
6. uni.preloadPage(object)
预加载页面
,是一种性能优化技术。被预载的页面,在打开时速度更快。扫描二维码关注公众号,回复: 11945496 查看本文章
支持性不好,慎用
预加载 /pages/test/test 对应的js文件,不执行页面预渲染逻辑
uni.preloadPage({
url: "/pages/test/test"});
示例
uni.preloadPage({
url: "/pages/test/test"}); // 预加载 /pages/test/test 页面(仅触发onLoad,onReady)
uni.navigateTo({
url: "/pages/test/test"}); // url匹配,跳转预加载页面(仅触发onShow)
uni.navigateTo({
url: "/pages/test/test?a=b"}); // url不匹配,正常打开新页面
想看更多请进入官网:https://uniapp.dcloud.io/api/router?id=navigateto
本地数据缓存
1. uni.setStorage(object)
将数据存储在本地缓存中指定的 key 中,会覆盖掉原来该 key 对应的内容,这是一个异步接口。
uni.setStorage({
key: 'storage_key',
data: 'hello',
success: function () {
console.log('success');
}
});
2. uni.setStorageSync(KEY,DATA)
将 data 存储在本地缓存中指定的 key 中,会覆盖掉原来该 key 对应的内容,这是一个同步接口。
try {
uni.setStorageSync('storage_key', 'hello');
} catch (e) {
// error
}
3. uni.getStorageSync(KEY)
从本地缓存中同步获取指定 key 对应的内容。
try {
const value = uni.getStorageSync('storage_key');
if (value) {
console.log(value);
}
} catch (e) {
// error
}
4. uni.removeStorageSync(KEY)
从本地缓存中同步移除指定 key。
5. uni.clearStorageSync()
try {
uni.removeStorageSync('storage_key');
} catch (e) {
// error
}
同步清理本地数据缓存。
try {
uni.clearStorageSync();
} catch (e) {
// error
}
其它不一一详解,更多请看官网https://uniapp.dcloud.io/api/storage/storage?id=setstorage