极速快3精准计划|极速快3有规律吗
用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 實戰教程 查看內容

小程序數據通信方法大全

Rolan 2019-4-16 00:05

大家好,我是skinner,這是我的第7篇分享 序 本文論述的是子或孫向父傳遞數據的情況,自下而上 相信大家平時在小程序開發中肯定遇到過頁面或者組件之間的數據通信問題,那小程序數據通信都有哪些方式呢?如何選擇 ...

大家好,我是skinner,這是我的第7篇分享

本文論述的是子或孫向父傳遞數據的情況,自下而上

相信大家平時在小程序開發中肯定遇到過頁面或者組件之間的數據通信問題,那小程序數據通信都有哪些方式呢?如何選擇合適的通信方式呢?這就是本文要討論的重點。

關系劃分

在討論都有哪些數據通信方式之前,我們先來定義一下,小程序頁面、組件之間都有哪些關系。我總結了一下,大概分為以下3類:

  1. 父子關系
  2. 兄弟關系
  3. 爺孫關系

不同的關系里面,不同角色之間有可能是頁面,也有可能是組件,接下來我們就一個個來揭示如何進行數據通信。

父子關系

父子關系一般主要就是兩種情況:

  1. 父為頁面,子為組件
  2. 父為組件,子為組件

這種關系可能是頻率出現最高的了,畢竟大部分小程序頁面都是以小而美為主,可能沒有分的太細,碰到這種情況,我們可以通過在父頁面監聽子組件觸發的事件來完成數據通信。

方法一

<!-- 當自定義組件觸發“myevent”事件時,調用“onMyEvent”方法 -->
<component-tag-name bindmyevent="onMyEvent" />

<!-- 在自定義組件中 -->
<button bindtap="onTap">點擊這個按鈕將觸發“myevent”事件</button>
Component({
  methods: {
    onTap() {
      const myEventDetail = {} // detail對象,提供給事件監聽函數
      const myEventOption = {} // 觸發事件的選項
      this.triggerEvent('myevent', myEventDetail, myEventOption)
    }
  }
})
復制代碼

兄弟關系

兄弟關系同樣分為兩種情況:

  1. 兄弟間都是頁面
  2. 兄弟間都是組件

兄弟間都是頁面

這種關系指的就是,同層次間的頁面,簡單理解其實就是頁面之間的跳轉,那從頁面A跳到頁面B,頁面B如何修改頁面A的數據呢?

方法二

頁面生命周期里面都有onShow``onHide方法,通過localStorage或者globalData作為數據中轉,進入到不同頁面時,在前一個頁面onShow里面取出數據,在后一個頁面onShow里面存儲數據,具體做法如下:

<!--app.js-->
App({
    globalData: { count: 0 },
});

<!--頁面A-->
onShow(){
    let countValue = wx.getStorageSync('count');
    
    <!--globalData的方式-->
    let countValue = getApp().globalData.count;
    <!---->
    
    if(countValue){
        this.setData({
            count:countValue
        })
    }
    
    <!--globalData的方式 清除數據-->
    getApp().globalData.count = null
    <!---->
}
onHide(){
    wx.removeStorageSync('count') 
}

<!--頁面B-->
onShow(){
    <!--globalData的方式-->
    getApp().globalData.count = 1
    <!---->
    
    wx.setStorageSync('count',1);
}
復制代碼

爺孫關系

爺孫關系算是數據通信中最復雜的了,因為不是直系傳遞,若是通過方法一來監聽,那就需要通過多級傳遞事件了,如果節點比較深,可想而知代碼是得多難理解且難以維護。

我們可以通過全局創建一個事件總棧EventBus,利用這個EventBus來訂閱發布事件,也就是我們經常使用的發布訂閱模式,那在小程序里面如何實現呢?

方法三

<!--第一步:實現一個事件總棧類-->
class EventBus {
    constructor() {
        this.bus = {};
    }
    // on 訂閱
    on(type, fun) {
        if (typeof fun !== 'function') {
            console.error('fun is not a function');
            return;
        }
        (this.bus[type] = this.bus[type] || []).push(fun);
    }
    // emit 觸發
    emit(type, ...param) {
        let cache = this.bus[type];
        if (!cache) return;
        for (let event of cache) {
            event.call(this, ...param);
        }
    }
    // off 釋放
    off(type, fun) {
        let events = this.bus[type];
        if (!events) return;
        let i = 0,
            n = events.length;
        for (i; i < n; i++) {
            let event = events[i];
            if (fun === event) {
                events.splice(i, 1);
                break;
            }
        }
    }
}
module.exports = EventBus;

<!--第二步:在app.js文件中引入-->
import EventBus from './common/event-bus/index.js';
App({
    eventBus: new EventBus(),
});

<!--第三步:在父頁面或者父組件中監聽某個事件-->
onLoad: function(options) {
    app.eventBus.on('add-count', this.addCount);
}
onUnload: function(options) {
    app.eventBus.off('add-count', this.addCount);
}


<!--第四步:在子組件里面觸發事件-->
methods: {
    addCount() {
        app.eventBus.emit('add-count');
    }
}
復制代碼

除此之外,還有一種方式,我們可以在每個頁面onLoad周期里面將該頁面的pageModel對象緩存起來,之后在孫輩組件里面拿到祖孫的頁面對象,從而觸發祖孫頁面對象對應的方法。

方法四

<!--第一步:實現一個pageModel,用來緩存頁面對象-->
class PageModel {
    constructor() {
        this.pageCache = {};
    }

    add(page) {
        let pagePath = this._getPageModelPath(page);
        this.pageCache[pagePath] = page;
    }

    get(path) {
        return this.pageCache[path];
    }

    delete(page) {
        delete this.pageCache[this._getPageModelPath(page)];
    }
    <!--這一段代碼是關鍵,存儲的是__route__屬性-->
    _getPageModelPath(page) {
        return page.__route__;
    }
}

export default PageModel ;

<!--第二步:app.js中引入-->
import PageModel from './common/page-model/index.js';

App({
    pageModel: new PageModel(),
});

<!--第三步:頁面onLoad周期里緩存頁面-->
onLoad: function(options) {
    app.pageModel.add(this);
}

<!--第四步:子孫獲取祖輩方法-->
methods: {
    addCount() {
        app.pageModel.get('pages/communicate/index').addCount();
    }
}
復制代碼

總結

首先,方法三方法四可以運用在所有情況,不過得視情況而使用。如果頁面層級不深,簡單的事件監聽(方法一)即可,沒必要再創建一個事件總棧,因為如果頁面數量一多,各種監聽,通過EventBus容易重名,造成一些不可知情況。另外,方法四也有一定風險,萬一之后微信基礎庫不把頁面對象存儲在__route__里面了,我們的方式也就不生效了。

所有示例代碼都可以通過以下兩種方式查看,如果喜歡我的文章,歡迎點

鮮花
鮮花
雞蛋
雞蛋
分享至 : QQ空間
收藏
原作者: skinner 來自: 掘金
极速快3精准计划 体彩竞彩几点开奖 3d一句定三码 快乐赛车全天人工计 今天河南中原风采22选5开奖结果 刘军教你玩pK10教程 北京时时漏洞02468 易彩兼职是不是骗局 幸运农场网站 秒选app安卓版 江西时时后三跨度