微信小程序如何实现页面传参和页面传递多个参数

前言

只要你的小程序超过一个页面那么可能会需要涉及到页面参数的传递,下面我总结了 4 种页面方法。

下面时多个参数页面传参的方式

let love=JSON.stringify(this.data.totle);
    let you=JSON.stringify(this.data.totleId)
    let csdn=JSON.stringify(this.data.totlePrice)
    wx.navigateTo({
      url: '/pages/fly/fly?totle='+love+'&totleid='+you+'&totleprice='+csdn,
    })

路径传递

通过在url后面拼接参数,参数与路径之间使用 ? 分隔,参数键与参数值用 = 相连,不同参数用 & 分隔;如 'path?key=value&key2=value2'。

案例:A页面带参数跳转到B页面

A页面跳转代码

goB(){
    wx.navigateTo({
      url: '/pages/B/index?id=value',
    })
  },

B页面接收代码

onLoad: function (options) {
	console.log('id', options.id)
}

上面的案例是字符串参数,但是很多情况下需要传递对象,如下方代码。

Page({
  data: {
    userInfo:{
      name:'cym',
      age:16
    }
  },
  goB(){
    wx.navigateTo({
      url: '/pages/B/index?id='+this.data.userInfo,
    })
  },
})

如果使用上面同样的方式结构,输出的结果是:[object Object]

这个时候需要先把对象通过JSON.stringify(obj)将 object 对象转换为 JSON 字符串进行参数传递,再到接收页面通过JSON.parse解析使用。

A页面跳转代码

 goB(){
    let userStr = JSON.stringify(this.data.userInfo)
    wx.navigateTo({
      url: '/pages/B/index?id='+userStr,
    })
  }

B页面接收代码

onLoad: function (options) {
    console.log('id', JSON.parse(options.id))
  }

全局变量

通过App全局对象存放全局变量。

app.js代码

App({
 // 存放对象的全局变量
  globalData:{},
})

A页面跳转代码

// 获取App对象
const app = getApp()
Page({
  /**
   * 页面的初始数据
   */
  data: {
    userInfo: {
      name: 'cym',
      age: 16
    }
  },

  goB() {
    app.globalData.userInfo = this.data.userInfo
    wx.navigateTo({
      url: '/pages/B/index',
    })
  },
})

B页面接收代码

// 获取全局对象
 const app = getApp()
Page({

  onLoad: function (options) {
    console.log(app.globalData.userInfo)
  }
})

存放在 App 全局变量里面,可以被多个页面使用,直接从 App 对象获取即可。这个数据是保持在内测中,每次小程序销毁就没有了。

数据缓存

通过存储到数据缓存中。

A页面跳转代码

goB() {
    wx.setStorageSync('userInfo', this.data.userInfo)
    wx.navigateTo({
      url: '/pages/B/index',
    })
  }

B页面接收代码

onLoad: function (options) {
    let userInfo = wx.getStorageSync('userInfo', this.data.userInfo)
    console.log(userInfo)
  }

存放在数据缓存里面,可以被多个页面使用,直接用 getStorageSync 获取即可。这个数据是保持在数据缓存中,除非清楚数据缓存或者删除小程序否则一直存在。

事件通信

通过事件通信通道。

A页面跳转代码

goB() {
    wx.navigateTo({
      url: '/pages/B/index',
      success:(res)=>{
				// 发送一个事件
				res.eventChannel.emit('toB',{ userInfo: this.data.userInfo })
			}
    })
  }

B页面接收代码

onLoad: function (options) {
     //	获取所有打开的EventChannel事件
     const eventChannel = this.getOpenerEventChannel();
     // 监听 index页面定义的 toB 事件
     eventChannel.on('toB', (res) => {
       console.log(res.userInfo) 
     })
   }

总结

大家可以针对具体业务场景来进行选择合适自己的传参方式。

相关推荐
dccose2 小时前
vue3 uniapp 扫普通链接或二维码打开小程序并获取携带参数
小程序·uni-app
尘浮生8 小时前
Java项目实战II基于微信小程序的校运会管理系统(开发文档+数据库+源码)
java·开发语言·数据库·微信小程序·小程序·maven·intellij-idea
尘浮生12 小时前
Java项目实战II基于微信小程序的电影院买票选座系统(开发文档+数据库+源码)
java·开发语言·数据库·微信小程序·小程序·maven·intellij-idea
HerayChen15 小时前
微信小程序混合 h5 wx.miniProgram是 undefined
微信小程序·小程序·h5
耶啵奶膘19 小时前
uniapp+vue2全局监听退出小程序清除缓存
小程序·uni-app
中云DDoS CC防护蔡蔡1 天前
微信小程序被攻击怎么选择高防产品
服务器·网络安全·微信小程序·小程序·ddos
井眼1 天前
微信小程序-prettier 格式化
微信小程序·小程序
qq_17448285751 天前
springboot基于微信小程序的旧衣回收系统的设计与实现
spring boot·后端·微信小程序
wqq_9922502771 天前
springboot基于微信小程序的食堂预约点餐系统
数据库·微信小程序·小程序