h5页面打开app，安卓端和苹果端
h5页面打开app，安卓端和苹果端
1，微信直接蒙层，请在浏览器打开
2，安卓的跳转地址需要和开发安卓的人员沟通，配置一致，按照
注：图片中的VIEW为大写
android:host="******.com"
android:pathPrefix="/***"
android:scheme="***"
跳转链接就配置为
scheme://host/pathPrefix?参数="+**
苹果的地址也要配置
URL Schema://
参考地址
https://blog.csdn.net/u010960265/article/details/78918130
3，跳转app失败则跳转到下载页面，这里有参考网友的添加一个回调，苹果的下载链接只有一个，安卓的则校验机型，vivo,huawei,xiaomi等再跳转他们的应用市场，我们的app详情页；我这边校验的不多。。。
4，可以不用jquery,我只是懒得去换了
跳转时的效果
以下是代码，比较粗糙
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
<title>团购详情title>
<script src="https://unpkg.com/axios/dist/axios.min.js">script>
<head>
<body onload="init()">
<div class="tab01">
<table cellspacing="0" cellpadding="0">
<tr>
<td width="90">
<img id="url"/>
td>
<td id="gInfo">
<p>******8p>
<p>原价￥*p>
<p>￥0.0<span>*人团span>p>
td>
tr>
table>
<div class="d1">
<div id="gInfo2">
<p class="p1">还差<span id="lessCount">*人span>成团，赶快邀请好友来拼团~p>
<p class="p2">剩余 <span id="time"><i>01i>:<i>01i>:<i>01i>span>p>
div>
<div class="d1_d" id="person">
<div><img width="60"/>div>
<div id="nextPerson">?div>
div>
<button>
<a id="a-btn" style="display: none">我要参团a>
<a id="i-btn" style="display: none">我要参团a>
button>
div>
div>
<div class="tab02">
<div>开团时间<span id="openGrouponTime">2019-03-26 14:28:13span>div>
<div>拼团须知<span id="grouponNotice">好友拼团-人满发货-不满团款span>div>
div>
<div class="tab03" id="tab03" style="display: none">
<p class="tt">以下用户正在开团，可直接参与p>
<div style="padding:0 20px">
<table id="gList">
<tr>
<td width="30"><img/>td>
<td style="line-height: 30px">进时光勇士td>
<td><p>差1人开团p><p>剩余10:10:10p>td>
<td><button>去拼团button>td>
tr>
table>
div>
div>
<div class="popBox" id="popBox-demo" style="display:none">
<div class="popBox-mask">div>
<div class="popBox-content">
<p id="message" style="text-align:center">p>
<button id="closeBut" class="ybut" onclick="hidePopBox()">确定button>
div>
div>
<div class="popBox" id="tioozhuan" style="display:none">
<div class="popBox-mask">div>
<div class="popBox-content">
<p style="text-align:center">正在判断是否安装了appp>
div>
div>
<div class="popBox" id="weixinTD" style="display:none">
<div class="popBox-mask">div>
<div class="popBox-content jiant" style="clear:left; top: 10%;right:0;">
<p style="text-align:center">请点击右上角，在浏览器打开 →p>
div>
div>
<script>
var localUrl = window.location.href;
let u = navigator.userAgent, ua = u.toLowerCase();
let {isAndroid,isIOS,isIOS9} = detectVersion();
function detectVersion() {
let isAndroid,isIOS,isIOS9,version;
if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) { //android终端或者uc浏览器
//Android系统
isAndroid = true
}
if(ua.indexOf("like mac os x") > 0){
//ios
var regStr_saf = /os [\d._]*/gi ;
var verinfo = ua.match(regStr_saf) ;
version = (verinfo+"").replace(/[^0-9|_.]/ig,"").replace(/_/ig,".");
}
var version_str = version+"";
if(version_str != "undefined" && version_str.length >0){
version = parseInt(version)
if(version>=8){
// ios9以上
isIOS9 = true
}
else{
isIOS = true
}
}
return {isAndroid,isIOS,isIOS9}
}
// 判断手机上是否安装了app，如果安装直接打开url，如果没安装，执行callback
function openApp(callback) {
var url = "";
if (isAndroid) {
url = "myapp://***********/openApp?grouponId="+grouponId;
var timeout, t = 4000, hasApp = true;
var openScript = setTimeout(function () {
if (!hasApp) {
callback && callback();
document.getElementById('tioozhuan').style.display= "none";
}
document.body.removeChild(ifr);
}, 5000)
var t1 = Date.now();
var ifr = document.createElement("iframe");
ifr.setAttribute('src', url);
ifr.setAttribute('style', 'display:none');
document.body.appendChild(ifr);
timeout = setTimeout(function () {
var t2 = Date.now();
if (t2 - t1 < t + 100) {
hasApp = false;
}
}, t);
}
if (isIOS) {
var loadDateTime = new Date();
window.setTimeout(function() {
var timeOutDateTime = new Date();
if (timeOutDateTime - loadDateTime < 5000) {
window.location.href = "https://apps.apple.com/cn/app/****************";
} else {
window.close();
}
document.getElementById('tioozhuan').style.display= "none";
},
25);
window.location.href = "*******://openAppdl?grouponId="+grouponId;
}
if(isIOS9){
location.href = "******://openAppdl?grouponId="+grouponId;
setTimeout(function() {
callback && callback();
document.getElementById('tioozhuan').style.display= "none";
}, 250);
setTimeout(function() {
location.reload();
}, 1000);
}
}
//跳h5
function goAndriAddr(){
var isVivo = ua.indexOf('vivo') != -1;
var isHuawei = ua.indexOf('huawei') != -1;
var isMi = ua.indexOf('redmi') != -1;
var hreff = '';
if (isVivo) {
hreff = 'vivoMarket://details?id=*************';
} else if (isHuawei) {
hreff = 'appmarket://details?id=*************';
} else if (isMi) {
hreff = 'mimarket://details?id=*************';
} else {
hreff = 'tmast://appdetails?pname=*************'; // 应用宝
}
window.location.href = hreff;
}
function goIOSAddr(){
window.location.href = "https://apps.apple.com/cn/app*************";
}
script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js">script>
<script>
var isWeixin = ua.indexOf('micromessenger') != -1;
$(function(){
//判断执行安卓按钮还是苹果按钮
if(isAndroid){
$("#a-btn").show();
}else{
$("#i-btn").show();
}
});
if(isWeixin) {
document.getElementById('weixinTD').style.display= "block";
}
//跳转下载
$("#a-btn").click(function(){
document.getElementById('tioozhuan').style.display= "block";
//安卓
openApp(goAndriAddr);
});
$("#i-btn").click(function(){
document.getElementById('tioozhuan').style.display= "block";
openApp(goIOSAddr);
});
script>
<script>
var host = 'http://192.168.101.27:8082';
var grouponId = getQueryString('grouponId');
// getQueryString('grouponId');
var detail = [];
var h,m,s='00';
function init() {
if (grouponId == null) {
showPopBox('获取团购信息失败！');
return;
}
axios.post(host + '/api/groupon/******', {'grouponId': grouponId}).then(response => {
// alert(JSON.stringify(response));
detail = response.data.mDataBody.grouponSkuVo;
var h = ''
+ detail.productName + detail.skuValue + '原价￥'
+ detail.platformPrice + '￥'
+ detail.grouponSalePrice +''+ detail.grouponRuleTag +'';
document.getElementById('gInfo').innerHTML = h;
document.getElementById('url').src = detail.imgUrl;
document.getElementById('openGrouponTime').innerHTML = detail.openGrouponTime;
document.getElementById('grouponNotice').innerHTML = detail.grouponNotice;
var h2 = '';
var len = detail.grouponUserVoList.length;
var lessCount = detail.discountMember-len;
for (var i = 0; i < len; i++) {
if (detail.grouponUserVoList[i].grouponRoleType === 1) {
h2 += '
+ detail.grouponUserVoList[i].avatar +'" width="60"/>团长';
} else {
h2 += '+ detail.grouponUserVoList[i].avatar +'" width="60"/>';
}
}
h2 += '?';
document.getElementById('person').innerHTML = h2;
if (detail.grouponStatus === 4) {
var ph = '团购已结束
您来晚了哦，快去看看其他拼团
';
document.getElementById('gInfo2').innerHTML = ph;
document.getElementById('nextPerson').style.display = 'none';
document.getElementById('tab03').style.display = 'none';
} else if(detail.grouponStatus === 3) {
var ph = '已成团
您来晚了哦，快去看看其他拼团
';
document.getElementById('gInfo2').innerHTML = ph;
document.getElementById('nextPerson').style.display = 'none';
document.getElementById('tab03').style.display = 'none';
} else if (detail.grouponStatus === 5) {
if (lessCount >= 1) {
document.getElementById('lessCount').innerHTML = lessCount+ '人';
// 倒计时
countdown(detail.remainTime, 'time');
}
}
var otherLs = response.data.mDataBody.grouponSkuVoList;
var othLsH = '';
if (otherLs) {
for (var a = 0; a < otherLs.length; a++) {
othLsH += '+ otherLs[a].avatar +'"/> '+
''+ otherLs[a].nickname +'
'+ otherLs[a].grouponMemberDesc +'
剩余+a+'">10:10:10