微信小程序页面之间传递数据

使用路由传递数据:

跳转时将数据使用 ? 拼接在 URL 后面;在另一个页面的 onLoad() 方法的参数中即可获取到传递的参数。

微信小程序对路由传参的大小有限制。

接收数据的页面获取到的都是字符串。也就是说,即使传递数据的页面传递的参数是布尔值或者数值,到了接收数据的页面获取到的也都是字符串。

如果数据中有 ? 等特殊字符,微信会做截取。
解决方法:利用 encodeURIComponent() 和 decodeURIComponent() 对要传递的数据进行编解码。

// 传递数据的页面
const selectData = encodeURIComponent(this.data.path);
wx.redirectTo({
   url: `../order/order?path=${path}`
})

// 接收数据的页面
onLoad(options){
	const path = decodeURIComponent(options.path);
}

如果将对象类型的数据拼接在路径后面,到另一个页面获取时会发现是 "[object,object]",无法使用。
解决方法:利用 JSON.stringify()JSON.parse()

// 传递数据的页面
const selectData = JSON.stringify(this.data.selectData);
wx.redirectTo({
   url: `../order/order?selectData=${selectData}`
})

// 接收数据的页面
onLoad(options){
	const selectData = JSON.parse(options.selectData);
}
// 传递数据的页面
wx.navigateTo({
     url: `../select/select?id=${id}`,
})

// 接收数据的页面
onLoad(options){
	const id = options.id;
}

使用 wx.navigateTo() 中的 EventChannel 传递数据:

上一页面向被打开页面传递数据:
// 上一页面
wx.navigateTo({
    url: '../about-us/about-us',
    success: function(res) {
      // 通过 eventChannel 向被打开页面传送数据
      res.eventChannel.emit('event1', { isFromPrevPage: true })
    }
})
// 被打开页面
const eventChannel = this.getOpenerEventChannel()
  // 通过 eventChannel 获取上一页面传递到当前页面的数据
  eventChannel.on('event1', function(data) {
    console.log(data)
})

被打开页面向上一页面传递数据:

// 上一页面
wx.navigateTo({
    url: '../about-us/about-us',
    events: {
      // 通过 eventChannel 获取被打开页面传送到当前页面的数据
      event1: function(data) {
        console.log(data)
      },
    },
})
// 被打开页面
const eventChannel = this.getOpenerEventChannel()
// 通过 eventChannel 向上一页面传递数据
eventChannel.emit('event1', {isFromNextPage: true});

回退页面时给上一级页面传递数据,还可以直接获取到页面实例后设置 data 数据。但是目前这种方式已经不太常用了。
请添加图片描述

使用本地存储传递数据:

// 传递数据的页面
wx.setStorageSync('id', 1)

// 接收数据的页面
wx.getStorageSync('id')

使用全局变量传递数据:

  1. app.js 中将数据存储为全局变量。
  2. 在需要使用的页面通过getApp().变量名 获取。
// app.js
App({
	globalData:{
		id: 1
	}
})

// index.js
const app =  getApp()
const id = app.globalData.id
  • 8
    点赞
  • 53
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
微信小程序页面之间可以通过以下方式传递数据: 1.通过页面跳转时的参数传递: 在跳转页面时可以通过url的query参数传递数据,例如: ```js wx.navigateTo({ url: '/pages/detail/detail?id=123', }) ``` 在目标页面的onLoad生命周期中可以通过options对象获取到传递的参数: ```js onLoad: function (options) { console.log(options.id) // 123 } ``` 2.通过全局变量传递: 在app.js文件中定义全局变量,例如: ```js App({ globalData: { userInfo: null } }) ``` 在需要传递数据页面中可以通过 getApp() 方法获取到 app 实例,然后通过修改全局变量的方式传递数据,例如: ```js getApp().globalData.userInfo = { name: 'xxx', age: 20 } ``` 在目标页面中通过 getApp() 方法获取到 app 实例,然后获取到全局变量中的数据,例如: ```js var userInfo = getApp().globalData.userInfo console.log(userInfo.name) // xxx console.log(userInfo.age) // 20 ``` 3.通过事件监听传递: 在需要传递数据页面中可以通过 wx.eventEmitter 定义一个事件触发器,例如: ```js const eventEmitter = require('../../utils/eventEmitter.js') Page({ data: { name: 'xxx' }, onTap() { eventEmitter.emit('nameChanged', this.data.name) } }) ``` 在目标页面中可以通过 wx.eventEmitter 监听事件,例如: ```js const eventEmitter = require('../../utils/eventEmitter.js') Page({ data: { newName: '' }, onLoad() { eventEmitter.on('nameChanged', (name) => { this.setData({ newName: name }) }) } }) ``` 以上三种方式都可以实现小程序页面之间的数据传递。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值