小程序传输参数显示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通讯是学习的一个小知识点，只有不断学习才能在生活中发现阳光的灼热