微信小程序 —— 页面通信

一、子页面向父页面传递数据

1. 在 index 页面中使用 wx.navigateTo 方法跳转至 test 页面。

2. 在此之前，使用 wx.navigateTo 跳转最常用的几个参数有 url 、success、fail 等参数，除此之外还有一个参数用于接收子页面返回的数据 events ，也可以说时注册子页面发射的事件。

3. 在 test 子页面中利用 this.getOpenerEventChannel() API 的 emit 方法向父页面发射事件，在事件中传递参数。

   • index.js 父页面代码

     Page({
         
     	// 父页面跳转按钮的单击事件    
         jump: function () {
             wx.navigateTo({
                 url: './test',
                 events: {
                     testEmit: function (data) {
                         console.log("index 页面打印",data)
                     },
                 }
             })
         }
         
     })
     

   • test.js 子页面代码

     Page({
     
         // 子页面传递数据按钮的单击事件
         toIndex:function()
         {
             let eventChannel = this.getOpenerEventChannel();
             eventChannel.emit('testEmit', { data: 'test 页面数据' });
         },
     
     })
     

4. 上面代码中可以看到，子页面首先是对 this.getOpenerEventChannel() API 进行初始化并付给变量 eventChannel ，随后调用这个变量的 emit 方法，emit 方法有两个参数，第一个参数表示发射事件的名称；第二个参数表示向父页面传递的数据，此处的数据没有限制，代码中返回了一个对象。

5. 在父页面的 events 中对子页面发射的事件进行注册，最后将数据进行打印。

6. 运行效果

   

7. 点击 test 子页面的按钮时，控制台会将数据进行打印。

二、父页面向子页面传递数据

1. 在父页面使用 wx.navigateTo 方法跳转页面成功后，在跳转成功的回调函数 success 中可以向子页面发射事件，利用这个事件进行数据的传递。

2. 在回调函数参数 res 中也有一个 eventChannel 值，利用这个值的 emit 方法向子页面发射事件，参数同第一块中的第4点。

3. 在子页面中利用 this.getOpenerEventChannel() API 的 on 方法注册父页面发射的事件。

   • index.js 父页面代码

     Page({
         
         // 父页面跳转按钮的单击事件 
         jump: function () {
             wx.navigateTo({
                 url: './test',
                 success: (res) => {
                     res.eventChannel.emit('testOn', { data: 'index 页面数据' })
                 }
             })
         }
         
     })
     

   • test.js 子页面代码

     Page({
         
         // 子页面接收数据按钮的单击事件
         toIndex:function()
         {
             let eventChannel = this.getOpenerEventChannel()
             eventChannel.on('testOn', function (data) {
                 console.log("test 页面打印",data)
             })
         },
     
     })
     

4. 一般情况下，子页面接收父页面数据时都会写在生命周期函数中，为给大家呈现运行效果，次数将接收数据的代码写在了页面按钮的单击事件中。

5. 运行效果

   

三、页面通信案例

1. 运行效果

   

2. index.js 文件代码

   Page({
   
       // 前往 test 页面
       toTest:function()
       {
           wx.navigateTo({
               url: '../test/test',
               events:{
                   data:(e) => {
                       wx.showToast({
                         title: e,
                         icon:"none",
                         duration:3000
                       })
                   }
               },
               success:(res) => {
                   res.eventChannel.emit("data",['待支付','待发货','待收货','待评论','已完成'])
               }
           })
       }
   
   })
   

3. test.js 文件代码

   Page({
   
       // 页面的初始数据
       data: {
   
       },
   
       // 页面加载
       onLoad: function (options) {
           let element = this.getOpenerEventChannel();
           element.on("data",(e) => {
               this.setData({
                   typeList:e
               })
           })
       },
   
       // 导航点击事件
       navClick:function(e)
       {
           wx.navigateBack({});
           let element = this.getOpenerEventChannel();
           let item = e.currentTarget.dataset.item;
           element.emit("data",item)
       }
   
   })
   

欢迎大家补充