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

  • 相关阅读:
    [译]Java例解Interface
    【笔记】2014-01至2014-02
    【笔记】2013-12
    【笔记】2013-10至2013-11
    【笔记】2013-09
    【笔记】2013-08
    【笔记】2013-07
    生活工作中好用的快捷键和小工具(更新)
    Android Studio更新Gradle问题
    gradle构建spring5源码
  • 原文地址:https://www.cnblogs.com/pinkpinkc/p/13666555.html
Copyright © 2011-2022 走看看