Öffnen Sie den Implementierungscode der App, indem Sie den QR-Code scannen-PHP开发-php.cn

Öffnen Sie den Implementierungscode der App, indem Sie den QR-Code scannen

高洛峰

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

Original

2804 Leute haben es durchsucht

Kürzlich hat mir ein Freund diese Frage gestellt: Scannen Sie den QR-Code, um die App zu öffnen. Wenn der Benutzer die App nicht hat, wird er zum Springen aufgefordert.

Es ist nicht möglich, die App direkt über die Webseite aufzurufen. Sie müssen zuerst einige Konfigurationen auf der nativen Seite vornehmen.

Erstens sind die Aufrufmethoden von Android und Apple unterschiedlich.

Also müssen wir zuerst das Terminal beurteilen.

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

Nach dem Login kopieren

Danach springen Sie am besten zu zwei verschiedenen Seiten, um den Vorgang durchzuführen, da Apple im Header eine App-ID konfigurieren muss meta name='apple-itunes-app' content='app-id=1115968341'>

Das Folgende ist Apples 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>

Nach dem Login kopieren

Die ifr.src hier ist der Protokollpfad zum Öffnen der App. Android und Apple sind unterschiedlich.

Wenn es ein Android-Gerät ist, wird es einfach sein

<!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>

Nach dem Login kopieren

Ja, es hieß, dass Apple direkt zum App Store springen kann, aber das gibt es nicht Sie müssen es direkt öffnen. Für Android müssen Sie es direkt öffnen.

Auf diese Weise kann ich sie einfach auf einer Webseite zusammenfassen.

Mein Link oben führt direkt zum Tencent App Store.

Es ist kein Problem, wenn man die Webseite scannt, um darauf zuzugreifen

Aber ich hatte das Gefühl, dass etwas passieren würde, und habe mich täuschen lassen. Android öffnet nur einen Link und kann nicht zur App springen, da dieser von WeChat abgefangen wird. Das Gleiche gilt für Apple. Die einzige Lösung besteht darin, den Benutzer auf die obere rechte Ecke zu klicken, um ihn im Browser zu öffnen kein Problem sein. Diese Methode war ein hilfloser Schachzug, aber später wurde eine Lösung für Apple-Computer gefunden. Der Sprung von Link A führt direkt zu dem im Tencent App Store aufgeführten Link, und WeChat kümmert sich dann intern um den Sprung zum App Store.

Der letzte ist der integrierte Code.

Nach dem Login kopieren

Ergänzung:

Scannen Sie den QR-Code, um zur App zu springen

1. Stellen Sie fest, ob die App ist installiert

<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?mt=8&uo=6";
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>

Nach dem Login kopieren

2. Öffnen Sie das Schema im Projektziel und hängen Sie an: //