H5调取APP或跳转至下载
来源：
最近在配合移动端做几个详情页h5分享页面，需要调取App并跳转至app详情页, 如果没有安装App，需要判断引导至下载页面。
参考文档：
https://juejin.im/post/5b7efb2ee51d45388b6af96c
URL Scheme —— 唤端媒介
[scheme]://[host]/[path]?[query]我们拿 https://www.baidu.com 来举例，scheme 自然就是 https 了，后面拼接的是传递的参数。URL Schemes 没有特别严格的规范，所以后面参数的具体定义是app开发者去自定义。
就像给服务器资源分配一个 URL，以便我们去访问它一样，我们同样也可以给手机APP分配一个特殊格式的 URL，用来访问这个APP或者这个APP中的某个功能(来实现通信)。APP得有一个标识，好让我们可以定位到它，它就是 URL 的 Scheme 部分。
但是，两者还有几个重要的区别：
-
所有网页都一定有网址，不管是首页还是子页。但未必所有的应用都有自己的 URL Schemes，更不是每个应用的每个功能都有相应的 URL Schemes。几乎没有所有功能都有对应 URL 的应用。一个 App 是否支持 URL Schemes 要看那个 App 的作者是否在自己的作品里添加了 URL Schemes 相关的代码。
-
一个网址只对应一个网页，但并非每个 URL Schemes 都只对应一款应用。这点是因为苹果没有对 URL Schemes 有不允许重复的硬性要求，所以曾经出现过有 App 使用支付宝的 URL Schemes 拦截支付帐号和密码的事件。
-
一般网页的 URL 比较好预测，而URL Scheme 因为没有统一标准，所以非常难猜，通过猜来获取 应用的 URL Schemes 是不现实的。
主要注意点：
1、和原生移动端协商好调取app的Url schema和参数：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')
if(isWeiXin()){
mask.setAttribute('style','display:block');
openBtn.setAttribute('style','display:block');
return false
}
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;
}
var loadDateTime = Date.now();
setTimeout(function () {
var timeOutDateTime = Date.now();
if (timeOutDateTime - loadDateTime < 1000) {
window.location.href = "http://chengantech.com/download/";
}
}, 25);
}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('./share_wechat@3x.png') 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; }
浙公网安备 33010602011771号