刚接触小程序,页面跳转一般是最先遇到的一种需求之一。
对于小程序中的跳转,官方文档给出了几种 api 来根据不同场景,实现业务需求。
这是针对 wx.navigateTo 来写的一片文章。
微信小程序官方api文档给出的wx.navigateTo方法是通过拼接url的方式进行参数传递。造成参数传递很不方便(个人感觉不习惯)。
wx.navigateTo(OBJECT)
保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面。
因为太不方便,所以稍微进行了一点封装,效果如下。
官方示例:
wxwx.navigateTo({.navi url: 'test?id=1'})
如果多参数:
wx.navigateTo({url: 'test?params1=参数¶ms2=20?'})
封装后:
var params = {var params1 = "参数"var params2 = "20"}navigation.navigateTo("pages/second", params);
封装跳转传递参数方式:
话不多说,上代码!
// nivigation.js export const navigation = {navigateTo,}// 保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面function navigateTo(url, params = {}) {let mergeUrl = url + '?' + toQueryString(params)// 判断字符串 第一个字符是不是 "/" 没有就加上if (getStringFirstChat(mergeUrl) !== "/") {mergeUrl = "/" + mergeUrl;}wx.navigateTo({url: mergeUrl});}// 获取字符串 前1个字符function getStringFirstChat(string = "") {return string.substr(0, 1)}// 参数从对象转为字符串export function toQueryString(obj) {var ret = [];for (var key in obj) {key = encodeURIComponent(key);var values = obj[key];if (values && values.constructor == Array) {//数组var queryValues = [];for (var i = 0, len = values.length, value; i < len; i++) {value = values[i];queryValues.push(toQueryPair(key, value));}ret = ret.concat(queryValues);} else { //字符串ret.push(toQueryPair(key, values));}}return ret.join('&');}
实际运用:
first.js
import { navigation } from './navigation';//传递var params = {var params1 = "参数"var params2 = "20"}navigation.navigateTo("pages/second", params);
second.js
// 取值onLoad(options) {let { params1, params2 } = options;console.// 取值 o log("获取到的参数:","params1:",params1,"params2:",params2);/* 或写成console.log("获取到的参数:","params1:", options.params1,"params2:", options.params2);*/}
参数中包含对象:
first.js
//跳转
import { navigation } from './navigation';let objData = {id: 13339, name: "jack", age: 25, is_student: true}navigation.navigateTo("pages/second", {stu_data: JSON.stringify(objData),from_page: "first_page",});
second.js
// 取值onLoad(options) {onLoad(op let { stu_data, from_page } = options;_stu_data = JSON.parse(decodeURIComponent(stu_data));console.log("接收到的数据:","_stu_data:", _stu_data,"from_page:", from_page);}
redirectTo、reLaunch 跟 navigateTo 类似,
只有 switchTab 略微不一样:
// 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面function switchTab(page) {let url = page;// 判断字符串 第一个字符是不是 "/" 没有就加上if (getStringFirstChat(page) !== "/") url = "/" + page;wx.switchTab({url: url})}
对了,最后提醒一下: wx.navigateTo 和 wx.redirectTo 不能跳转到tabBar中的页面。
当然,如果你用 这两个方法写,可能会跳转不过去。
官方提供了API: wx.switchTab() 用来进行这类操作。