wepy框架的API的預加載$preload這功能闊以喔
阿新 • • 發佈:2018-06-05
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這功能闊以喔