当前位置:首页>IT那点事>uni-app小程序开发踩坑实录

uni-app小程序开发踩坑实录

一、底部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>
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

给TA打赏
共{{data.count}}人
人已打赏
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
有新私信 私信列表
搜索

本站承接WordPress建站仿站、二次开发、主题插件定制等PHP开发服务!