Take Android as an example to realize the steps of H5 calling app:
-
In Android Androidmanifest.xml, add an attribute under the Activity:
<intent-filter> <action android:name="android.intent.action.VIEW" /> <category android:name="android.intent.category.DEFAULT" /> <category android:name="android.intent.category.BROWSABLE" /> <data android:scheme="xxx" /> </intent-filter> Copy the codeCustomize scheme://host/path, for example, mqqwpa://im/chat? Chat_type =wpa, corresponding to android data:
<data android:scheme="mqqwpa" android:host="im" android:pathPrefix="/chat"/> Copy the code“?” The chat_type parameter is wpa, which is the same as the HTTP URL or API: www.baidu.com? Id =1!
-
In the Activity, write the receiving code:
String action = getIntent().getAction(); if (Intent.ACTION_VIEW.equals(action)) { Uri uri = getIntent().getData(); if(uri ! =null) { LogUtil.e(uri.getHost() + uri.getPath()); }}Copy the codeWe use getHost and getPath to determine the specific open path, uri.getQueryParameter(” ID “) to get the parameter, and then jump to the target Activity!
-
open app and click the hyperlink to activate app!
There are two things to note here:
-
Scheme ://host/path
In general, it is best to define only scheme when defining paths, for example:
<data android:scheme="xxx" /> Copy the codeInstead of defining a specific host and path, we can’t just jump to one Actviity. If we need to jump to multiple activities, we can just write different paths in H5 (to keep scheme consistent). In the code, we can determine the specific jump intention by obtaining host and path.
-
2. Which Activity should we define Scheme in?
Again, the first point is why we define scheme and not a specific host and path, because we don’t just need to open one Activity. If we define a specific host and path, then we need to define multiple data under different activities in the manifest file. This is possible in theory, but the downside is that when we open a specific Activity and press the back button, we exit the app. This is not a good user experience, right?
Therefore, it is best to define scheme in the launch page SplashActivity. In the code, you only need to add the intent action and scheme decision after the step SplashActivity->MainActivity, and then jump again.
startActivity(new Intent(mContext, MainActivity.class)); String action = getIntent().getAction(); if (Intent.ACTION_VIEW.equals(action)) { Uri uri = getIntent().getData(); if(uri ! =null) { if (uri.getHost().equals("xxx") && uri.getPath().equals("/xxx")) { String id = uri.getQueryParameter("id"); if(! TextUtils.isEmpty(id)) { Intent intent =newIntent(mContext, XXXActivity.class); intent.putExtra(Const.PARAM_ID, id); startActivity(intent); }}}}Copy the codeThis allows you to quickly enter the target Activity, and when you press the back key, it will be returned to the MainActivity instead of exiting the app (Splah and Main are best launched as SingleTask)!
In this way, an H5 tune up app function will be written, but when you take out the product and test students to use, will be mercilessly hit in the face!!
Problem 1: When the user has not installed the APP, there is no response when he clicks the “up” link. However, the product needs to jump to the download page if the app is not installed, and open it directly if the app has been installed.
Question 2, also the most fatal problem, the general sharing promotion and promotion are carried out in wechat, when you share a promotion page with a friend in wechat, the friend clicks open the app and there is no response, will you feel desperate?
First of all, because h5 can not directly determine whether the user installed the application, so the majority of users also have their own solution, is to click open APP button, call JS method, no matter the installation is not installed, in n seconds after entering the download page! But in fact, when you click in the browser, the browser will have a pop-up prompt “whether to open the app”. If the user agrees quickly, it is ok. If the user agrees slowly, first, the pop-up will disappear after a few seconds, and second, because we have written the download method, there will be a download prompt, this experience is very bad!
window.location = "mqqwpa://im/chat? chat_type=wpa";
let loadDateTime = new Date(a);window.setTimeout(function () {
let timeOutDateTime = new Date(a);if (timeOutDateTime - loadDateTime < 5000) {
window.location = "http://qq.apk";
} else {
window.close(); }},500);
Copy the code
Here is a direct open QQ chat window example:
In the qq family bucket, QQ, QQ browser, wechat, window.onload failure, can not automatically jump, can only manually click the jump:
Of course, the solution is not without, Tencent App Treasure provides its own micro download promotion function, the premise is that your app in Tencent App Treasure shelves can be used:
Tencent development platform background management, open their own applications:
This is… The author is also very speechless… , so now the solution is only to judge the browser, is QQ, wechat or other browsers, and then jump to different links, QQ family bucket jump application treasure link, other browsers jump custom scheme:
let u = navigator.userAgent;
if (u.indexOf('QQ') > -1 || u.indexOf('WeChat') > -1) {
window.location ="https://a.app.qq.com/o/simple.jsp?pkgname=com.tencent.mobileqq";
} else {
window.location = path;
}
Copy the codeBut here comes the problem, although the app page can be called app, but I defined scheme and parameters? Cannot transmit and receive ah?? It’s a big problem!
But, don’t try so hard, the tencent open platform provides applink ability, access, after his own scheme can be joining together behind the application links to treasure, in the qq buckets including WeChat perfect open the specified page, support android and apple at the same time, it should be pointed out that, applink ability need to apply for, and does not support the user direct application background operation, Need to add QQ group to find management application (this operation of the author is also a bit of a fan -!) In addition, if you have not installed the APP, click download on the app link page, it will automatically copy your Scheme information to the clipboard, you can check the clipboard content after downloading, installing and opening the APP, and make the corresponding jump!
Open theTencent App Treasure access documents: Find below:
window.location ="https://a.app.qq.com/o/simple.jsp?pkgname=com.tencent.mobileqq
&android_schema=xxx&ios_scheme=xxx";
Copy the codeThe following is a summary of the support of various browsers for H5 calling app:
| QQ/QQ browser | Other Browsers | ||
|---|---|---|---|
| window.onload | Does not support | Does not support | support |
| The custom scheme | support | Does not support | support |
| Custom download | support | Does not support | support |
| App Treasure Link | support | support | Does not support |
H5 page source:
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
.container {
max-width: 640px;
height: 100vh;
margin: auto;
background: #3a8ee6;
text-align: center;
padding-top: 50%;
}
.container img {
width: 80px;
height: 80px;
margin-bottom: 40px;
}
.container .btn {
margin-top: 10px;
width: 80%;
height: 45px;
background: #2bd9b4;
border-radius: 23px;
color: white;
text-align: center;
line-height: 45px;
margin-left: 10%;
}
</style>
</head>
<body>
<div class="container">
<div>
<img src="https://pp.myapp.com/ma_icon/0/icon_6633_1631677952/96">
</div>
<div class="btn" onclick="openApp()">Open the QQ</div>
<div class="btn" onclick="toDown()">Download the QQ</div>
</div>
<script>
let path = "mqqwpa://im/chat? chat_type=wpa&uin=800013811";
function toDown() {
let u = navigator.userAgent;
let url;
if (u.indexOf('iPhone') > -1) { //iphone
url = "https://apps.apple.com/cn/app/qq/id444934666"
} else if (u.indexOf('Android') > -1) { //android
url = "https://down.qq.com/qqweb/QQ_1/android_apk/Android_8.8.28.6155_537094708_32.apk"
}
window.location = url;
}
function openApp() {
let u = navigator.userAgent;
if (u.indexOf('QQ') > -1 || u.indexOf('WeChat') > -1) {
window.location =
"https://a.app.qq.com/o/simple.jsp?pkgname=com.tencent.mobileqq&android_schema=" + encodeURIComponent(path) +
"&ios_scheme=" + encodeURIComponent(path);
} else {
window.location = path; }}window.onload = function() {
openApp();
}
</script>
</body>
</html>
Copy the codeMicrodownload Applink access document:
# # # android_schema parameter passing way (the agreement in the browser can arouse), for example, the original micro download link is: http://a.app.qq.com/o/simple.jsp?pkgname=com.xxx.xxx jump pseudo corresponding application protocol is: XXX :// XXX /test? http://a.app.qq.com/o/simple.jsp?pkgname=com.xxx.xxx &android_schema=xxx%3A%2F%2Fxxx%2Ftest%3Fid%3D1 If you want android and IOS to support APPlink, you can concatenate the two corresponding schemas. http://a.app.qq.com/o/simple.jsp?pkgname=com.xxx.xxx &ios_scheme=xxx%3A%2F%2Fxxx%2Ftest%3Fid%3D1 &android_schema= XXX %3A%2F%2Fxxx%2Ftest%3Fid%3D1 2. Scheme self-check: A. Scheme: XXX :// XXX /test? Id =1, copy directly to the browser address bar, click enter; B. To encode the self-test scheme spell in micro download link test page http://qzs.qq.com/open/yyb/wxz_tools/html/schemetools.html?type=1&sch= xxx%3A%2F%2Fxxx%2Ftest%3Fid%3D1Copy the code