由于APP版本发布之后,对于应用内的固定页面及场景无法随意改变,只能通过版本迭代的方式来更改。后来在APP内嵌入网页之后,通过后台更改不同的配置路径,即可打开不同的页面,浏览器端的内容可以随时更改,比较灵活。
但是原生APP与网页之间的数据原本是互相独立的,打开网页后,点击网页内的内容若无任何特殊条件依然是普通跳转,从一个网页进入下一个网页,流程依然在进行网页端进行,APP端的流畅以及较好的使用体验无法体现,所以这其中就需要网页与APP之间进行数据传递;
首先,需要APP开发人员在app内注入相应的操作函数或者方法,用来控制APP中的页面跳转以及数据交互;
例如此时app开发人员已经在他们的代码中注入了一个toDetail的方法,方法传递一个商品id参数,此方法名称需与网页内部使用名称保持一致,在网页内部打开时,执行此方法,将网页内的goodsid传递至app端,打开原生app的商品详情页面,此时就完成了一次数据传递;
<html>
<body>
<button “toDetail(goodsid)” title="在app内打开的网页按钮,传递参数至原生APP">iphone XS</button>
<script>
function toDetail(goods_id) {
if(/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
//IOS
try {
//给你传值进行详情页
window.webkit.messageHandlers.toDetail.postMessage({ body: '"' + goods_id + '"' });
} catch(e) {
//浏览器
//alert(e);
window.location.href = "goods.php?id=" + goods_id;
}
} else if(/(Android)/i.test(navigator.userAgent)) {
//Android
try {
var yuyu = eval('(' + window.jkslw.getUserInfo() + ')');
window.jkslw.toDetail(goods_id);
} catch(e) {
//alert(e);//自己浏览器访问
window.location.href = "goods.php?id=" + goods_id;
}
} else {
window.location.href = "goods.php?id=" + goods_id;
}
}
</script>
</body>
</html>