微信小程序之页面带参跳转

本文转载:https://blog.csdn.net/generallizhong/article/details/117773615

页面跳转有四种方式

分别为wx.navigateTo、wx.redirectTo、wx.reLaunch、wx.switchTab，前面三种可通过url路径携带参数实现参数传递，如

wx.navigateTo(object)

保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。

参数：

1、url

• 需要跳转的应用内非 tabBar 的页面的路径 (代码包路径), 路径后可以带参数。参数与路径之间使用 ? 分隔，参数键与参数值用 = 相连，不同参数用 & 分隔；如 ‘path?key=value&key2=value2’

2、event
这个参数有点理解，用另一文章解释：

属性	类型	默认值	必填	说明
pageId	string	''	是	页面 ID
packageName	string	''	否	子应用名称
params	object	{}	否	query object 对象
events	Object	{}	否	页面间通信接口，用于监听被打开页面发送到当前页面的数据。基础库 2.7.3 开始支持。微信 API 参看 只支持小程序
success	function	无	否	接口调用成功的回调函数，只支持小程序
fail	function	无	否	接口调用失败的回调函数 只支持小程序
complete	function	无	否	接口调用结束的回调函数（调用成功、失败都会执行） 只支持小程序

redirectTo

redirectTo(object)

关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。

参数：

1、url

• 需要跳转的应用内非 tabBar 的页面的路径 (代码包路径), 路径后可以带参数。参数与路径之间使用 ? 分隔，参数键与参数值用 = 相连，不同参数用 & 分隔；如 ‘path?key=value&key2=value2’

属性	类型	默认值	必填	说明
pageId	string	''	是	页面 ID
packageName	string	''	否	子应用名称
params	object	{}	否	query object 对象
events	Object	{}	否	页面间通信接口，用于监听被打开页面发送到当前页面的数据。基础库 2.7.3 开始支持。微信 API 参看 只支持小程序
success	function	无	否	接口调用成功的回调函数，只支持小程序
fail	function	无	否	接口调用失败的回调函数 只支持小程序
complete	function	无	否	接口调用结束的回调函数（调用成功、失败都会执行） 只支持小程序

reLaunch

reLaunch(object)

关闭所有页面，打开到应用内的某个页面（因浏览器限制，Web 下能后退页面）。

reLaunch
reLaunch(object)

关闭所有页面，打开到应用内的某个页面（因浏览器限制，Web 下能后退页面）。

参数：

1、url

• 需要跳转的应用内页面路径 (代码包路径)，路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如 ‘path?key=value&key2=value2’

属性	类型	默认值	必填	说明
pageId	string	''	是	页面 ID
packageName	string	''	否	子应用名称
params	object	{}	否	query object 对象
events	Object	{}	否	页面间通信接口，用于监听被打开页面发送到当前页面的数据。基础库 2.7.3 开始支持。微信 API 参看 只支持小程序
success	function	无	否	接口调用成功的回调函数，只支持小程序
fail	function	无	否	接口调用失败的回调函数 只支持小程序
complete	function	无	否	接口调用结束的回调函数（调用成功、失败都会执行） 只支持小程序

wx.switchTab

wx.switchTab(object)

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

而通过wx.switchTab跳转到tabBar页面时，无法采用上面方式传递参数，可用如下两种解决方法：

• 第一种，通过app.js全局变量传递参数

//app.js中
globalData: {
    info:null,
    userInfo: null
  }
//在传递参数的页面js文件中
const app=getApp()  
app.globalData.info="info"
//在接收参数的页面js文件中
const app=getApp()  
console.log('通过app.js全局变量传递参数',app.globalData.info)

• 第二种，通过缓存传递参数

//在传递参数的页面文件js中
wx.setStorageSync('info', info)
//在接收参数的页面文件js中
console.log('通过缓存传递参数',wx.getStorageSync('info'))

页面跳转参数传递有很多中方式，这里只说一种非常简单的。

一、单一参数传递

• 第一个页面跳转代码：

  Click: function () {
    console.log("我来啦")
    let name = '传递的数据'; // 跳转传参的参数
    wx.navigateTo({ //在接收页面的url后面加上“？自定义名称=字符串”就可以通过url传值
      url: '../test2/my?name=' + '我就是要传递的数据'//此处注意中文符号与引文符号的？
    })

• 第二个.JS页面的接收代码：

/**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
        console.log(options.name)
        this.setData({// 把从index页面获取到的属性值赋给详情页的my，供详情页使用
          name:options.name
        })
      
  },

• 在第二个WXML页面渲染出数据

第二个页面的测试页
 显示内容：{{name}}

二、多参数传递

• 第一个跳转页面代码：

Click: function () {
    console.log("我来啦")
    var name = '传递的数据'; // 跳转传参的参数
    var name2 = '传递的数据2';
    var name3 = '传递的数据3';
    wx.navigateTo({ //在接收页面的url后面加上“？自定义名称=字符串”就可以通过url传值
      url: '../test2/my?name=' + name + "&name2=" + name2+ "&name3=" + name3 //此处注意中文符号与引文符号的？
    })

• 跳转后的.JS页面中接收

/**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
        console.log(options.name)
        this.setData({// 把从index页面获取到的属性值赋给详情页的my，供详情页使用
          name:options.name,
          name2:options.name2,
          name3:options.name3
        })      
  },

• 跳转后的.WXML页面

第二个页面的测试页
 显示内容：{{name}}
 显示内容：{{name2}}
 显示内容：{{name3}}

三、带参数传参长度超过限制被截取时，需要使用encode ,

例如：图片

• 第一个.js页面代码

// xxxx是跳转传照片的数组，先转字符串，再encode
let xxxx = posters.toString()
console.log( encodeURIComponent(xxxx))
wx.navigateTo({
  url: '../test2/my?posters=' + encodeURIComponent(xxxx)
})

• 第二个.js页面接收代码

// onload接收传参数据
onLoad: function (options) {
    let xxxx = decodeURIComponent(options.posters) // 先decode再把字符串转数组
    let photo = xxxx.split(",");
    console.log(photo)
    this.setData({
      photo: photor
    })
  },

• 四、switchTab无法携带参数跳转

wx.switchTab({
  url: '../test2/my'
})

微信开放社区大佬的解释：https://developers.weixin.qq.com/community/develop/article/doc/00000453df06f07a5c8d91ef856c13