5+App 开发——HTML5+ APP 页面传参详解
前言
页面传参数是一种比较常见的业务需求,在 html5+ app 中,根据实现原理及适用环境可以分为两大类。
在普通浏览器端常用的方法有如下几种:
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
);
写这些代码也许就一两个小时的事,写一篇大家好接受的文章需要几天的酝酿,如果文章对您有帮助请我喝杯咖啡吧!

Related Issues not found
Please contact @zhaomenghuan to initialize the comment