一、微信小程序路由跳转方式
微信小程序实现跳转的方式有两种方法:
1、使用wx.navigateTo()跳转到应用内非tabbar页面;
//跳转到应用内的其他页面,以index页为例
wx.navigateTo({
url: '/pages/index/index'
})
2、使用wx.switchTab()跳转到tabbar页面。
//跳转到tabBar页面,以user页为例
wx.switchTab({
url: '/pages/user/user'
})
二、微信小程序路由跳转后闪退问题
在微信小程序中,若使用wx.navigateTo()方法进行页面跳转,可能会因为占用资源过多等原因出现闪退问题。一般的解决方法有两个:
1、使用wx.redirectTo()方法进行页面跳转,这样可以减少资源占用。
//跳转到detail页并关闭当前页面
wx.redirectTo({
url: '/pages/detail/detail',
})
2、使用wx.reLaunch()方法重新打开一个应用页面,这样可以清除原来的页面栈。
//跳转到应用首页
wx.reLaunch({
url: '/pages/index/index'
})
三、微信小程序路由跳转到组件
可以使用__displayReporter.showKeyboard()方法跳转到app-service封装的组件。该方法需要三个参数:;
1、name——组件名称;
2、data——组件参数;
3、callback——组件回调函数。
__displayReporter.showKeyboard({
name: 'contact',
data: {
name: 'hello',
phone: '10086'
},
callback: function(ret) {
console.log(ret);
}
})
四、微信小程序路由跳转 返回参数
在调用页面跳转方法时,可以传递一个对象作为参数,该对象可以在目标页面的onLoad生命周期函数中获取到。
//跳转到detail页并传递参数
wx.navigateTo({
url: '/pages/detail/detail?id=1&name=xxx',
})
在detail页面中onLoad生命周期函数中获取该参数:
onLoad: function (options) {
console.log(options.id) //1
console.log(options.name) //xxx
}
五、微信小程序路由跳转带参数
在跳转页面时,可以使用encodeURIComponent()方法进行参数编码,避免特殊字符引起的问题。
var params = {
id: 1,
name: '小程序'
};
var paramStr = '?' + encodeURIComponent(JSON.stringify(params));
wx.navigateTo({
url: '/pages/index/index' + paramStr
});
在跳转后的页面中onLoad生命周期函数中获取该参数:
onLoad: function (options) {
var paramStr = options.query;
var params = JSON.parse(decodeURIComponent(paramStr));
console.log(params.id) //1
console.log(params.name) //小程序
}
六、微信小程序路由跳转报错
在使用页面跳转方法时,可能会因为路径错误、参数错误等原因报错。常见的错误信息有:
1、navigateTo:fail 参数错误:path不能为空或为空字符串或参数错误,请检查后重试。
2、reLaunch:fail 跳转链接不存在,请检查跳转链接是否正确并存在。
3、switchTab:fail 页面(xxxxx)不存在,请检查url是否打错,并且文件是否存在。
对于以上错误,可以通过检查路径、参数是否正确来解决。
七、微信小程序路由跳转传参
可以使用页面栈来实现页面之间的传参。页面栈是一个栈结构,用来存储当前页面和历史页面。
可以使用getCurrentPages()方法获取页面栈数组,数组最后一个元素就是当前页面,倒数第二个元素才是上一个页面。
//跳转到detail页面并传递参数
var params = {
id: 1,
name: '小程序'
};
var pages = getCurrentPages();
var prevPage = pages[pages.length - 2]; //#获取上一个页面实例对象
prevPage.setData({
params: params
});
wx.navigateBack({
delta: 1
});
在detail页面中可以通过onLoad函数获取到上一个页面传递过来的参数:
onLoad: function (options) {
var pages = getCurrentPages();
var prevPage = pages[pages.length - 2];//#上一个页面实例对象
var params = prevPage.data.params;
console.log(params.id) //1
console.log(params.name) //小程序
}
八、小程序路由跳转怎么做
小程序路由跳转可以使用wx.navigateTo()和wx.switchTab()方法,前者跳转到应用内非tabbar页面,后者跳转到tabbar页面。
可以通过getCurrentPages()方法获取页面栈,使用页面栈来实现参数传递。
如果跳转后出现闪退问题,可以使用wx.redirectTo()或wx.reLaunch()方法解决。
如果需要跳转到组件,可以使用__displayReporter.showKeyboard()方法。