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

最新推荐文章于 2025-05-20 09:30:01 发布

BonnieYY

最新推荐文章于 2025-05-20 09:30:01 发布

阅读量2.9k

点赞数

CC 4.0 BY-SA版权

分类专栏：微信小程序前端

本文链接：https://blog.youkuaiyun.com/qq_39039128/article/details/87979401

前端同时被 2 个专栏收录

59 篇文章

订阅专栏

微信小程序

3 篇文章

订阅专栏

本文深入探讨了小程序中五种常见的页面间通讯方式，包括利用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这个作者提供帮助