本文围绕Uniapp API展开，介绍了页面和路由跳转、页面传参、界面交互反馈、网络请求等API的使用方法，还给出了列表页跳转详情页、展示评论列表等案例，同时讲解了Uniapp数据缓存的设置、获取和清除操作，最后提及了uniCloud云存储。
课程地址：【新课uniapp零基础入门到项目打包（微信小程序/H5/vue/安卓apk）全掌握】 https://www.bilibili.com/video/BV1mT411K7nW/?p=12&share_source=copy_web&vd_source=b1cb921b73fe3808550eaf2224d1c155
目录
5.3.1.3 uni.showLoading(OBJECT)显示loading提示框
5.3.1.5 uni.showModal(OBJECT)模态弹窗
5.3.1.6 uni.showActionSheet(OBJECT)弹出操作菜单
5.6.1 uni.setStorage & uni.setStorageSync
5.6.2 uni.getStorage & uni.getStorageSync
5 API
uniapp和微信小程序的文档是一致的。uniapp的api与微信小程序的api命名保持一致。
5.1 页面和路由
uniapp官网-组件-内置组件-路由和页面跳转-navigator，2种跳转方式：1 navigatei标签；2 uni.navigateTo跳转（js逻辑实现跳转）
uni.navigateTo(OBJECT) | uni-app官网
wx.switchTab(Object object) | 微信开放文档
区别在于微信小程序前面有wx.xxx，uniapp前面有uni.xxxx
5.1.1 uni.navigateTo
uni.navigateTo(OBJECT) | uni-app官网
相当于跳转到某一个页面。
navigate标签实现页面跳转
<navigator url="/pages/demo4/demo4" open-type="redirect">demo4</navigator>效果
点击demo4，跳转到demo4页面
问题：我想让一个view块点击时实现页面跳转。
方法：给view加一个点击事件，在事件处理函数里用uni.navigateTo方法实现页面跳转。
<view style="height: 100px; width: 200px;background-color: aqua;" @click="goDemo4"> </view>事件处理函数
methods: {
goDemo4() {
uni.navigateTo({
url: '/pages/demo4/demo4'
})
}
}- 总结：页面跳转形式
- 1、navigator标签实现页面跳转
- 2、uni.navigateTo方法实现页面跳转（在要跳转的view里添加click事件，事件处理函数里使用uni.navigateTo方法）
参数的其他属性
举例
methods: {
goDemo4() {
uni.navigateTo({
url: '/pages/demo4/demo4',
success:res=> {
console.log(res);
}
})
}
}5.1.2 uni.redirectTo
uni.navigateTo(OBJECT) | uni-app官网
跳转时关闭当前页面。
uni.navigateTo方法，在跳转时，跳转后的页面左上角有箭头，表示可以回到上一个页面。
而uni.redirectTo方法，跳转后的页面左上方没有箭头，即不能回到上一个页面。
5.1.3 uni.reLaunch
uni.navigateTo(OBJECT) | uni-app官网
打开导航页面（tabBar页面）。uni.navigateTo和uni.redirectTo方法不能打开导航页面。
比如项目里的about页面，就是导航页面。只能用uni.reLaunch方法跳转到。
使用
methods: {
goDemo4() {
uni.reLaunch({
url: '/pages/about/about'
})
}
}导航页面，比如首页，新闻列表和关于我们（about）是导航页面。
5.1.4 uni.switchTab
uni.navigateTo(OBJECT) | uni-app官网
与uni.reLaunch方法的功能是一致的，但是不能携带参数（uni.reLaunch可以携带参数）
下面num就是url里携带的参数，uni.reLaunch方法可以这样，uni.switchTab不可以。
methods: {
goDemo4() {
uni.reLaunch({
url: '/pages/about/about?num=3'
})
}
}5.1.5 uni.navigateBack
uni.navigateTo(OBJECT) | uni-app官网
返回上一个页面
在跳转后的页面中，view里绑定一个click事件，事件处理函数里使用uni.navigateBack返回上一页。
<view class="" @click="goBack">< 返回上一页
</view> methods: {
goBack() {
uni.navigateBack();
}
}效果
点击箭头处，返回首页。
5.1.6 EventChannel
页面通信
5.1.7 uni.preloadPage
有平台差异，就不展开了。
5.2 onLoad接收页面跳转时的传参
5.2.1 vueroute路由传参
在navigator标签的url属性里添加字段wd字段，值为uniapp
<navigator url="/pages/demo4/demo4?wd=uniapp" open-type="redirect">demo4</navigator>在index首页点击该标签，跳转到demo4页面，可以在地址栏看到成功传值
要想在页面获取到wd字段，可以使用vuerouter。要传递的wd字段在this.$route.query里
因此在生命周期mounted里，打印demo4页面接收的wd值。
mounted() {
console.log(this.$route.query.wd);
}上面使用navigator标签实现页面跳转，uni.navigateTo方法是一样的，也是在方法的url里添加要传递的字段。
需要兼容小程序
5.2.2 onLoad传参
小程序不支持以上的route路由跳转。
规范：使用小程序的onLoad生命周期，此时onLoad参数即为传递的参数。
onLoad(e) {
console.log(e);
}
总结：可以直接使用onLoad获取传递的参数。
5.2.3 传递多个参数
url的参数用&连接。
<navigator url="/pages/demo4/demo4?wd=uniapp&author=瑶瑶" open-type="redirect">demo4</navigator>效果
5.3 界面
比如页面提示“操作失败”、“发布成功”等提示信息。
uni.showToast(OBJECT) | uni-app官网
（这里新建一个demo2项目）
5.3.1 交互反馈
5.3.1.1 uni.showToast消息提示框
uni.showToast(OBJECT) | uni-app官网
使用
给图标加了个点击事件，事件处理函数如下
methods: {
clickImg() {
uni.showToast({
title:"感谢使用uniapp"
})
}
}点击图标的效果
默认成功的效果
最低0.47元/天 解锁文章
扫一扫
1109
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
