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

最新推荐文章于 2024-09-18 10:45:14 发布

woyaojiay

最新推荐文章于 2024-09-18 10:45:14 发布

阅读量10w+

点赞数 2

文章标签：跳转app

本文链接：https://blog.csdn.net/weixin_44731065/article/details/93627848

版权

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

摘要由CSDN通过智能技术生成

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,我只是懒得去换了
跳转时的效果在这里插入图片描述
以下是代码，比较粗糙

<!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>
					&l