HBuilder mui頁面間傳值的幾種方式

  采用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");