zoukankan      html  css  js  c++  java
  • 【小程序】---- 页面间通信接口,跳转页面携带参数

    一、功能描述:

    在 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”。

  • 相关阅读:
    获取Activity中得到焦点的EditText
    SwipeRefreshLayout嵌套ScrollView包裹复杂头布局和RecyclerView
    摄像机识别图片中的手机号
    Glide 加载图片
    反射,元类
    类与实例
    多态
    sys模块理解补充
    python中os模块再回顾
    面向对象之封装
  • 原文地址:https://www.cnblogs.com/pinkpinkc/p/13666555.html
Copyright © 2011-2022 走看看