一、底部tabBar
在使用 uni-app 开发小程序时,底部菜单栏(即 tabBar)的页面路径确实存在一些限制,其中最显著的一点就是不支持带参数的路径。其背后原因主要涉及到小程序平台和框架本身的设计约束,具体原因和细节如下:
1. 小程序平台的限制
小程序平台(如微信小程序、支付宝小程序等)对于 tabBar 页面有严格的要求:
- 静态配置:tabBar 页面需在全局配置文件(如微信小程序的 app.json)中预先定义。所有 tabBar 页面路径在编译和运行时都必须确定,不能动态改变或附带参数。
- 固定路由:由于 tabBar 页面路径是固定的,平台不支持在启动 tabBar 页面的同时附带 URL 参数。这是平台设计的限制,以确保导航栏的稳定性和一致性。
2. uni-app 和配置文件限制
- 路由设计:在
uni-app
中,底部菜单栏的页面被视为独立且固定的页面集,通常在pages.json
或各平台特有的配置文件中进行声明。这些页面的路径在编译期就已确定,因此无法在路径上动态加入参数。 - 参数传递:对于需要参数传递的场景,推荐在页面加载后通过其他方式(如全局状态管理、缓存、本地存储或通过请求接口获取数据)来获取所需的动态数据,而不是依赖 URL 参数。
3. 设计理念和实现限制
- 导航一致性:tabBar 导航的设计初衷是提供一致性和稳定性,确保用户在不同状态下进入同一个页面时能获得相似的体验。允许路径带参数可能导致页面状态不一致或出现意外行为。
- 技术实现难度:支持动态参数可能需要更复杂的路由管理和状态保持机制,这与 tabBar 固有的简单和固定结构不符。
4. 通过中间页以及自定义头部nav实现方法
比如要跳转的某一分类下,就在对应分类文件目录下创建一个activities.vue
中间页文件
activities.vue
<template>
<view>加载中...</view>
</template>
<script>
export default {
onTabItemTap(item) {
uni.redirectTo({
url: '/pages/post/category?id=19'
})
}
}
</script>
<style scoped>
</style>
pages.json
创建一个对应的路由
{
"path": "pages/post/activities",
"style": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "活动",
"enablePullDownRefresh": true,
"onReachBottomDistance": 60
}
},
// tabBar 添加对应的路由
{
"pagePath": "pages/post/activities",
"iconPath": "static/icon/huodong.png",
"selectedIconPath": "static/icon/huodong-fill.png",
"text": "活动"
}
// 把分类的路由开启自定义nav
{
"path": "pages/post/category",
"style": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "文章分类",
"enablePullDownRefresh": true,
"onReachBottomDistance": 60,
"navigationStyle": "custom" // 自定义头部nav
}
}
二、小程序中的链接跳转至内链
可以通过中间页的<web-view></web-view>
来展示外链内容,但前提需要将网址添加到小程序的白名单里,随后在pages添加webview.vue
文件
webview.vue
<template>
<view>
<web-view :src="extraUrl"></web-view>
</view>
</template>
<script>
export default {
data() {
return {
extraUrl: ''
}
},
onLoad(options) {
this.extraUrl = decodeURIComponent(options.url); // 如果有特殊字符,比如/?exhibition_form_id=1,则需要解码
}
}
</script>
在需要跳转的按钮处,添加方法toPath()方法,该方法接收一个url的参数,传递到webview
中,例如:
<a @click="toPath('https://abcd.com/?exhibition_form_id=1')" >外链内容</a>
<script>
export default {
data() {
},
methods: {
toPath(path) {
const encodedPath = encodeURIComponent(path); // 如果有特殊符号,则需要使用encodeURIComponent进行编码,然后在webview页面接收链接时在进行解码
uni.navigateTo({
url: `/pages/webview/webview?url=${encodedPath }`,
});
}
}
}
</script>
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。