华山资源网

通过扫描二维码打开app的实现代码
网络编程 2024/11/18 佚名
3 1

最近有朋友问小编这样一个问题，先给大家说下项目需求：扫描二维码打开app如果用户没有这个app则提示它跳转。

用网页直接来调用app是不打可能的，必须原生那边先做一些配置。

首先，安卓和苹果的调用方法是不同的。

所以我们需要先判断一下终端。

var u = navigator.userAgent,
app = navigator.appVersion;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或者uc浏览器
var isIOS = !!u.match(/\(i[^;]+;( U;)"htmlcode">



<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name='apple-itunes-app' content='app-id=1115968341'>
<title></title>
</head>
<body>
<a href="https://itunes.apple.com/cn/app/yi-fang-kuai-le-xue-tang/id1115968341" id="openApp">点击打开</a>
<script type="text/javascript"> 
//苹果
document.getElementById('openApp').onclick = function(e){ 
// 通过iframe的方式试图打开APP，如果能正常打开，会直接切换到APP，并自动阻止a标签的默认行为 
// 否则打开a标签的href链接 
var ifr = document.createElement('iframe'); 
ifr.src = 'iosefunbox://'; 
ifr.style.display = 'none'; 
document.body.appendChild(ifr); 
window.setTimeout(function(){ 
document.body.removeChild(ifr); 
},3000) 
};
</script>
</body>
</html>





这里的ifr.src就是你去打开app的协议路径,安卓和苹果是不一样的。<br><br><br>如果是安卓机的话就简单了





<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
</head>
<body>
<a href="http://a.app.qq.com/o/simple.jsp" id="openApp">点击打开</a>
<script type="text/javascript">
//安卓
// /**/window.location.href = "http://a.app.qq.com/o/simple.jsp";
// 通过iframe的方式试图打开APP，如果能正常打开，会直接切换到APP，并自动阻止a标签的默认行为 
// 否则打开a标签的href链接 
var ifr = document.createElement('iframe'); 
ifr.src = 'efunbox://efunbox.app/efunbox/open'; 
ifr.style.display = 'none'; 
document.body.appendChild(ifr); 
window.setTimeout(function(){ 
document.body.removeChild(ifr); 
},3000);
</script>
</body>
</html>





这是我们原先的需求，后来变了，说苹果直接跳转到appstore里面就好了，不用直接打开，安卓的话需要直接打开。


这样我就直接把它们集合在一个网页就行。


我上面的a链接是直接跳转到腾讯应用宝里面。


用网页扫描访问的话是没问题的，


但是我就感觉会出事，后来拿微信扫一扫就蒙逼了。安卓只会打开a链接，跳转不进app,因为被微信拦截掉了，苹果也一样，解决的方案只能是点击右上角，提示用户在浏览器打开就没问题。这种方法是无奈之举，但后来针对苹果机找到了一个解决它的方案就是，a链接的跳转直接跳腾讯应用宝上架的链接，然后微信内部会处理帮你自动跳转到appstore里面。


最后是整合了一下的代码。





<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body id="body">
<script type="text/javascript">
var u = navigator.userAgent,
app = navigator.appVersion;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或者uc浏览器
var isIOS = !!u.match(/\(i[^;]+;( U;)"http://a.app.qq.com/o/simple.jsp"; 
}
if(isAndroid){
alert("请点击右上角在浏览器打开");
window.location.href = "http://a.app.qq.com/o/simple.jsp";
var ifr = document.createElement('iframe'); 
ifr.src = 'efunbox://efunbox.app/efunbox/open'; 
ifr.style.display = 'none'; 
document.body.appendChild(ifr); 
window.setTimeout(function(){ 
document.body.removeChild(ifr); 
},3000);
}
</script>
</body>
</html>





补充：


扫描二维码跳转app


1、判断是否安装了app





<html> 
<head> 
<meta name="viewport" content="width=device-width" /> 
</head> 
<body> 
<h2><a id="applink1" href="mtcmtc://profile/116201417">Open scheme(mtcmtc) defined in iPhone with parameters </a></h2> 
<h2><a id="applink2" href="unknown://nowhere">open unknown with fallback to appstore</a></h2> 
<p><i>Only works on iPhone!</i></p> 
<script type="text/javascript"> 
// To avoid the "protocol not supported" alert, fail must open another app.
var appstore = "itms://itunes.apple.com/us/app/facebook/id284882215";
function applink(fail){
return function(){
var clickedAt = +new Date;
// During tests on 3g/3gs this timeout fires immediately if less than 500ms.
setTimeout(function(){
// To avoid failing on return to MobileSafari, ensure freshness!
if (+new Date - clickedAt < 2000){
window.location = fail;
}
}, 500); 
};
}
document.getElementById("applink1").onclick = applink(appstore);
document.getElementById("applink2").onclick = applink(appstore);
</script> 
</body> 
</html>





2、打开项目工程target里面的schemurl追加://


以上所述是小编给大家介绍的通过扫描二维码打开app的实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com