Open the app's implementation code by scanning the QR code-PHP开发-php.cn

Open the app's implementation code by scanning the QR code

高洛峰

Release： 2016-12-07 10:49:17

Original

2715 people have browsed it

Recently, a friend asked me this question. Let me tell you the project requirements first: scan the QR code to open the app. If the user does not have the app, it will be prompted to jump.

It is impossible to directly call the app using the web page. You must do some configuration on the native side first.

First of all, the calling methods of Android and Apple are different.

So we need to judge the terminal first.

var u = navigator.userAgent,
app = navigator.appVersion;
var isAndroid = u.indexOf(&#39;Android&#39;) > -1 || u.indexOf(&#39;Linux&#39;) > -1; //android终端或者uc浏览器
var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

Copy after login

It is best to jump to two different pages to perform operations, because Apple needs to configure an app-id

The following is Apple’s code

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

Copy after login

The ifr.src here is the protocol path for you to open the app. Android and Apple are different.
No need to open it directly, you need to open it directly if you are using Android.

This way I can just collect them on one web page.

My link a above jumps directly to Tencent App Store.

There is no problem if you use web scanning to access it,

But I felt that something would happen, and then I scanned it with WeChat and was fooled. Android will only open a link and cannot jump to the app because it is intercepted by WeChat. The same is true for Apple. The only solution is to click on the upper right corner to prompt the user to open it in the browser. This method was a helpless move, but later a solution was found for Apple machines. The jump of link A directly jumps to the link listed on Tencent App Store, and then WeChat will handle it internally and automatically jump to the app store for you.

The last is the integrated code.

<!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?pkgname=com.edufound.mobile" id="openApp">点击打开</a>
<script type="text/javascript">
//安卓
// /**/window.location.href = "http://a.app.qq.com/o/simple.jsp?pkgname=com.edufound.mobile";
// 通过iframe的方式试图打开APP，如果能正常打开，会直接切换到APP，并自动阻止a标签的默认行为
// 否则打开a标签的href链接
var ifr = document.createElement(&#39;iframe&#39;);
ifr.src = &#39;efunbox://efunbox.app/efunbox/open&#39;;
ifr.style.display = &#39;none&#39;;
document.body.appendChild(ifr);
window.setTimeout(function(){
document.body.removeChild(ifr);
},3000);
</script>
</body>
</html>

Copy after login

Added:

Scan the QR code to jump to the app

1. Determine whether the app is installed

Copy after login

2. Open the schemurl in the project target and add ://