1. 程式人生 > >wepy框架的API的預加載$preload這功能闊以喔

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

highlight str 點擊事件 序列化與反序列化 cos style 事件 OS .so

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

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

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

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

但是很多的preload數據只是單一渲染後就不要,也沒有必要掛載在 globalData 上,所以本人覺得 $preload 大有用處

$preload 使用

A頁面preload數據

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

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

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

  

B頁面接收

  //必須在 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 這樣結合方式傳遞數據的!

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

    

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