JS每日一题: 小程序页面之间如何通信?

20190227

小程序页面之间如何通信?

首先将通信的模型列举出来, 分为以下几种

  • 兄弟页面间通信
  • 父路径页面向子路径页面通信
  • 子路径页面向父路径页面通信
通信的方式
  • localStorage 本地存储
  • globalData 全局对象
  • eventBus 发布订阅
  • PageModel 缓存整个pageModel至globalData
LocalStorage

利用onShow/onHide激活方法,通过localStorage传递数据

onShow() {

    let newHello = wx.getStorageSync('__data');

    if (newHello) {
      this.setData({
        helloMsg: newHello
      });
      // 清空上次通信数据
      wx.clearStorageSync('__data');
    }

  }
GlobalData

同localStorage一样,利用onShow/onHide激活方法,通过读写小程序globalData完成数据传递

let app = getApp();
  
  onShow() {

    let newHello = app.$$data.helloMsg;

    if (newHello) {
      this.setData({
        helloMsg: newHello
      });
      // 清空上次通信数据
      app.$$data.helloMsg = null;
    }

  }
EventBus

eventBus基本适用合任何JS可以运行的环境, 通过订阅一个事件,然后再发布事件的时间点收到消息

// 首先你得实现一个eventBus, 这里假设你已经实现了..

// Page A

  onLoad() {
    app.pubSub.on('hello', (msg) => {
      this.setData({
        helloMsg: 'hello :' + msg
      });
    });
  },

// Page B

  onLoad() {
    app.pubSub.emit('hello', 'JS每日一题')
  },
PageModel

缓存页面PageModel, 通信时,直接找到要通信页面的PageModel,进而可以访问通信页面PageModel所有的属性,方法

// 在app.js中add及get实现
    
  this.$$cache = {}

  add(pageModel) {
    // 添加时以__route__做为key,方便在其它页面调用
    let pagePath = this.__route__;

    this.$$cache[pagePath] = pageModel;
  }
  
  get(pagePath) {
    // 同时直接取走相应的pageModel
    return this.$$cache[pagePath];
  }
  
// Page A 在onLoad 时将本身(this)存放到GlobalData中
  onLoad() {
    app.pages.add(this);
  },
  
// Page B
  onLoad() {
    // 拿到Page A所有属性及方法
    console.log(app.pages.get('pages/a/b')) 
  },

总结

  • localstorage 同步会阻塞进程,异步可能会错过最佳取值时机
  • globalData 直接操作内存,比localstorage更快,注意全局变量污染
  • eventBus 方便灵活,推荐使用,注意解绑及重复绑定
  • PageModel 思路很棒,但globalDatac存放的pageModel过多时内存会不会爆不知道~_~

关于JS每日一题

JS每日一题可以看成是一个语音答题社区
每天利用碎片时间采用60秒内的语音形式来完成当天的考题
群主在次日0点推送当天的参考答案

  • 注 绝不仅限于完成当天任务,更多是查漏补缺,学习群内其它同学优秀的答题思路

点击加入答题

相关推荐