我要评论
文章目录
微信底部如果用的是系统自动的
tabbar，也就是在
app.json中配置的底部路由：
// app.json
{
"tabbar": {
"list": [{
"pagepath": "pages/index/index",
"text": "首页"
},{
"pagepath": "pages/me/me",
"text": "个人中心"
}]
}
}
需要注意以下两个问题：
一、跳转链接时，不能使用navigator标签、 wx.navigateto、wx.redirectto方法跳转页面
比如，个人中心是tabbar，使用<navigator url="/pages/me/me">个人中心</navigator>跳转时，无法跳转，也不会给任何提示。
如果在普通标签上使用wx.navigateto跳转到任意tabbar页面,则会报错：
error: miniprogramerror
{"errmsg":"navigateto:fail can not navigateto a tabbar page"}
使用wx.redirectto也会报同样的错误：
waservicemaincontext.js:2 error: miniprogramerror
{"errmsg":"redirectto:fail can not redirectto a tabbar page"}
问题解决：
可以使用如下两个方法：
1、wx.switchtab(object object)
作用：跳转到tabbar页面，并关闭其他所有非 tabbar 页面。
参数：
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| url | string | 是 | 需要跳转的 tabbar 页面的路径 (代码包路径)（需在 app.json 的 tabbar字段定义的页面），路径后不能带参数。 | |
| success | function | 否 | 接口调用成功的回调函数 | |
| fail | function | 否 | 接口调用失败的回调函数 | |
| complete | function | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） |
用法：
wx.switchtab({
url: '/pages/me/me'
})
官方文档：https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.switchtab.html
但这样的缺点是，无法携带参数给tabbar页面。如果需要携带参数过去，可以用如下方法。
2、wx.relaunch(object object)
作用：关闭所有页面，打开到应用内的某个页面
参数：
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| url | string | 是 | 需要跳转的应用内页面路径 (代码包路径)，路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如 ‘path?key=value&key2=value2’ | |
| success | function | 否 | 接口调用成功的回调函数 | |
| fail | function | 否 | 接口调用失败的回调函数 | |
| complete | function | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） |
用法(可以携带url参数)：
wx.relaunch({
url: '/pages/me/me?id=1'
})
me页面
// test
page({
onload (option) {
console.log(option.id)
}
})
二、不能用常规的方式给tabbar的页面传递参数
比如在tabbar的页面的onload钩子函数是接收不到其他页面携带过来的option参数的。
问题解决：
可以使用如下两个方法：
1、用前面提到的wx.relaunch(object object)方法进行传递
2、使用本地存储方法实现
即在a页面用wx.setstorage将想要传递的参数存到内存中去 , 在b页面（tabbar页面）中直接用wx.getstorage取出内存中取出。
如果你在web前端开发、面试、前端学习路线有困难可以加我v：imqdcnn。免费答疑，行业深潜多年的技术牛人帮你解决bug。
祝你能成为一名优秀的web前端开发工程师！
发表评论