小程序传输参数显示object类型？EventChannel页面通讯如何处理

若用混乱的心看待世界，世界就会变成乱码很多人总想改变世界，从没想过改变自己

原因

小程序数据来自本地json，点击文章列表之后需要给传输多个参数给文章详情页

title: "小程序样子描述", date: "2020年10月03日", cover: "https://cdn.frbkw.com/wp-center/uploads/2022/03/1646562812-20200306.jpg", model: "IOS", wechat: "8.0.22", essay: "https://banner.frbkw.com", images: [ {img: "https://cdn.frbkw.com/wp-center/uploads/2022/04/1650462139-202201202131.jpg"}, {img: "https://cdn.frbkw.com/wp-center/uploads/2022/04/1651050995-202204271717.jpg"} ]

思路

实现目的的效果有很多种，例如最简单的首页文章列表点击传输index索引值。文章界面再次请求json数据找到对应的index索引，但这不是一个有效的方式

直接使用页面路由在url中添加对应的参数

 // 列表点击 listsTap(e){ console.log(e.currentTarget.dataset.info,'文章点击数据') wx.navigateTo({ url: '../details/details?info=' + e.currentTarget.dataset.info, }) }

但是文章详情打开接收数据则显示object

如何传输

1.EventChannel通讯

 EventChannel.emit(string eventName, any args)

我们需要给EventChannel添加2个参数，第一个是通讯名称可以随意，第二个是传输的数据

 // 列表点击 listsTap(e){ console.log(e.currentTarget.dataset.info,'文章点击数据') wx.navigateTo({ url: '../details/details', success: function(res) { // 通过 eventChannel 向被打开页面传送数据 res.eventChannel.emit('yinfengrui', { data: e.currentTarget.dataset.info }) } }) }

 文章详情页先获取事件对象即可得到数据

 onLoad(options) { console.log(options) // 接收eventChannel通讯数据 this.acceptData(); }, acceptData() { //获取事件对象 const eventChannel = this.getOpenerEventChannel() eventChannel.on('yinfengrui', (res)=> { console.log(res.data, '列表传输数据') this.setData({ details:res.data }) }) }

该方式会有一个问题，在使用编译模式下EventChannel通讯他不算启动参数，没有办法单独编译文章详情页面调试（报错：EventChannel函数）

2.JSON数据解析

首页使用JSON.stringify序列化成 一个JSON 字符串的值

 // 列表点击 listsTap(e){ console.log(e.currentTarget.dataset.info,'文章点击数据') var jsondata = JSON.stringify(e.currentTarget.dataset.info) wx.navigateTo({ url: '../details/details?info=' + jsondata }) }

文章详情页面JSON.parse格式字符串转换为js对象

 onLoad(options) { var datas = JSON.parse(options.info) console.log(datas) },

这样操作在小程序编译模式下会有启动参数，因为转义符的情况下也不是很友好

总结

学习成长+1

头发数量-0

感悟

EventChannel通讯是学习的一个小知识点，只有不断学习才能在生活中发现阳光的灼热