小程序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 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

小程序wx.navigateTo简单封装和运用的相关文章

小程序 wx.navigateTo和 wx.redirectTo区别

wx.navigateTo 官方解释: 意思就是说. A页面跳转B页面 B页面做了操作,点击保存,再跳转回A页面 此时,如果点击左上返回按钮,仍然可以跳转回B页面,而且里面的数据是操作之前的数据 wx.redirectTo 官方解释: 意思是说. A页面跳转B页面 B页面做了操作,点击保存,再跳转回A页面 此时点击左上角返回按钮,已经不能跳转回操作前的B页面了. 原文地址:https://www.cnblogs.com/chenrunxuan/p/11294650.html

监控微信小程序wx.request请求失败

在微信小程序里,与后台服务器交互的主要接口函数是wx.request(),用于发起 HTTPS 网络请求.其重要性不言而喻.然而,却经常遇到请求失败的问题,笔者特意谷歌"wx.request 请求失败",可以搜索到很多相关的文章,下面列出一些: wx.request 失败| 微信开放社区 微信小程序 wx.request 请求失败- SegmentFault 思否 小程序部分机型小程序用户无法发起 wx.request 请求,网络错误问题 ... wx.request()失败,requ

***小程序wx.getUserInfo不能弹出授权窗口后的解决方案

微信更新api后,wx.getUserInfo在开发和体验版本都不能弹出授权窗口.微信文档说明: 注意:此接口有调整,使用该接口将不再出现授权弹窗,请使用 <button open-type="getUserInfo"></button> 引导用户主动进行授权操作 当用户未授权过,调用该接口将直接报错 当用户授权过,可以使用该接口获取用户信息 对此,给出以下解决方案. wx.getUserInfo({ withCredentials: true, success

微信应用号小程序wx.sendSocketMessage(OBJECT)

微信应用号小程序wx.sendSocketMessage(OBJECT) wx.sendSocketMessage(OBJECT) ? 通过WebSocket连接发送数据,需要先wx.connectSocket,并在wx.onSocketOpen回调之后才能发送. OBJECT参数说明: 参数 类型 必填 说明 data String 是 需要发送的内容 示例代码: var socketOpen = false; var socketMsgQueue = [] wx.connectSocket(

微信应用号小程序wx.onSocketOpen(CALLBACK)

微信应用号小程序wx.onSocketOpen(CALLBACK) wx.onSocketOpen(CALLBACK) ? 监听WebSocket连接打开事件 示例代码: wx.connectSocket({ url:"qkxue.net" }); wx.onSocketOpen(function(res){ console.log("WebSocket连接已打开!") })稿源:勤快学QKXue.NET

微信应用号小程序wx.onSocketError(CALLBACK)

微信应用号小程序wx.onSocketError(CALLBACK) wx.onSocketError(CALLBACK) ? 监听WebSocket错误 示例代码: wx.connectSocket({ url:"qkxue.net" }); wx.onSocketOpen(function(res){ console.log("WebSocket连接已打开!") }) wx.onSocketError(function(res){ console.log(&qu

微信小程序 wx:key详细介绍

转自:http://www.jb51.net/article/95980.htm 微信小程序 wx:key 在自己学习的时候不是多明白到底是怎么回事,经过上网查阅资料,整理下: 个人感觉官方给出的例 子不是很明确,官方解释如下: wx:key 如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如 <input/> 中的输入内容,<switch/> 的选中状态),需要使用 wx:key 来指定列表中项目的唯一的标识符. wx:key

微信小程序wx.request接口

微信小程序wx.request接口 wx.request是小程序客户端与服务器端交互的接口 HTTPS 请求 一个微信小程序,只能同时(同时不能大于5个)有5个网络请求 wx.request(OBJECT) 发起网络请求 url data header method dataType wx.request({ url: 'test.php', //仅为示例,并非真实的接口地址 data: { x: '' , y: '' }, header: { 'content-type': 'applicat

小程序api请求层封装(Loading全局配置)

前言 小程序开发,没有vue中的axios那么好使,请求层的封装需要自己来搞. 当然请求层的配置少不了loading,这里索性也就将loading做一个配置,避免以后重复造轮子 请求封装 小程序中有封装好的请求方法:wx.request(url,method,header,success,fail,complete);方法类似于原生的ajax, 这里我们大的方面分两种,一种普通请求,一种是文件上传 普通请求又分为get请求,post请求,post请求又分为JSON格式和BODY格式因此 我们需要