wepy框架的API的預加載$preload這功能闊以喔

優點:比 url 傳遞、或是 storage 、或是 globalData 更方便javascript

1:如 url 不能直接傳一個 Object 要傳的又要序列化與反序列化操做,麻煩(普通的單個變量仍是挺便捷簡單實在的)java

2:如 storage 也麻煩,又要set 到用的時候還要 get編程

3:  globalData 來雖然比上面兩種貌似更有優點,可是這個交互的數據挺大,成天掛載在globalData,同時掛載上後去到那個頁面能訪問的到(別人說能夠設置null,即便這樣還不是      多以key在globalData上)小程序

     可是不少的preload數據只是單一渲染後就不要,也沒有必要掛載在 globalData 上,因此本人以爲 $preload 大有用處框架

$preload 使用函數

A頁面preload數據this

注意:先 preload 再進行頁面路由跳轉,編程序路由跳轉啊,url

不要使用給navigator組件綁定點擊事件preload啊spa

 

 data = {
      preloadData: {
        name: 'Hello',
        age: '18'
      }
    };
    methods = {
      navigateToBPage() {
        this.$preload('preload', preloadData) //先
        wepy.navigateTo({
          url: `/pages/b/b?sourcePage=${this.sourcePage}`
        });
      } //後
    };
    // 'preload' 本身命名一個想要的有意義的變量名就好
    //  preloadData 數據格式,根據本身需求定義

 

  

 

B頁面接收blog

  //必須在 onLoad 鉤子函數才能夠接收到 
    // options 爲 url 的參數
    // preloadData 爲上個頁面 preload 過來的
    // 具體打印 出來 查看 preloadData  具體是什麼
    onLoad(options, preloadData) {
      if (preloadData.preload && preloadData.preload.name) {  
        cosole.log('拿到A頁面preload過來的數據了:', preloadData.preload);
      }
    };

  

假如是A頁面的組件觸發的,那preload就要變通一下,方法有能夠多種的

 

//1: 直接定義組件的methods的方法裏面
    methods = {
      navigateToBPage() {
        this.$parent.$preload('preload', preloadData) //先
        wepy.navigateTo({
          url: `/pages/b/b?sourcePage=${this.sourcePage}`
        });
      } //後
    };
    //***********************************************************
    //2:使用組件的通信交互
    methods = {
      navigateToBPage() {
        this.$emit('emit_parent_preload', preloadData);
      }
    };
    //$emit一個事件出去,觸發父頁面preload
    //A頁面在events定義:
    events = {
      emit_parent_preload(preloadData) {
        this.$preload('preload', preloadData);
         wepy.navigateTo({
          url: `/pages/b/b?sourcePage=${this.sourcePage}`
        });
      }
    }

 

  

 

  

我我的在使用 wepy框架開發小程序,是挺喜歡用 prelaod 與路由導航的 API 這樣結合方式傳遞數據的!

看到這裏,不放你也使用,試一試......

相關文章
相關標籤/搜索