h5页面打开app，安卓端和苹果端

最新推荐文章于 2025-06-24 22:39:30 发布

原创最新推荐文章于 2025-06-24 22:39:30 发布 · 10w+ 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#跳转app

本文介绍了如何实现H5页面在微信环境下提示用户在浏览器中打开，并详细讲解了安卓与苹果端的配置及跳转链接设置，包括Android的scheme配置和iOS的URL Schema设置。当APP跳转失败时，会引导用户至下载页面，针对不同安卓品牌设备，提供了跳转对应应用市场的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

h5页面打开app，安卓端和苹果端
1，微信直接蒙层，请在浏览器打开
2，安卓的跳转地址需要和开发安卓的人员沟通，配置一致，按照
在这里插入图片描述
注：图片中的VIEW为大写
android:host="******.com"
android:pathPrefix="/***"
android:scheme="***"

跳转链接就配置为
scheme://host/pathPrefix?参数="+**
苹果的地址也要配置
URL Schema://
参考地址
https://blog.youkuaiyun.com/u010960265/article/details/78918130
3，跳转app失败则跳转到下载页面，这里有参考网友的添加一个回调，苹果的下载链接只有一个，安卓的则校验机型，vivo,huawei,xiaomi等再跳转他们的应用市场，我们的app详情页；我这边校验的不多。。。
4，可以不用jquery,我只是懒得去换了
跳转时的效果在这里插入图片描述
以下是代码，比较粗糙

<!DOCTYPE html>
<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>******8</p>
					<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">剩余&nbsp; <span id="time"><i>01</i>:<i>01</i>:<i>01</i></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:13</span></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:10</p></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">正在判断是否安装了app</p>
    </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 = '<p>' + detail.productName + detail.skuValue + '</p><p>原价￥' + detail.platformPrice + '</p><p>￥'+ detail.grouponSalePrice +'<span>'+ detail.grouponRuleTag +'</span></p>';
				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 += '<div><img src="'+ detail.grouponUserVoList[i].avatar +'" width="60"/><span class="cap">团长</span></div>';
					} else {
						h2 += '<div><img src="'+ detail.grouponUserVoList[i].avatar +'" width="60"/></div>';
					}
				}
				h2 += '<div id="nextPerson">?</div>';
        document.getElementById('person').innerHTML = h2;
        if (detail.grouponStatus === 4) {
          var ph = '<p class="p3">团购已结束</p><p class="p1">您来晚了哦，快去看看其他拼团</p>';
          document.getElementById('gInfo2').innerHTML = ph;
          document.getElementById('nextPerson').style.display = 'none';
          document.getElementById('tab03').style.display = 'none';
        } else if(detail.grouponStatus === 3) {
          var ph = '<p class="p3">已成团</p><p class="p1">您来晚了哦，快去看看其他拼团</p>';
          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 += '<tr><td width="30"><img src="'+ otherLs[a].avatar +'"/></td>'+
              '<td><p class="p1">'+ otherLs[a].nickname +'</p></td>'+
              '<td style="padding-right:10px;"><p>'+ otherLs[a].grouponMemberDesc +'</p><p>剩余<span id="othTime_'+a+'">10:10:10<span></p></td>'+
              '<td width="62"><button>去拼团</button></td></tr>';
          }
        } else {
          document.getElementById('tab03').style.display = 'none';
        }
				document.getElementById('gList').innerHTML = othLsH;
        if (otherLs) {
          for (var b = 0; b < otherLs.length; b++) {
            countdown(otherLs[b].remainTime, 'othTime_'+b);
          }
        }
			}).catch(error => {
        console.log(error)
				showPopBox('获取数据失败！'+ error)
			})
		}
		function getQueryString(name) {
			var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
			var r = window.location.search.substr(1).match(reg);
			if (r != null) {
				return unescape(r[2]);
			}
			return null;
		}
		function showPopBox(message){
			document.getElementById('message').innerHTML = message;
			document.getElementById('popBox-demo').style.display = 'block';
			return false;
		}
		function hidePopBox(){
		  document.getElementById('popBox-demo').style.display = 'none';
		}
    function countdown(_t, id) {
      var _result = {
        dd:0,
        hh:0,
        mm:0,
        ss:0
      }
      if(_t > 0) {
        _result.dd=Math.floor(_t /1000/60/60/24) <10?'0'+Math.floor(_t /1000/60/60/24).toString() :Math.floor(_t /1000/60/60/24).toString();
        _result.hh=Math.floor(_t /1000/60/60%24) <10?'0'+Math.floor(_t /1000/60/60%24).toString() :Math.floor(_t /1000/60/60%24).toString();
        _result.mm=Math.floor(_t /1000/60%60) <10?'0'+Math.floor(_t /1000/60%60).toString() :Math.floor(_t /1000/60%60).toString();
        _result.ss=Math.floor(_t /1000%60) <10?'0'+Math.floor(_t /1000%60).toString() :Math.floor(_t /1000%60).toString();
        setInterval(function() {
          if (_result.ss < 1) {
            _result.ss = 60;
            if (_result.mm < 1) {
              _result.mm = 60;
              if (_result.hh < 1) {
                _result.hh = 60;
                _result.dd--;
              }
              _result.hh--;
            }
            _result.mm--;
          }
          _result.ss--;
          _result.hh = checkTime(_result.hh);
          _result.mm = checkTime(_result.mm);
          _result.ss = checkTime(_result.ss);
          if(id === 'time') {
            document.getElementById(id).innerHTML = '<i>'+ _result.dd +'天</i><i>'+ _result.hh +'</i>:<i>'+ _result.mm +'</i>:<i>'+ _result.ss;
          } else {
            document.getElementById(id).innerHTML = _result.dd + '天 '+ _result.hh +':'+ _result.mm +':' + _result.ss;
          }
          
        }, 1000);
      } else if(_t < 0) {
        document.getElementById(id).innerHTML = '<i>00</i>:<i>00</i>:<i>00</i>';
      }
    }
    function startToEndTime(ts, id) { // 计算倒计时
      setInterval(function () {
        var dd = parseInt(ts  / 60 / 60 / 24, 10);//计算剩余的天数
        var hh = parseInt(ts  / 60 / 60 % 24, 10);//计算剩余的小时数
        var mm = parseInt(ts  / 60 % 60, 10);//计算剩余的分钟数
        var ss = parseInt(ts  % 60, 10);//计算剩余的秒数
        dd = checkTime(dd);
        hh = checkTime(hh);
        mm = checkTime(mm);
        ss = checkTime(ss);
        if(ts>0){
          document.getElementById(id).innerHTML = '<i>'+ dd +'天</i><i>'+ hh +'</i>:<i>'+ mm +'</i>:<i>'+ ss;
          startTime++;
        }else if(ts<0){
          document.getElementById(id).innerHTML="00:00:00";
  　　　　location.reload();
        }
      }, 1000);
    }
    function checkTime(i){
      i = parseInt(i);
      if (i <= 9) {
        i = "0" + i;
      }
      return i;
    }
	</script>
</body>

<style>
		html,body {
			margin: 0;
			padding: 0;
			background: #F8F8F8;
			color: #333333;
			font-size: 16px;
		}
		div {
			font-size: 0;
		}
		p {
			margin: 0;
		}
		table {
			border-spacing:0;
			border-collapse:collapse
		}
		.tab01 {
			padding: 0 15px;
			background: #fff;
		}
		.tab01 table {
			width: 100%;
			border-bottom: 1px solid #EEEEEE;
			margin-bottom: 10px;
		}
		.tab01 table tr td {
			padding: 10px 0;
		}
		.tab01 table tr td:nth-child(1) img {
			width: 80px;
			margin-right: 10px;
		}
		.tab01 table tr td p:nth-child(1) {
			font-size: 16px;
			color: #333333;
			max-width: 255px;
			overflow: hidden;
			text-overflow:ellipsis;
			white-space: nowrap;
		}
		.tab01 table tr td p:nth-child(2) {
			color: #CECECE;
			text-decoration: line-through;
			font-size: 12px;
			line-height: 18px;
		}
		.tab01 table tr td p:nth-child(3) {
			font-size: 18px;
			color: #EB4A3E;
			line-height: 24px;
		}
		.tab01 table tr td p:nth-child(3) span {
			color: #FFB06C;
			font-size: 10px;
			background: #FFF9DB;
			padding: 0 5px;
			border-radius: 6px;
			line-height: 12px;
      margin-left: 5px;
		}
		.tab01 .d1 {
			font-size: 16px;
			line-height: 28px;
			padding-bottom: 20px;
		}
		.tab01 .d1 p {
			text-align: center;
			font-size: 16px;
		}
		.tab01 .d1 .p1 span {
			color: #EB4A3E;
		}
		.tab01 .d1 .p2 {
			font-size: 14px;
		}
		.tab01 .d1 .p2 span i{
			font-style: normal;
			background: #333333;
			font-size: 12px;
			color: #ffffff;
			padding:3px;
			border-radius: 5px;
			margin: 2px;
			text-align: center;
		}
		.d1_d {
			margin: 20px auto;
      text-align: center;
      max-width: 100%;
      overflow: hidden;
      height: auto;
		}
		.d1 .d1_d div{
			width: 60px;
			height: 60px;
			overflow: hidden;
			display: inline-block;
			border-radius: 100%;
			border: 1px solid #55C47D;
			margin-right: 10px;
		}
		.d1 .d1_d div:last-child {
			margin-right: 0;
		}
		.d1 .d1_d #nextPerson{
			color: #55C47D;
			font-size: 35px;
			line-height: 60px;
			border:1px dashed #55C47D;
			background: #EEF9F2;
			text-align: center;
		}
		.d1 .d1_d div .cap {
			font-size: 10px;
			line-height: 18px;
			background: linear-gradient(to top, #F76B1C, #FAD961);
			border-radius: 6px;
			position: absolute;
			color: #fff;
			padding: 0 8px;
			margin-top: 43px;
			margin-left: -48px;
		}
		.d1 button {
			color: #ffffff;
			line-height: 40px;
			margin: 0 auto;
			background: linear-gradient(to left, #55C47D, #74D9A1);
			border-radius:30px;
			border:none;
			width: 260px;
			font-size: 20px;
			display: block;
		}
    .d1 button a {
      text-decoration:none;
      color: #ffffff;
      width: 100%;
      display: block;
    }
		.tab02 {
			background: #fff;
			margin-top:10px;
			padding: 0 20px;
		}
		.tab02 div {
			line-height: 40px;
			font-size: 14px;
			border-bottom: 1px solid #EEEEEE;
		}
		.tab02 div:last-child {
			border-bottom: none;
		}
		.tab02 div span {
			color: #777777;
			float: right;
			font-size: 12px;
		}
		.popBox-mask{
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			opacity: .6;
			z-index: 999;
			background-color: #000;
		}
		.popBox-content{
		    position: fixed;
		    left: 50%;
		    top: 50%;
		    transform: translate(-50%,-50%);
		    z-index: 999;
		    background: #fff;
		    width: 60%;
		    font-size: 12px;
		    border-radius: 10px;
		    padding: 20px;
		    text-align: center;
		}
		.ybut{
		    background: #55DA9A;
		    color: #EEEEEE;
		    text-align: center;
		    margin: 0 auto;
		    font-size: 12px;
		    padding: 5px 15px;
		    border-radius: 5px;
		    margin-top: 20px;
			border: 0;
		}
		.tab01 .d1 .p3 {
			font-size: 24px;
			color: #999999;
			line-height: 40px;
			font-weight: bold;
		}
		.tab03 {
			background: #ffffff;
			margin-top:10px;
			margin-bottom:20px;
		}
		.tab03 .tt {
			font-size: 14px;
			color: #999999;
			line-height: 40px;
			padding-left: 20px;
			border-bottom: 1px solid #EEEEEE;
		}
		.tab03 table {
			width: 100%;
		}
		.tab03 table tr td {
			border-bottom: 1px solid #EEEEEE;
		}
		.tab03 table tr:last-child td {
			border-bottom: none;
		}
		.tab03 table tr td:nth-child(2) p.p1{
			padding:10px;
			font-size: 14px;
			color: #777777;
			line-height: 30px;
			overflow: hidden;
			text-overflow:ellipsis;
			white-space: nowrap;
			max-width: 120px;
		}
		.tab03 table tr td:nth-child(3) p{
			text-align: right;
			font-size: 12px;
			line-height: 12px;
		}
		.tab03 table tr td:nth-child(3) p:nth-child(1) {
			color: #333333;
      margin-bottom: 6px;
		}
		.tab03 table tr td:nth-child(3) p:nth-child(2) {
			color: #C8C8C8;
		}
		.tab03 table tr td button {
			color: #ffffff;
			line-height: 30px;
			margin: 0 auto;
			background: linear-gradient(to left, #55C47D, #74D9A1);
			border-radius:15px;
			border:none;
			font-size: 12px;
			display: block;
			padding: 0 8px;
			min-width: 59px;
		}
		
		.tab03 table tr td img {
			width: 30px;
			height: 30px;
			border-radius: 100%;
			border: none;
		}
    .openApp {
      width:100%;
      margin: 20px 0;
    }
	</style>