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

RancherLabs 发布于2019-08-23 15:34 / 3117人阅读

摘要：小程序页面之间如何通信首先将通信的模型列举出来分为以下几种兄弟页面间通信父路径页面向子路径页面通信子路径页面向父路径页面通信通信的方式本地存储全局对象发布订阅缓存整个至利用激活方法，通过传递数据清空上次通信数据同一样，利用激活方法，通过读写

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基本适用合任何ＪＳ可以运行的环境, 通过订阅一个事件，然后再发布事件的时间点收到消息

// 首先你得实现一个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点推送当天的参考答案

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

点击加入答题

专线服务私有云微信内h5页面打开小程序如何小程序小程序如何如何介绍小程序

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102241.html

JS每日一题：小程序跳转页面有几种方式？有什么不同?

摘要：小程序跳转页面有几种方式有什么不同在小程序中每个页面可以看成是一个，全部以栈的形式进行管理最多五层在说跳转方式之前我们先来温习一下栈和堆的区别管理方式不同栈是系统编译器启动管理，不需要程序员手动管理堆的释放由程序员手动管理，不及时回收容易产 20190228 小程序跳转页面有几种方式？有什么不同? 在小程序中每个页面可以看成是一个pageModel，pageModel全部以栈的形式进...

googollee 2019-08-23 15:35 评论0 收藏0
JS每日一题:设计模式-如何理解职责链模式?

摘要：提交请求的对象并不明确知道哪一个对象将会处理它也就是该请求有一个隐式的接受者。 20190412期设计模式-如何理解职责链模式? 定义: 使多个对象都有机会处理请求，从而避免请求的发送者和接收者之间的耦合关系，将这些对象连成一条链，并沿着这条链传递该请求，直到有一个对象处理它为止也就是说，请求以后，从第一个对象开始，链中收到请求的对象要么亲自处理它，要么转发给链中的下一个候选者。提...

lifesimple 2019-08-23 16:56 评论0 收藏0
JS每日一题: 如何理解CSS中BFC?

摘要：期如何理解中定义块格式化上下文，是页面的可视化渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。 20190416期如何理解CSS中BFC? 定义: 块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。 BFC 特性及应用同一个...

lentoo 2019-08-23 16:58 评论0 收藏0
JS每日一题:Vue中的diff算法？

摘要：，文本节点的比较，需要修改，则会调用。，新节点没有子节点，老节点有子节点，直接删除老节点。所以一句话，的作用主要是为了高效的更新虚拟。 20190125 Vue中的diff算法？概念: diff算法是一种优化手段，将前后两个模块进行差异对比，修补(更新)差异的过程叫做patch(打补丁) 为什么vue,react这些框架中都会有diff算法呢? 我们都知道渲染真实dom的开销是很大的...

Caicloud 2019-08-23 15:32 评论0 收藏0
JS每日一题：前端性能监控你会监控哪些数据? 如何做?

摘要：基于此我们可以通过获取头部资源加载完的时刻来近似统计白屏时间代码理解测试时间起点，实际统计起点为时间终点头部资源加载时间首屏时间首屏时间的统计比较复杂，因为涉及图片等多种元素及异步渲染等方式。 20190318期前端性能监控你会监控哪些数据? 如何做? 开始之前给大家推荐两个检查网页性能的地址 https://developers.google.com... https://www...

qieangel2013 2019-08-26 18:18 评论0 收藏0