As front-end developers, there is often a need to open the APP home page or a specified page if a user has installed his APP, and jump to the corresponding download page if he has not installed the APP. Such a need is also an essential link in pulling new and fission, so we need to solve. Here’s how to do that.
Jump to APP
There are two good ways to do this: URL schemes, Meta tags, and Universal Links.
URL Scheme
A URL Scheme is an external interface that allows apps to jump to each other. By defining a unique URL path for the APP to quickly open the specified APP from the outside, each APP’s URL Scheme is different, if the same URL Scheme exists, then the system will respond to install the APP’s URL Scheme first. Because the URL Scheme of the app installed later is overwritten, it cannot be called. The URL scheme format is:
[scheme]://[host]/[path]? [query]Copy the codeSome common URL Scheme platforms are introduced:
- QQ: MQQ: / /
- WeChat: weixin: / /
- TencentWeibo://
- Taobao, taobao: / /
- Alipay ://
- Weibo: sinaweibo: / /
Supports both Android and iOS platforms
Meta tags
Set the Meta TAB on a web page, and when opened in Safari, it will display your app’s navigation bar at the top. If you do not have an app installed, click to jump to the App Store to download, if you have an app installed, you can directly wake up the app through the meta tag at the top.
IOS unique
Universal Links
Universal Links is a Universal link that users with iOS9 or above can click on to seamlessly redirect to an app without having to go to Safari to open the jump. If the user has not installed the app, the page to which the link points will be opened in Safari.
It’s unique to iOS and only came out with iOS9.0
Use in various ways
Both the URL Scheme and the Universal Links need to be configured.
The URL Scheme using
The URL Scheme is not difficult to use. The simplest way to use the URL Scheme is to add a tag link:
<a href="weixin://"> </a>Copy the codeThis way of access is relatively simple, android and IOS can be used, but not in the wechat side, wechat side set the whitelist, completely blocked URL Scheme usage, unless added to the whitelist, like JD can directly open, otherwise it is impossible.
Meta Tag Usage
The meta tag is as simple as adding a meta tag to the page:
<meta charset="UTF-8" name="apple-itunes-app" content="app-id=7777777, affiliate-data=myAffiliateData, app-argument=yourScheme://">
Copy the codeThe effect is to display a top bar at the top of the page.
The Universal Links use
This way of configuration is a little troublesome, I have not been exposed to the development of iOS, so I will give you an introduction to the official website
conclusion
Each of the above is not a perfect solution, either apple only supports it, or there are a lot of header APP limitations, so you have to do a lot of other work to fit it.
First of all, we need to determine which method to use. Based on the above, only the first URL Scheme is the best choice because both platforms support it. The next two are how to solve the problem of how to open the header APP. So that basically solves the problem, so let’s do it step by step in code.
Realize the function of waking up the APP
Prompt the browser to open
First you need to implement a little prompt that opens in the browser as follows:
Realize the function of judging the header APP
Here is to judge whether it is wechat or other APP browser through the browser’s user-agent. The code is as follows:
/** * Determine whether the browser is the header APP */function isBlackApp() {
var u = navigator.userAgent.toLowerCase();
return /micromessenger/i.test(u) || u.indexOf("weibo") > -1 || u.indexOf("qq") > -1 || u.indexOf('mqqbrowser') > 1; }Copy the codeThe above function determines several browsers, wechat, Weibo, QQ, QQ browser. If you click the “open” or “download” button, it will determine whether it is a header APP, if it is, it will prompt you to open it in the browser, otherwise, you can directly open your own APP, the code is as follows:
function openTuer() {
if(isBlackApp()) {// The header APP makes the web page display prompt open showTips() in the browser; }else{// openApp(0, 0); // openApp(0, 0); }}Copy the codeThe core way to wake up your APP
The openApp function is also mentioned above, so what is the specific, here we will see how to implement this function. According to my current project requirements, there are two parameters required to open the APP. One is which, which is a certain page of the APP, and the other is arg, which is a parameter required to open a certain page. That’s why our openApp function takes two arguments.
The realization of the openApp
The openApp function simply calls the following two functions:
function openApp(which, arg) {
jumpApp("testApp://which=" + which + "&arg=" + arg);
noApp();
}
Copy the codeThe first function is responsible for opening the APP, and the second function is responsible for the address to jump to if the APP is not opened or installed.
The realization of the jumpApp
Iframe: iframe: iframe: iframe: iframe: iframe: iframe: iframe
function jumpApp(t) {
try {
var e = navigator.userAgent.toLowerCase(),
n = e.match(/cpu iphone os (.*?) like mac os/);
if(((n = null ! == n ? n[1].replace(/_/g,".") : 0), parseInt(n) >= 9)) {
window.location.href = t;
} else {
var r = document.createElement("iframe");
(r.src = t), (r.style.display = "none"), document.body.appendChild(r); } } catch (e) { window.location.href = t; }}Copy the codeThe realization of the noApp
The implementation of noApp is as simple as defining a timer that will redirect to a specific download page if nothing happens within a certain period of time. The specific code is as follows:
var timer = null;
function noApp() {
var t = Date.now(),
r = "http://www.tuerapp.com";
timer = setTimeout(function() {
returnDate.now() - t > 2200 ? (clearTimeout(timer), ! 1) :! document.webkitHidden && ! document.hidden && void (location.href = r); }, 2000); }Copy the codeTo achieve the basic function, the actual process may still have a lot of problems, if you have a message oh.