採用MUI開發APP時,頁面跳轉傳值無疑是很多初學者遇到的難題之一,我在開發時也遇到了同樣的問題,所以在這裡總結了一下,方便以後查閱。 一、頁面預載入時傳值 通過上述方法預載入頁面,然後在載入的那個頁面中接受參數。 二、通過mui.openWindow打開視窗向頁面傳遞參數 這種傳值方法通常我們的做 ...
採用MUI開發APP時,頁面跳轉傳值無疑是很多初學者遇到的難題之一,我在開發時也遇到了同樣的問題,所以在這裡總結了一下,方便以後查閱。
一、頁面預載入時傳值
mui.init({ preloadPages:[{ url:prelaod-page-url, id:preload-page-id, styles:{}, extras:{ name:'zqm' },//在這裡添加要傳遞的參數 ... }, ...] }); 或如下 var page = mui.preload({ url:new-page-url, id:new-page-id, styles:{}, extras:{ name:'zqm' //自定義擴展參數 } });
通過上述方法預載入頁面,然後在載入的那個頁面中接受參數。
mui.plusReady(function(){ var self = plus.webview.currentWebview(); var name = self.name;//獲得參數 });
二、通過mui.openWindow打開視窗向頁面傳遞參數
這種傳值方法通常我們的做法如下:
在參數生成頁面中
mui.openWindow({ id: 'list.html', url: 'list.html', show: { aniShow: 'pop-in' }, extras: { //extras裡面的就是參數了 name: "zqm" }, waiting: { autoShow: true, //自動顯示等待框,預設為true } });
在參數接收頁面中
mui.plusReady(function(){ var self = plus.webview.currentWebview(); var name = self.name;//獲得參數 });
通常我們傳參就這麼進行,但是由於這個頁面,多次被打開,發生了類似緩存的現象,所以,有時候這個plusReady不能保證每次都能執行。所以,我增加了一個自定義事件,來改變這個情況,實現方法如下(我是雙管齊下,plusReady也獲取值,自定義事件也獲取值)。
那好,下麵我演示一下我的方法(下麵這個監聽一個按鈕,然後打開一個頁面);
var apage = null; mui.plusReady(function() { mui.preload({ url: "list.html", id: "list.html", //預設使用當前頁面的url作為id styles: {}, //視窗參數 extras: { name: "預載入的參數" } //自定義擴展參數 }); document.getElementById("bbtn").addEventListener('tap',function({ if(apage == null) { //要進入list.html,第一次,它肯定為空,所以,此時下麵的這個fire方法,是不會執行的。 apage = plus.webview.getWebviewById("list.html"); } mui.fire(apage, 'hahaha',{ name: "zqm" }); apage.show(); }); });
接下來,就到了參數接收頁面,如下(首先,我們還是要在plusReady裡面接收一次,因為你不能保證這次是初次打開還是第二次打開頁面,所以,這個還是需要的。)
mui.plusReady(function(){ var self = plus.webview.currentWebview(); var name = self.name;//獲得參數 });
但是如果這個是非首次打開的話,就不一定進來plusReady了,所以,參數可能接收失敗了,這裡面,我們就要接收自定義事件傳過來的參數了,就是前面我們的fire那裡了。
//添加上一個頁面自定義事件監聽 window.addEventListener('hahaha', function(event) { //獲得事件參數 var name= event.detail.name; });
這樣,我們就能把這個參數獲取到,雙重保證,就沒有問題了。(如果你們需要謹慎一些,可以把這個自定義事件的監聽延遲個300毫秒,保證接收的概率,因為如果是這個自定義事件優先執行了,然後他又去執行這個plusReady,那就會衝突了。)
三、通過本地存儲傳值
發送參數的頁面:plus.storage.setItem("targetId","123");
接收參數的頁面:plus.storage.getItem("targetId");