1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 小程序wx.navigateTo 跳转页面 简单封装和运用

小程序wx.navigateTo 跳转页面 简单封装和运用

时间:2020-06-25 23:50:20

相关推荐

小程序wx.navigateTo 跳转页面 简单封装和运用

刚接触小程序,页面跳转一般是最先遇到的一种需求之一。

对于小程序中的跳转,官方文档给出了几种 api 来根据不同场景,实现业务需求。

这是针对 wx.navigateTo 来写的一片文章。

微信小程序官方api文档给出的wx.navigateTo方法是通过拼接url的方式进行参数传递。造成参数传递很不方便(个人感觉不习惯)。

wx.navigateTo(OBJECT)

保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面。

因为太不方便,所以稍微进行了一点封装,效果如下。

官方示例:

wxwx.navigateTo({.navi url: 'test?id=1'})

如果多参数:

wx.navigateTo({url: 'test?params1=参数&params2=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() 用来进行这类操作。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。