小程序页面间数据的共享和交互

解决问题：页面A路由到页面B，实现AB两个页面的数据交互及共享

通用方法：

任何更换页面的方法都可以使用。

一：利用带参数的url

如进入B页面：./B?mydata=’111’

在B页面中的onLoad函数中就可以使用mydata：

onLoad: function (options) {

    var yourdata = options.mydata;

}

二：利用缓存

也就是使用这两个函数：wx.setStorageSync/wx.getStorageSync

三：利用全局变量

首先在app.js中定义全局变量mydata

var app = getApp();//在任何页面都可调用

var yourdata = app.globalData.mydata;//这样就可以使用了

 

使用wx.navigateTo方式更换页面时：

一：直接利用缓存的页面

let pages = getCurrentPages(); //获取当前页面js里面的pages里的所有信息。

//let curPage = pages[pages.length - 1]; //当前页面

let prevPage = pages[pages.length - 2];//上一个页面

      console.log(prevPage)

      prevPage.setData({ // 将我们想要传递的参数在这里直接setData。上个页面就会执行这里的操作。

        页面A的参数: e.currentTarget.dataset.current,

      })

      wx.navigateBack({

        delta: 1 // 返回上一级页面。

      })

二：利用数据通道EventChanel

wx.navigateTo({

  url: 'test?id=1',

  events: {

    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据

    acceptDataFromOpenedPage: function(data) {

      console.log(data)

    },

    someEvent: function(data) {

      console.log(data)

    }

    ...

  },

  success: function(res) {

    // 通过eventChannel向被打开页面传送数据

    res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })

  }

})

//test.js

Page({

  onLoad: function(option){

    console.log(option.query)

    const eventChannel = this.getOpenerEventChannel()

    eventChannel.emit('acceptDataFromOpenedPage', {data: 'test'});

    eventChannel.emit('someEvent', {data: 'test'});

    // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据

    eventChannel.on('acceptDataFromOpenerPage', function(data) {

      console.log(data)

    })

  }

})