最近在配合移动端做几个详情页h5分享页面,需要调取App并跳转至app详情页, 如果没有安装App,需要判断引导至下载页面。
一、主要注意点有:
1、和移动端协商好调取app的url和参数:investnote://chengan:8888/main?note_id=991&open_type=1
2、判断是否是微信,因为微信不能直接调取app,需要引导用户用浏览器打开,andriod有默认的引导页,ios需要自己设计
3、大体上判断安卓和ios两种设备,再做不同处理
4、iOS版本在9以上会默认弹出一个打开APP的弹出框,通过延时来打开app的方法就不适用了
<script lang="javascript">
var createIframe=(function(){ var iframe; return function(){ if(iframe){ return iframe; }else{ iframe = document.createElement('iframe'); iframe.style.display = 'none'; document.body.appendChild(iframe); return iframe; } } })() /*判断是否是ios9以上*/ function isIOS9() { //获取固件版本 var getOsv = function () { var reg = /OS ((\d+_?){2,3})\s/; if (navigator.userAgent.match(/iPad/i) || navigator.platform.match(/iPad/i) || navigator.userAgent.match(/iP(hone|od)/i) || navigator.platform.match(/iP(hone|od)/i)) { var osv = reg.exec(navigator.userAgent); if (osv.length > 0) { return osv[0].replace('OS', '').replace('os', '').replace(/\s+/g, '').replace(/_/g, '.'); } } return ''; }; var osv = getOsv(); var osvArr = osv.split('.'); //初始化显示ios9引导 if (osvArr && osvArr.length > 0) { if (parseInt(osvArr[0]) >= 9) { return true } } return false } //判断是否是微信 function isWeiXin(){ var ua = window.navigator.userAgent.toLowerCase(); if(ua.match(/MicroMessenger/i) == 'micromessenger'){ return true; }else{ return false; } } function checkIsweixin(){ var mask = document.getElementById('mask') var openBtn = document.getElementById('openBtn') var u = navigator.userAgent; var isIos = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 if(isWeiXin() && isIos){ mask.setAttribute('style','display:block'); openBtn.setAttribute('style','display:block'); } mask.addEventListener('click', function(){ this.setAttribute('style','display:none'); openBtn.setAttribute('style','display:none'); }) openBtn.addEventListener('click', function(){ mask.setAttribute('style','display:none'); this.setAttribute('style','display:none'); }) openApp(); } function openApp(){ var localUrl="investnote://chengan:8888/main?note_id=991&open_type=1"; var openIframe=createIframe(); var u = navigator.userAgent; var isIos = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 var isAndroid= u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端 var isChrome = window.navigator.userAgent.indexOf("Chrome") !== -1; if(isIos){ if(isIOS9()){ //判断是否为ios9以上的版本,跟其他判断一样navigator.userAgent判断,ios会有带版本号 /* localUrl=createScheme({type:1,id:"sdsdewe2122"},true);//代码还可以优化一下*/ window.location.href = localUrl; return; } //判断是否是ios,具体的判断函数自行百度 window.location.href = localUrl; var loadDateTime = Date.now(); setTimeout(function () { var timeOutDateTime = Date.now(); if (timeOutDateTime - loadDateTime < 1000) { window.location.href = "https://itunes.apple.com/cn/app/%E6%8A%95%E8%B5%84%E4%BA%91/id1376471541?mt=8"; } }, 25); }else if(isAndroid){ //判断是否是android,具体的判断函数自行百度 if (isChrome) { //chrome浏览器用iframe打不开得直接去打开,算一个坑 window.location.href = localUrl; } else { //抛出你的scheme openIframe.src = localUrl; } setTimeout(function () { window.location.href ="http://chengantech.com/download/"; }, 500); }else{ //主要是给winphone的用户准备的,实际都没测过,现在winphone不好找啊 openIframe.src = localUrl; setTimeout(function () { window.location.href = "http://chengantech.com/download/"; }, 500); } } var appBtn = document.getElementById('appBtn') appBtn.addEventListener('click', checkIsweixin ) </script>
二、页面大致布局如下:
1 <div class="note-fixfoot"> 2 <a class="note-share-button" id="appBtn">用APP打开</a> 3 </div> 4 <div id="mask"></div> 5 <div id="openBtn"></div>
三、加入简单的样式:
.note-fixfoot{ position: fixed; bottom: 0; width: 100%; height: 60px; background: url('./[email protected]') no-repeat center; background-size: 100% 100%; } .note-fixfoot .note-share-button{ border-radius:4px; display: block; width: 100px; height: 34px; position: absolute; right: 20px; top: 14px; background:rgba(94,105,199,1); color: #ffffff; text-align: center; line-height: 34px; text-decoration: initial; font-weight: normal; font-size: 14px; } html,body{ overflow: hidden; } #mask{ height:100%; width:100%; position:fixed; top:0; z-index:9; opacity:0.8; filter: alpha(opacity=80); background-color:#000; display: none; } #openBtn{ width: 90%; height: 30.5%; color: #ffffff; left: 5%; top: 0; font-size: 14px; position: absolute; margin-top: -15px; cursor: pointer; background: url('./android.png') no-repeat center; background-size: contain; border-radius: 5px; text-align: center; z-index: 10; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; overflow: hidden; background-color: #ffffff; display: none; }