前面提到方式中，我们有利用globalData完成通信。现在数据绑定流行，结合redux单一store的思想，如果我们直接watch一个globalData,那么要通信，只需修改这个data值，通过water去激活调用。同时修改的data值，本身就可以做为参数数据。
为了方便演示，这里使用oba这个开源库做为对象监控库，有兴趣的话，可以自己实现一个。
//pageA import oba from '../../plugin/oba'; let app = getApp(); Page({ data: { helloMsg: 'hello from PageA' }, onLoad() { oba(app.$$data, (prop, newvalue, oldValue) => { this.setData({ helloMsg: 'hello times: ' + [prop, newvalue, oldValue].join('#') }); }); }, goC() { wx.navigateTo({ url: '/pages/c/c' }); } });
//pageC let app = getApp(); let counter = 0; Page({ doSomething() { app.$$data.helloTimes = ++counter; } });
优点：数据驱动，单一数据源，便于调试
缺点：重复watch的问题还是存在，要想办法避免
方式五：通过hack方法直接调用通信页面的方法
直接缓存页面PageModel, 通信时，直接找到要通信页面的PageModel,进而可以访问通信页面PageModel所有的属性，方法。简直不能太cool,感谢小组内小伙伴发现这么amazing的方式。有人肯定会问了，怎么拿到这个所有的PageModel呢。其它很简单，每个页面有onLoad方法，我们在这个事件中，把this（即些页面PageModel）缓存即可，缓存时用页面路径作key，方便查找。那么页面路径怎么获取呢，答案就是page__route__这个属性
// 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'); } });
优点：一针见血，功能强大，可以向要通信页面做你想做的任何事。无需要绑定，订阅，所以也就不存在重复的情况
缺点：使用了__route__这个hack属性，可能会有一些风险