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

本文转载: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
这个参数有点理解，用另一文章解释：

redirectTo

redirectTo(object)

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

参数：

1、url

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

reLaunch

reLaunch(object)

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

reLaunch
reLaunch(object)

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

参数：

1、url

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

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)

1
2
3
4
5
6
7
8
9
10
11
12

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

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

1
2
3
4
5

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

一、单一参数传递

• 第一个页面跳转代码：

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

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

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

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

<text>第二个页面的测试页</text>
<view> 显示内容：{{name}}</view>
1
2

二、多参数传递

• 第一个跳转页面代码：

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 //此处注意中文符号与引文符号的？
    })
1
2
3
4
5
6
7
8

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

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

• 跳转后的.WXML页面

<!--pages/test2/my.wxml-->
<text>第二个页面的测试页</text>
<view> 显示内容：{{name}}</view>
<view> 显示内容：{{name2}}</view>
<view> 显示内容：{{name3}}</view>
1
2
3
4
5

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

例如：图片

• 第一个.js页面代码

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

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

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

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

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

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