頁面傳參
頁面傳參數是一種比較常見的業務需求，根據實現原理及適用環境可以分為兩大類。
在普通瀏覽器端常用的方法有如下幾種：
1.利用URL傳參數
在頁面跳轉的時候通過設置window.location.href添加參數，在接收參數的頁面通過window.location.search獲取參數字符串。
發送參數的頁面：
window.location.href = 'new.html?targetId=123'
接收參數的頁面：
// 獲取url中的參數
function getUrlParam (name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r!= null) {
return unescape(r[2]);
}else{
return null;
}
}
//獲取url中的targetId參數
var targetId = getUrlParam('targetId');
console.log(targetId);
2.本地存儲
可以使用本地存儲的方式，可以使用cookie、sessionStorage和localStorage。
發送參數的頁面：
localStorage.setItem("targetId","123");
接收參數的頁面：
localStorage.getItem("targetId");
mui框架根據業務場景不同，提供了兩種傳值模式：
1.頁面初始化時，通過擴展參數傳值
html5+ webview中在創建新窗口的時候有一個extras參數，用於創建Webview窗口的額外擴展參數。
var w = plus.webview.create("new.html","new",{},{
targetId: '123'
});
w.show(); // 顯示窗口
// 獲取擴展參數屬性值
console.log("extras:" + w.targetId);
注意：id是WebviewObject的一個屬性，所以extras不能使用id作為參數名。
mui在初始化頁面時，提供了extras配置參數，通過該參數可以設置頁面參數，從而實現頁面間傳值。
mui框架在如下幾種場景下，會執行頁面初始化操作：
- 通過mui.openWindow()打開新頁面（若目標頁面為已預加載成功的頁面，則在openWindow方法中傳遞的extras參數無效）；
- 通過mui.init()方法創建子頁面；
- 通過mui.init()方法預加載頁面；
- 通過mui.preload()方法預加載頁面
以打開新頁面為例說明瀏覽器和基於5+的APP的兼容寫法：
var targetId = '123';
var baseUrl = 'new.html';
var url = mui.os.plus?baseUrl:baseUrl+'?targetId=' + targetId;
mui.openWindow({
url: url,
extras: {
targetId: targetId
}
})
想獲取某個webview頁面的拓展參數，可以通過webview對象獲取。例如在new.html頁面可以通過下面的方法獲取拓展參數：
mui.plusReady(function () {
var self = plus.webview.currentWebview();
// 或 var self = plus.webview.getWebviewById('new');
console.log("extras:" + self.targetId);
})
至於瀏覽器和APP兼容的寫法自己根據上面的方法和這個方法結合一下就OK了。
2.頁面已創建，通過自定義事件傳值
Webview窗口對象窗口對象WebviewObject有一個evalJS方法，可以將JS腳本發送到Webview窗口中運行，可用於實現Webview窗口間的數據通訊。
mui.fire(target, event, data)
參數說明：
- target： Type: WebviewObject 需傳值的目標webview
- event：Type: String 自定義事件名稱
- data：Type: JSON json格式的數據
發送參數的頁面：
<button id="send" type="button" class="mui-btn mui-btn-blue mui-btn-block">按鈕</button>
<script src="js/mui.js"></script>
<script type="text/javascript">
var ws = null;
mui.plusReady(function () {
ws = plus.webview.create("new.html","new",{top:"0px",bottom:"0px"});
})
document.querySelector('#send').addEventListener('tap',function () {
var targetId = '123';
ws.evalJS('send('+targetId+')');
ws.show();
})
</script>
接收參數的頁面：
<div class="mui-content">
<div id="text"></div>
</div>
<script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
mui.init();
// 接收參數的函數
function send(param){
document.getElementById("text").innerHTML = param;
}
mui.back = function(){
var self = plus.webview.currentWebview();
self.hide();
}
</script>
注：這里要重寫back,不然默認為close，當我們返回的時候再次打開show的時候需要重新創建。
顯然這樣寫有點復雜，為此mui將evalJS傳值的機制進行了封裝，通過自定義事件實現頁面傳值，可以使用mui.fire()方法可觸發目標窗口的自定義事件。
發送參數的頁面：
<button id="send" type="button" class="mui-btn mui-btn-blue mui-btn-block">按鈕</button>
<script src="js/mui.js"></script>
<script type="text/javascript">
var ws = null;
mui.plusReady(function () {
ws = plus.webview.create("new.html","new",{top:"0px",bottom:"0px"});
})
document.querySelector('#send').addEventListener('tap',function () {
mui.fire(ws,'send',{
targetId: '123'
})
ws.show();
})
</script>
接收參數的頁面：
// 添加send自定義事件監聽
window.addEventListener('send',function(event){
//獲得事件參數
var targetId = event.detail.targetId;
document.getElementById("text").innerHTML = targetId;
});
這里需要特別說明一下的是，很多人在使用mui.fire傳參數的時候會提前預加載接收參數的頁面，結果發現接收不到傳的參數，這是一種非常常見的錯誤，這里需要說明的是當預加載了頁面后，頁面上的代碼都已經執行，如果在loaded事件未完成就執行webview.evalJS或mui.fire，此時頁面接收參數失效。此時應該將接受參數的邏輯寫在webview loaded或者show監聽事件中:
驗證一個webview的loaded事件是否完成的方法：
var ws = plus.webview.getWebviewById(id)
ws.addEventListener( "loaded", function(e){
console.log( "Loaded: "+e.target.getURL() );
}, false );
驗證一個webview的show事件是否完成的方法：
var ws=plus.webview.currentWebview();
ws.addEventListener("show", function(e){
console.log( "Webview Showed" );
}, false );