微信小程序js跳转页面-微信小程序如何实现页面间传递数据(页面间通信)-起源网创项目

微信小程序js跳转页面-微信小程序如何实现页面间传递数据(页面间通信)

一、问题描述

最近用原生写微信小程序，涉及页面间数据传递问题，A页跳转B页传参时可以通过跳转url拼接要传递的参数，如果传递参数很长很复杂，拼接显然不合适，况且，若再从B页面跳转回A页面，又如何传递数据？？？

之前用uniapp写的微信小程序js跳转页面，关于页面间的通信uniapp有多种方法，常用方法一：是使用store来实现页面间的数据传递，常用方法二：使用uniapp封装好的全局自定义事件监听器（$emit, $on, $once）

那么微信小程序js跳转页面，原生的微信小程序使用什么实现呢？

看下官网的说法：

分析下wx.navigateTo的参数，着重看红线框部分：

二、代码实例

A页面js部分

const app = getApp()Page({  data:{    return:{      dataAObj:{}    }  },  jump: function () {    const self = this    wx.navigateTo({      url: './pageb',      events: {        //** 接收B页面传过来的数据  **//        acceptDataFromPageB: function (data) {          console.log(data)          self.setData({            dataAObj:data          })        },      },      success: function (res) {        //** 向B页面传参  **//        res.eventChannel.emit('acceptDataFromPageA', { data: 'I am a message from pageA' })      }    })  },})

B页面js部分

let eventChannel = null;Page({  data:{    return:{      dataObj:{}    }  },  onLoad: function (option) {    const self = this;    eventChannel = this.getOpenerEventChannel();    //** 监听acceptDataFromPageA事件，获取从A页面传过来的数据  **//    eventChannel.on('acceptDataFromPageA', function (data) {      self.setData({        dataObj:data      })    })  },  jumpBack: function() {    //** 触发acceptDataFromPageB事件，向A页面传递数据 **//    eventChannel.emit('acceptDataFromPageB', { data: 'I am a message from pageB' });    wx.navigateBack({      delta:1    })  }})