微信小程序通信方式----5种

本文深入探讨了小程序中五种常见的页面间通讯方式,包括利用onShow/onHide配合localStorage、globalData进行数据传递,使用eventBus事件发布订阅机制,以及推荐的直接调用通信页面方法的hack技巧。每种方法都有其适用场景和潜在问题,如数据污染和读取失败等。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

通讯分类

1、兄弟页面间 2、父页面跳子页面 3、子页面跳父页面

激活时期

1、延迟激活 等待当前页面时间响应完成后再触发依赖页面

2、立即激活 当前页面响应之前就触发依赖页面

 

五种通讯方式

1、onShow/onHide + localStorage

wx.getStorageSync('__data') //获取

wx.clearStorageSync('__data') //清除上次通讯数据

wx.setStorageSync('__data') //设置通信数据

记得清除通信数据,否则可能出问题

有可能localStorage会读取失败,导致通信失败

页面初始化也会触发onShow

2、onShow/onHide + globalData

app = getApp()

app.$$data.XX = null  //清除上次通讯数据

app.$$data.XX = XX//设置通信数据

globalData污染

页面初始化也会触发onShow

3、eventBus(或者是pubsub) 事件发布订阅

on  emit  off

4、globalData + watcher  

使用oba开源库

oba(app.$$data,(prop,newVal,oldVal)=>{

})

这叫数据驱动

5、推荐 通用hack直接调用通信页面方法

// plugin/pages.js 
// 缓存pageModel,一个简要实现
export default class PM {
  constructor() {
    this.$$cache = {};
  }

  add(pageModel) {
    let pagePath = this._getPageModelPath(pageModel);

    this.$$cache[pagePath] = pageModel;
  }

  get(pagePath) {
    return this.$$cache[pagePath];
  }
  
  delete(pageModel) {
    try {
      delete this.$$cache[this._getPageModelPath(pageModel)];
    } catch (e) {
    }
  }

  _getPageModelPath(page) {
    // 关键点
    return page.__route__;
  }
}

// pageA
let app = getApp();

Page({
  data: {
    helloMsg: 'hello from PageA'
  },

  onLoad() {
    app.pages.add(this);
  },

  goC() {
    wx.navigateTo({
      url: '/pages/c/c'
    });
  },
  
  sayHello(msg) {
    this.setData({
      helloMsg: msg
    });
  }
});
//pageC

let app = getApp();

Page({
  doSomething() {
    // 见证奇迹的时刻
    app.pages.get('pages/a/a').sayHello('hello u3xyz.com');
  }
});

app.pages.add()

app.pages.get('路径').fn('xxx')

 

谢谢 https://segmentfault.com/a/1190000008895441这个作者提供帮助

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值