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

文章目录

      • 页面跳转有四种方式
      • wx.navigateTo(object)
      • redirectTo
      • reLaunch
      • wx.switchTab
      • 一、单一参数传递
      • 二、多参数传递
      • 三、带参数传参长度超过限制被截取时,需要使用encode ,

本文转载: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}}

微信小程序之页面带参跳转_第1张图片

二、多参数传递

  • 第一个跳转页面代码:
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}}

微信小程序之页面带参跳转_第2张图片

三、带参数传参长度超过限制被截取时,需要使用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

你可能感兴趣的:(小程序,微信小程序,小程序,javascript)