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

通讯分类

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这个作者提供帮助

你可能感兴趣的:(微信小程序,前端)