Recently, a friend asked the editor a question, let me first tell you about the project requirements: scan the QR code to open the app if the user does not have this app, prompt it to jump.
It is impossible to call the app directly using a web page, and you must first make some configuration on the native side.
First of all, the calling methods of Android and Apple are different.
So we need to judge the terminal first.
var u = ,
app = ;
var isAndroid = ('Android') > -1 || ('Linux') > -1; //Android terminal or uc browservar isIOS = !!(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //iosterminal
After that, it is best to jump to two different pages to do the operation, because Apple needs to configure an app-id<meta name='apple-itunes-app' content='app-id=1115968341'> in the head
Below is Apple's code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name='apple-itunes-app' content='app-id=1115968341'>
<title></title>
</head>
<body>
<a href="/cn/app/yi-fang-kuai-le-xue-tang/id1115968341?mt=8" >Click to open</a>
<script type="text/javascript">
//apple('openApp').onclick = function(e){
// Try to open the APP through an iframe. If it can be opened normally, it will directly switch to the APP and automatically block the default behavior of the a tag.// Otherwise, open the href link of the a tagvar ifr = ('iframe');
= 'iosefunbox://';
= 'none';
(ifr);
(function(){
(ifr);
},3000)
};
</script>
</body>
</html>
Here is the protocol path for you to open the app. Android and Apple are different. <br><br><br>If it's an Android phone, it's simple
<!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="/o/?pkgname=" >Click to open</a>
<script type="text/javascript">
//Android// /**/ = "/o/?pkgname=";
// Try to open the APP through an iframe. If it can be opened normally, it will directly switch to the APP and automatically block the default behavior of the a tag.// Otherwise, open the href link of the a tagvar ifr = ('iframe');
= 'efunbox:///efunbox/open';
= 'none';
(ifr);
(function(){
(ifr);
},3000);
</script>
</body>
</html>
This is our original requirement, but later it changed. It would be better if Apple just jumps to the appstore directly. It doesn’t need to open it directly, but it needs to open it directly for Android.
In this way, I just need to collect them on one web page.
The link above I jumped directly to Tencent Applications.
It's fine to use web scan to access it.
But I felt something was going to happen, and then I took WeChat to scan it and got fooled. Android will only open the A link and cannot jump into the app because it is blocked by WeChat. The same is true for Apple. The solution is only to click on the upper right corner to prompt the user to open it in the browser. This method is helpless, but later I found a solution to it, which is to jump the link of the Tencent App Store directly, and then WeChat will handle it to help you automatically jump to the appstore.
Finally, there is a little integrated code.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body >
<script type="text/javascript">
var u = ,
app = ;
var isAndroid = ('Android') > -1 || ('Linux') > -1; //Android terminal or uc browservar isIOS = !!(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios terminalif(isIOS){
= "/o/?pkgname=";
}
if(isAndroid){
alert("Please click on the upper right corner to open it in the browser");
= "/o/?pkgname=";
var ifr = ('iframe');
= 'efunbox:///efunbox/open';
= 'none';
(ifr);
(function(){
(ifr);
},3000);
}
</script>
</body>
</html>
Replenish:
Scan the QR code to jump to the app
1. Determine whether the app is installed
<html>
<head>
<meta name="viewport" content="width=device-width" />
</head>
<body>
<h2><a href="mtcmtc://profile/116201417">Open scheme(mtcmtc) defined in iPhone with parameters </a></h2>
<h2><a 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:///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){
= fail;
}
}, 500);
};
}
("applink1").onclick = applink(appstore);
("applink2").onclick = applink(appstore);
</script>
</body>
</html>
2. Open the schemurl in the project target to add: //
The above is the implementation code of the app introduced by the editor to open the QR code. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support for my website!