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

 

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

 

对于小程序中的跳转，官方文档给出了几种 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=参数&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() 用来进行这类操作。

转载于:https://www.cnblogs.com/VinsonH/p/9210250.html