>>跟着b站up主“咸虾米_”学习微信小程序开发中,把学习记录存到这方便后续查找。
一、跳转
1、方法一:组件
组件-导航-navigator
<navigator url="/pages/demo/demo?id=123" open-type="reLaunch">
go demo page
</navigator>
如果跳转目标页面已经在app.json的tabBar中,则open-type不能设置为“redirect”,因为会跳转失败。而上一个实验已经将demo页面加入到tabBar中了,所以这里open-type要用其他值,如reLaunch或switchTab。
一般用reLaunch,open-type设置为reLaunch可以携带参数,如上图。但是设置成switchTab就会显示“空”。
2、方法二:API
https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.reLaunch.html
2.1 API-路由-wx.reLaunch
关闭所有页面,打开到应用内的某个页面。
index.wxml文件中添加
<view
bindtap="goDemo"
style="width: 100rpx;height: 100rpx;background: #EEEBAA;">
<view>
<text></text>
</view>
<view>
</view>
</view>
在组件中先用bindTap绑定一个事件处理函数goDemo,然后在.js文件里写函数处理方法,即如何跳转到demo页面,如下:
index.js中添加
goDemo(){
wx.reLaunch({
url: '/pages/demo/demo'
})
},
2.2 API-路由-wx.navigateTo
保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。
index.wxml文件不变。index.js文件中改为如下代码
goDemo(){
wx.navigateTo({
url: '/pages/api/api',
})
},
上面代码实现了从index页面跳转到api页面,如果要自动回到index页面,可以在api的.js文件的onload中添加定时器,2s后会自动跳转回上一个页面,代码如下
onLoad(options) {
setTimeout(()=>{wx.navigateBack()},2000) /*定时器,两秒后返回上一个页面 */
}