小程序eventChannel与navgation方法封装，方便页面间传递参数与页面数据预加载

这个方法能为我带来啥？

你现在可以直接写一个nav(path,data)便可以自动实现跳转到指定地址并且像该页面传递一个参数的功能了 方法同时封装了原生的loding方法让我们的跳转更为完善

• 精简了代码，方便我们日常跳转减少了代码的冗余
• 优化性能，现在我们可以再页面跳转前进行页面的数据的预加载，通过路由的eventChannel传递到跳转的页面

话不多说上代码

utils文件夹内先封装两个方法

// 跳转的封装 第一个参数为地址 第二个参数为要传递的数据
const nav = (path, data) => {
  wx.showLoading({
    title: '加载中',
    mask: true,
  })
  wx.navigateTo({
    url: path,
    success: function (res) {
      res.eventChannel.emit('data', {
        data: data
      })
      wx.hideLoading()
    },
    fail: function () {
      wx.hideLoading()
      wx.showToast({
        icon: 'error',
        title: '跳转失败',
      })
    }
  })
}
// 获取数据更新到backData
const upData = (that) => {
  const eventChannel = that.getOpenerEventChannel()
  eventChannel.on('data', (data) => {
    that.setData({
      backData: data
    })
  })
}
// 记得导出哦
module.exports = {
  formatTime,
  nav,
  upData
}

跳转页的引入及使用方法

方法一般写在工具文件夹utils内要使用该方法的页面在顶部引入一下 现在要调用跳转的页面引入一下

const {
    nav
} = require("这里写自己的文件地址")

然后就可以在引入的js文件中调用方法了，第一个参数是要跳转的地址，第二个参数是要传递的数据，数据可以是任意类型这里是建议再跳转前可以预加载好下个页面的数据即再此处可以先初始化下个页面的数据，可以防止页面数据闪动，下个页面刚到的时候数据就加载好了能优化体验

// 这个this.getData()就是下个页面的数据获取的方法
const res = this.getData()
nav("/Packageshome/pages/storageOutDetail/storageOutDetail", res)

跳转后获取数据的方法

最后再跳转到的页面引入更新数据的方法

const {
    upData
} = require("这里写自己的文件地址")

并在data中定义一个backData字段用来接收数据

data: {
        backData: {}
    },

最后在onLoad生命周期调用一下完事

    onLoad: function (options) {
        upData(this)
        console.log('this.data.backData==========>', this.data.backData);
    },

本文章个人原创如需转载请告知