刚接触小程序,页面跳转一般是最先遇到的一种需求之一。
对于小程序中的跳转,官方文档给出了几种 api 来根据不同场景,实现业务需求。
这是针对 wx.navigateTo 来写的一片文章。
微信小程序官方api文档给出的wx.navigateTo方法是通过拼接url的方式进行参数传递。造成参数传递很不方便(个人感觉不习惯)。
wx.navigateTo(OBJECT)
保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面。
参数 | 类型 | 必填 | 说明 |
---|---|---|---|
url | string | 是 | 需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;如 ‘path?key=value&key2=value2‘ |
success | Function | 否 | 接口调用成功的回调函数 |
fail | Function | 否 | 接口调用失败的回调函数 |
complete | Function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
因为太不方便,所以稍微进行了一点封装,效果如下。
官方示例:
wxwx.navigateTo({ .navi url: ‘test?id=1‘ })
如果多参数:
wx.navigateTo({ url: ‘test?params1=参数¶ms2=20?‘ })
封装后:
var 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() 用来进行这类操作。
原文地址:https://www.cnblogs.com/VinsonH/p/9210250.html
时间: 2024-11-06 09:45:09