• 【小程序】---- 页面间通信接口,跳转页面携带参数


    一、功能描述:

    在 2019 年 7 月 2 日的小程序基础库版本更新 v2.7.3 中,小程序新增了一个页面间通讯的接口,帮助我们的小程序完成不同页面间数据同步的功能。

    二、实现方式:

    假设页面 A 打开详情页面 B

    1. A 向 B 传递数据

    // A页面
    
    wx.navigateTo({
      url: 'search?type=1' 
      success: function(res) { 
      // 通过eventChannel向被打开页面传送数据 
        res.eventChannel.emit('searchComplete', { searchName: 'cc' }) 
      }
    })
    // B页面
    
    onLoad: function(option){
      // 监听searchComplete事件,获取上一页面通过eventChannel传送到当前页面的数据
      let eventChannel = this.getOpenerEventChannel();
      eventChannel.on('searchComplete', function(data) { 
       console.log(data)
    })
    }

    2.B 向 A 传递数据

    // A页面
    
    wx.navigateTo({
      url: 'search?type=1', 
      events: { 
         filterComplete: function(data) { 
           console.log(data) 
         }
      }
    })
    // B页面
    
    onLoad: function(option){ 
       const eventChannel = this.getOpenerEventChannel();
       eventChannel.emit('filterComplete', {filterName: 'cc'}); 
      // wx.navigateBack(); 返回上一页
    }

    三、注意要点
    1. 该功能从基础库 2.7.3 开始支持,低版本需做兼容处理。
    2. json配置文件的 usingComponents 不能删除,否则会报错:“this.getOpenerEventChannel is not a function”。

  • 相关阅读:
    petshop4.0(转)
    分层依据(转)
    如何让一个函数返回多个值
    谁访问过我的电脑
    博客第一帖!
    开发辅助工具大收集
    VC 通过IHTMLINTEFACE 接口实现网页执行自定义js代码
    vi命令大全
    #include <sys/types.h>
    #include <arpa/inet.h>
  • 原文地址:https://www.cnblogs.com/pinkpinkc/p/13666555.html
Copyright © 2020-2023  润新知