JS每日一題: 小程序頁面之間如何通信?

RancherLabs 發(fā)布于2019-08-23 15:34 / 3249人閱讀

摘要：小程序頁面之間如何通信首先將通信的模型列舉出來分為以下幾種兄弟頁面間通信父路徑頁面向子路徑頁面通信子路徑頁面向父路徑頁面通信通信的方式本地存儲全局對象發(fā)布訂閱緩存整個至利用激活方法，通過傳遞數(shù)據(jù)清空上次通信數(shù)據(jù)同一樣，利用激活方法，通過讀寫

20190227

小程序頁面之間如何通信?

首先將通信的模型列舉出來, 分為以下幾種

兄弟頁面間通信

父路徑頁面向子路徑頁面通信

子路徑頁面向父路徑頁面通信

通信的方式

localStorage 本地存儲

globalData 全局對象

eventBus 發(fā)布訂閱

PageModel 緩存整個pageModel至globalData

LocalStorage

利用onShow/onHide激活方法，通過localStorage傳遞數(shù)據(jù)

  onShow() {

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

    if (newHello) {
      this.setData({
        helloMsg: newHello
      });
      // 清空上次通信數(shù)據(jù)
      wx.clearStorageSync("__data");
    }

  }

GlobalData

同localStorage一樣，利用onShow/onHide激活方法，通過讀寫小程序globalData完成數(shù)據(jù)傳遞

  let app = getApp();
  
  onShow() {

    let newHello = app.$$data.helloMsg;

    if (newHello) {
      this.setData({
        helloMsg: newHello
      });
      // 清空上次通信數(shù)據(jù)
      app.$$data.helloMsg = null;
    }

  }

EventBus

eventBus基本適用合任何ＪＳ可以運行的環(huán)境, 通過訂閱一個事件，然后再發(fā)布事件的時間點收到消息

// 首先你得實現(xiàn)一個eventBus, 這里假設你已經(jīng)實現(xiàn)了..

// 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實現(xiàn)
    
  this.$$cache = {}

  add(pageModel) {
    // 添加時以__route__做為key，方便在其它頁面調(diào)用
    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 直接操作內(nèi)存，比localstorage更快，注意全局變量污染

eventBus 方便靈活,推薦使用,注意解綁及重復綁定

PageModel 思路很棒,但globalDatac存放的pageModel過多時內(nèi)存會不會爆不知道~_~

關于JS每日一題

JS每日一題可以看成是一個語音答題社區(qū)
每天利用碎片時間采用60秒內(nèi)的語音形式來完成當天的考題
群主在次日0點推送當天的參考答案

注絕不僅限于完成當天任務，更多是查漏補缺，學習群內(nèi)其它同學優(yōu)秀的答題思路

點擊加入答題

云服務器 GPU云服務器微信內(nèi)h5頁面打開小程序如何小程序小程序如何如何介紹小程序

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/102241.html

JS每日一題：小程序跳轉頁面有幾種方式？有什么不同?

摘要：小程序跳轉頁面有幾種方式有什么不同在小程序中每個頁面可以看成是一個，全部以棧的形式進行管理最多五層在說跳轉方式之前我們先來溫習一下棧和堆的區(qū)別管理方式不同棧是系統(tǒng)編譯器啟動管理，不需要程序員手動管理堆的釋放由程序員手動管理，不及時回收容易產(chǎn) 20190228 小程序跳轉頁面有幾種方式？有什么不同? 在小程序中每個頁面可以看成是一個pageModel，pageModel全部以棧的形式進...

googollee 2019-08-23 15:35 評論0 收藏0
JS每日一題:設計模式-如何理解職責鏈模式?

摘要：提交請求的對象并不明確知道哪一個對象將會處理它也就是該請求有一個隱式的接受者。 20190412期設計模式-如何理解職責鏈模式? 定義: 使多個對象都有機會處理請求，從而避免請求的發(fā)送者和接收者之間的耦合關系，將這些對象連成一條鏈，并沿著這條鏈傳遞該請求，直到有一個對象處理它為止也就是說，請求以后，從第一個對象開始，鏈中收到請求的對象要么親自處理它，要么轉發(fā)給鏈中的下一個候選者。提...

lifesimple 2019-08-23 16:56 評論0 收藏0
JS每日一題: 如何理解CSS中BFC?

摘要：期如何理解中定義塊格式化上下文，是頁面的可視化渲染的一部分，是塊盒子的布局過程發(fā)生的區(qū)域，也是浮動元素與其他元素交互的區(qū)域。 20190416期如何理解CSS中BFC? 定義: 塊格式化上下文（Block Formatting Context，BFC）是Web頁面的可視化CSS渲染的一部分，是塊盒子的布局過程發(fā)生的區(qū)域，也是浮動元素與其他元素交互的區(qū)域。 BFC 特性及應用同一個...

lentoo 2019-08-23 16:58 評論0 收藏0
JS每日一題:Vue中的diff算法？

摘要：，文本節(jié)點的比較，需要修改，則會調(diào)用。，新節(jié)點沒有子節(jié)點，老節(jié)點有子節(jié)點，直接刪除老節(jié)點。所以一句話，的作用主要是為了高效的更新虛擬。 20190125 Vue中的diff算法？概念: diff算法是一種優(yōu)化手段，將前后兩個模塊進行差異對比，修補(更新)差異的過程叫做patch(打補丁) 為什么vue,react這些框架中都會有diff算法呢? 我們都知道渲染真實dom的開銷是很大的...

Caicloud 2019-08-23 15:32 評論0 收藏0
JS每日一題：前端性能監(jiān)控你會監(jiān)控哪些數(shù)據(jù)? 如何做?

摘要：基于此我們可以通過獲取頭部資源加載完的時刻來近似統(tǒng)計白屏時間代碼理解測試時間起點，實際統(tǒng)計起點為時間終點頭部資源加載時間首屏時間首屏時間的統(tǒng)計比較復雜，因為涉及圖片等多種元素及異步渲染等方式。 20190318期前端性能監(jiān)控你會監(jiān)控哪些數(shù)據(jù)? 如何做? 開始之前給大家推薦兩個檢查網(wǎng)頁性能的地址 https://developers.google.com... https://www...

qieangel2013 2019-08-26 18:18 評論0 收藏0