04_微信小程序页面之间的参数传递及其通信

微信小程序页面之间的参数传递及其通信

一.应用场景

在小程序中两个界面之间进行跳转是,A页面跳转至B页面,并可以向B页面传递参数,B页面返回A,并将数据带回到A

二.A页面跳转到B页面,A向B传递参数

• 在A页面跳转B页面时,直接将参数拼接在B页面的路径后边,并在B页面的onLoad方法中通过onLoad方法的形参options即可取到由A页面传递过去的参数

  
  
  

        通过这种传递参数的方式,在遇到传递一个url的时候,会出现传递到B的参数不全的问题,可一在传递参数时,对参数进行URLEncode(使用encodeURIComponent方法),然后在接收到参数后对其进行URLDecode(使用decodeURIComponent方法),即可解决此问题

• 在A页面跳转B页面时,通过EventChannel的emit方法发送一个事件,并在B页面的onLoad方法中通过EventChannel的on方法监听事件

  //PageA
  wx.navigateTo({
    url: '/pages/page-b/page-b',
    success: function (res) {
      // 通过eventChannel向被打开页面传送数据
      res.eventChannel.emit('navigateToPageB', { data: 'test' })
    }
  })
  
  //PageB
  onLoad: function (options) {
    const eventChannel = this.getOpenerEventChannel()
    eventChannel.on("navigateToPageB", function(res) {
      console.log(res)//{data: "test"}
    })
  }
  

三.B页面返回A页面时将参数回传个A页面

• 在A页面中定义一个方法onPageResult,onPageResult的形参res用于接收B页面传递回来的参数,当在B页面调用wx.navigateBack()返回时,在success的回调方法里,通过getCurrentPages()拿到当前页面栈,当前页面栈中的最后一个元素即为所要返回的A页面,此是调用A页面的onPageResult,即可将B页面中的参数回传到A页面

  //PageA
  Page({
    ...    
    onPageResult: function(res) {
      console.log("onPageResult", res)//onPageResult {data: "test"}
    }
  })
  
  //PageB
  Page({
    ...
    back: function(e) {
      wx.navigateBack({
        success: function(res) {
          var pages = getCurrentPages()
          var page = pages[pages.length - 1]
          page.onPageResult({data: "test"})
        }
      })
    }
  })
  

• 使用EventChannel:通过查看wx.navigateTo(Object object)的api发现,从基础库 2.7.3 开始,object中多了一个events属性,通过该属性,可以添加一系列的自定义事件回调方法,例如在events中添加一个onPageResult方法后,只需要在返回该页面的时候通过getOpenerEventChannel().emit(“onPageResult”, {data:“test”})即可实现参数回传

  //PageA
  Page({
    ...
    toPageB: function(e) {
      wx.navigateTo({
        url: '/pages/page-b/page-b',
        events: {
          onPageResult: function(res) {
            console.log("onPageResult", res)//onPageResult {data: "test"}
          }
        }
      })
    },
    ...
  })
  
  //PageB
  Page({
    ...
    back: function(e) {
      const eventChannel = this.getOpenerEventChannel()
      wx.navigateBack({
        success: function(res) {
          eventChannel.emit("onPageResult", {data: "test"})
        }
      })
    }
  })