Home > Article > php教程 > Open the app’s implementation code by scanning the QR code

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

高洛峰Original: 2016-12-07 10:49:172775browse

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终端

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

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>

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>

Added:

Scan the QR code to jump to the app

1. Determine whether the app is installed

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

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to handle the mouse wheel event onmousewheel in htmlNext article：How to handle the mouse wheel event onmousewheel in html

See more

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

Related articles