MUI之移動APP頁面之間傳遞參數

移動端傳值問題——不同的場景對應着不同的傳遞方式

 

一、頁面預加載時進行傳值

1、mui.init()方法——向預加載頁面進行傳遞參數

通過mui.init()方法向預加載頁面進行傳值

 

mui.init({
  preloadPages:[{
      url:prelaod-page-url,
      id:preload-page-id,
      styles:{},
      extras:{
        name:'csdn'
      },//在這里添加要傳遞的參數
      ...
    },
    ...]
});

 

對應頁面接受參數，即傳過來的值

mui.plusReady(function(){
    var self = plus.webview.currentWebview();
    var name = self.name;//獲得參數
});

2、mui.preload()方法——向預加載頁面進行傳遞參數

通過mui.preload()向預加載頁面傳遞參數

var page = mui.preload({
    url:new-page-url,
    id:new-page-id,
    styles:{},
    extras:{
      name:'csdn'
    }//自定義擴展參數
});

　對應頁面接受參數，即傳過來的值

mui.plusReady(function(){
    var self = plus.webview.currentWebview();
    var name = self.name;//獲得參數
});

二、頁面創建時進行傳值

　　首先要判斷此時的頁面是否被預加載過

如果頁面已經預加載過，這時候只會顯示此頁面，並不會創建，

這里傳遞的參數也不會被接收到，應該在頁面預加載的地方傳值。

如果頁面沒有被預加載過，每執行一次openWindow都會重新創建並打開頁面，這樣傳值有效。

1、mui.openWindow()——向頁面傳遞參數

mui.openWindow({
    url:'info.html',
    id:'info.html',
    extras:{
        name:'csdn'
    }
});

　對應頁面接受傳過來的參數

mui.plusReady(function(){
    var self = plus.webview.currentWebview();
    var name = self.name;//獲得參數
});

2、mui.init()——向子頁面傳遞參數

mui.init({
    subpages:[{
      url:your-subpage-url,
      id:your-subpage-id,
      styles:{},
      extras:{}//在這里添加自定義參數
    }]
  });

　對應頁面接收參數的方式

mui.plusReady(function(){
    var self = plus.webview.currentWebview();
    var name = self.name;//獲得參數
});

總結：一和二可以統一被認為是頁面初始化狀態時（不管是預加載還是頁面進行創建的時候，這個時候頁面都處於初始化狀態）

 mui在初始化頁面時，提供了extras配置參數，通過該參數可以設置頁面參數，從而實現頁面間傳值。
 mui框架在如下幾種場景下，會執行頁面初始化操作：
- 通過mui.openWindow()打開新頁面（若目標頁面為已預加載成功的頁面，則在openWindow方法中傳遞的extras參數無效）；
- 通過mui.init()方法創建子頁面；
- 通過mui.init()方法預加載頁面；
- 通過mui.preload()方法預加載頁面

三、頁面已經打開，傳值（在已打開的頁面間傳值）

Webview窗口對象窗口對象WebviewObject有一個evalJS方法，

可以將JS腳本發送到Webview窗口中運行，可用於實現Webview窗口間的數據通訊。

　　　mui.fire()方法——mui.fire(target, event, data)——自定義時間傳值

　　　參數說明：

- target： Type: WebviewObject 需傳值的目標webview
- event：Type: String 自定義事件名稱
- data：Type: JSON json格式的數據

1、 一和二進行傳值的局限性：只能在頁面初始化的時候進行傳值

2、 當遇到以下一種情況時（列表詳情）

（1）詳情頁一般采用預加載模式

（2）如果希望點擊列表中某一項后，顯示並更新詳情頁

　　這個時候就不能運用一和二里面的傳遞參數的方式了；這時候就需要自定義事件了。 

情景題：假定現在有一個列表頁list.html和一個詳情頁details.html

如果希望list給details傳遞一個名為”id”的自定義參數。 

首先要知道怎樣在list中調用details頁面，在mui框架中，任意頁面都有一個id，這個id默認和url一樣，也可以自定義。 

//App首頁打開列表頁
mui.openWindow({
    url:'list.html',
    id:'list'
});

//list頁面中預加載details頁面
mui.init({
    preloadPages:[{
        url:'details.html',
        id:'details'
    }]
});
var detailPage;
//點擊list中某一項時觸發details頁面的"update"事件
mui('ul.mui-table-view').on('tap','li',function(evt){
    if(!detailPage){//獲得頁面
        detailPage = plus.webview.getWebviewById('details');
    }
    mui.fire(detailPage,'update',{//觸發事件
        id:this.getAttribute('data-guid');
    });
    detailPage.show('slide-in-right',300);//顯示詳情頁
});

//在details頁面接收id參數
window.addEventListener('update',function(event){
  //獲得事件參數
  var id = event.detail.id;
  //根據id向服務器請求新聞詳情
  .....
});

　　如果希望在詳情頁瀏覽完之后更新列表頁對應塊（比如更新閱讀次數），

　　也可以在詳情頁中觸發列表頁的事件，然后在列表頁監聽事件：

//details.html中觸發list的update事件
var list=plus.webview.getWebviewById('list');
mui.fire(list,'update',{//觸發自定義事件
    id:'myid'
});
mui.webview.currentWebview().hide("auto", 300);//隱藏當前頁面

//list頁面中監聽事件
window.addEventListener('update',function(evt){
    var id=evt.detail.id;
    //do something
});