安卓实现方法:
$(function(){
var Id = getParameter("goodsid");
//此操作会调起app并阻止接下来的js执行,进入已安装的app
$('body').append("<iframe src='yjqandroid://?goodsid="+Id+"' style='display:none' target='' ></iframe>");
//没有安装应用会执行下面的语句
setTimeout(function() {window.location='http://a.app.qq.com/o/simple.jsppkgname=com.bjyijiequ.community'},3000);
})
实测情况:进入该H5页面后,如果安装app,会进入app内约定详情页,如果网速过慢,3000毫秒过后,会通过应用宝进入到app的首页。
如果没有安装app,会进入应用宝该app的下载页。
IOS实现方法:
var Id = getParameter("goodsid");
//进入Ios详情页
location.href = "com.sinoceanland.yjq://goodsdetail?goodsid="+Id;
var ua = navigator.userAgent;
//1000毫秒后进不了详情页,就进入应用商店下载页面
setTimeout(function() {
if (ua.indexOf('Safari') > -1) {
location.href = "https://itunes.apple.com/cn/app/yi-jie-qu/id1048321627?mt=8";
}
}, 1000);
实测情况:如果安装app,会跳入app详情页;
如果没有安装,通过浏览器打开,会弹框提示com.sinoceanland.yjq://goodsdetail的地址是错误地址,
点击按钮好之后,会进入app下载页面。
补充:
1.<meta name="apple-itunes-app" content="app-id=1048321627"> 这个标签是告诉iphone的safari浏览器,这个网站对应的app是什么,然后在页面上面显示一个下载banner
2.该h5页面需要在浏览器打开 <div class="content"><p>点击右上角“...”选择在Safari中打开, 选择Safari图标如下:</p></div>,demo如下
提示用户使用浏览器打开页面后跳转到制定页面的demo:
<style>
*{
margin:0;
padding:0;
}
body,html{
width:100%;
height:100%;
font-family:'Microsoft Yahei';
}
.background{
width:100%;
height:100%;
background-color:#000;
opacity:.5;
z-index:1;
}
.tips,.content,.safari{
z-index:2;
position:absolute;
font-size:.43rem;
color:#fff;
}
.tips{
top:0;
right:.5rem;
}
.tips img{
width:2rem;
}
.content{
top:1.95rem;
left:1.77rem;
}
.content p{
display:inline-block;
width:6.45rem;
margin-top:.59rem;
margin-bottom:.48rem;
}
.safari{
top:4rem;
left:4.45rem;
}
.safari img{
width:1.11rem;
}
</style>
<body>
<div class="background"></div>
<div class="tips">
<img src="../assets/images/tip.png">
</div>
<div class="content">
<p>点击右上角“...”选择在浏览器中打开</p>
</div>
<script>
var ua = navigator.userAgent.toLowerCase();
var isWeixin = ua.indexOf('micromessenger') != -1;
if (!isWeixin) {
var Id = getParameter("goodsid");
location.href ="./android_qrlbso2.html?k=qrso&goodsid="+Id;
}
</script>
</body>