I received a wireless request two days ago. As a novice, I have been busy for several days... There is a link on the page. If the user has installed the APP, click to open the corresponding APP. If the user has not installed it, click to open the corresponding APP. Setting up the connection. I searched online and basically said it can be achieved, but the actual situation is not optimistic.
Of course, it is just one of the requirements. There are also various apps nowadays. The H5 pages shared usually have a button to open immediately. If the app is installed locally, then the local app will be directly called up. If it is not installed, then Jump to download. This is a very normal strategy for promotion and traffic diversion. Recently, the product manager has put forward such a demand, making a download bar with the app open like Toutiao function, etc., and I won’t talk about the rest!
Now let’s get to the main topic today, how does H5 open or activate a local app on a mobile phone? Looking at the answers on Baidu and Google, there are only two types:
First way:By directly configuring the schema on the Android side in the href in the a tag of the HTML, of course, if there are other host configurations, just follow them. The Android side configuration and code are as follows:
android side configuration:
<activity android:name = .MainActivity> <intent-filter> <action android:name = android.intent.action.MAIN /> <category android:name = android.intent.category.LAUNCHER /> </intent-filter> <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:host=jingewenku.com android:scheme=abraham/> </intent-filter> </activity>
Note: If this is configured on the startup page, it must be placed side by side with the label, otherwise there will be no icon of the mobile app after running; note that the schema protocol must be lowercase, otherwise there will be an exception that cannot respond!
html code:
<html> <head> <meta http-equiv=Content-Type content=text/html; charset=UTF-8> <title>Insert title here</title> </head> <body> <a href=abraham: //jingewenku.com/?pid=1>Open app</a><br/> </body></html>
Here we take a look at the format of the schema splicing protocol:
< a href=[scheme]://[host]/[path]?[query]>Start application</a>
The meaning of each item is as follows:
scheme: identify the started App. ※Details described later
host: appropriate description
path: necessary key when passing value ※It is ok if it is not available
query: Get the Key and Value of the value ※It’s ok if you don’t have it
The above can be used to open the local app, of course, when the app exists, otherwise there will be no response.
You may ask, isn't the schema protocol configured in Android configured in the above HTML code? I obviously didn't configure the pid, why should I write this? This is because sometimes when we invoke the local app, we may pass some parameters to the app. We can configure these parameters here. We only need to get them in oncreate. The code is as follows:
Intent intent = getIntent(); Uri uri = intent.getData(); if (uri != null) { String pid = uri.getQueryParameter(pid); }If you still want to get the schema protocol configured in android, you can also do this:
Uri uri = getIntent().getData();if(uri != null) { // Complete url information String url = uri.toString(); Log.e(TAG, url: + uri); // scheme part String scheme = uri.getScheme(); Log.e(TAG, scheme: + scheme); // host part String host = uri.getHost(); Log.e(TAG, host: + host); //port part int port = uri.getPort(); Log.e(TAG, host: + port); //Access path String path = uri.getPath(); Log.e(TAG, path: + path); List<String> pathSegments = uri.getPathSegments(); // Query part String query = uri.getQuery(); Log.e(TAG, query: + query); //Get the specified parameter value String goodsId = uri.getQueryParameter(goodsId); Log.e(TAG, goodsId: + goodsId);}How to determine whether a Schema is valid:
PackageManager packageManager = getPackageManager();Intent intent = newIntent(Intent.ACTION_VIEW, Uri.parse(abraham://jingewenku.com:8888/goodsDetail?goodsId=10011002));List<ResolveInfo> activities = packageManager.queryIntentActivities(intent, 0);booleanisValid = !activities.isEmpty();if(isValid) { startActivity(intent);}This method is also the most popular one on Baidu, but it brings a problem. The above requirement is to have a connection on the page. If the user installs the APP, click to open the corresponding APP; if the user If it is not installed, click to open the corresponding setting connection. This obviously does not meet the requirements and can only be used for some individual needs.
Second way:Since configuring the schema protocol in href is not possible, it can only be achieved through js code. Only in this way can the app be opened based on judgment when it is available, and jump to the download link to download when not.
We know that js cannot determine whether a certain app is installed on the phone, so we can only save the country through curves. We can get the time. If the app cannot be called up for a long time, it will default to the app not being installed, and then jump to download. Page. Of course, this is not what I came up with, it is what the big guys on the Internet think. Here we have to subdivide it into two situations.
1. Wake up directly
Note: You can change the app through h5. For example, visit a URL, click the button, and open the application. If the application APP is not installed, then jump directly to the APP download page of the App Store. The compatibility is better by clicking. If installed With the app, it can be awakened in major mobile browsers (360 browser, uc browser, Sogou browser, QQ browser, Baidu browser) and QQ client. WeChat, Sina Weibo client, and Tencent Weibo client cannot be awakened.
The code is as follows:
<html xmlns=http://www.w3.org/1999/xhtml><head><meta http-equiv=Content-Type content=text/html;charset=utf-8><head><script src=http://libs.baidu.com/jquery/1.9.0/jquery.js></script><title>Click to wake up demo</title></head><body><style>#zjmobliestart{font -size:40px;}</style><!--Description: You can change the app through h5. For example, access a URL, click the button, and open the application. If the application APP is not installed, jump directly to the App. Store's APP download page, by clicking. The compatibility is good. If the app is installed, it can be awakened in all major mobile browsers (360 browser, uc browser, Sogou browser, QQ browser, Baidu browser) and QQ client. WeChat, Sina Weibo client and Tencent Weibo client cannot be awakened. --><a href=zjmobile://platformapi/startapp id=zjmobliestart target=_blank>Wake up Zhejiang Mobile Mobile Business Hall! </a><script type=text/javascript> function applink(){ return function(){ var clickedAt = +new Date; setTimeout(function(){ !window.document.webkitHidden && setTimeout(function(){ if ( +new Date - clickedAt < 2000){ window.location = 'https://itunes.apple.com/us/app/zhe-jiang-yi-dong-shou-ji/id898243566#weixin.qq.com'; } }, 500); }, 500) }; } document .getElementById(zjmobliestart).onclick = applink(); </script> </body></html>2. Click to wake
Note: You can wake up the app through h5. If you visit a URL, you can directly open the application. If the application APP is not installed, then jump directly to the APP download page of the App Store. General compatibility: It can be woken up in major mobile phone browsers (360 browser, uc browser, Sogou browser, QQ browser, and Baidu browser). WeChat, QQ client, Sina Weibo client, and Tencent Weibo client cannot be awakened.
The code is as follows:
<!Doctype html><html xmlns=http://www.w3.org/1999/xhtml><head><meta http-equiv=Content-Type content=text/html;charset=utf-8><head> <script src=http://libs.baidu.com/jquery/1.9.0/jquery.js></script><title>Wake up demo directly</title></head><body><style>#zjmobliestart{font -size:40px;}</style><!--Description: You can wake up the app through h5. If you visit a URL, you can directly open the application. If the application APP is not installed, then jump directly to the App. The APP download page of the Store has general compatibility: it can be awakened in all major mobile browsers (360 browser, uc browser, Sogou browser, QQ browser, Baidu browser). WeChat QQ client, Sina Weibo client, Tencent Weibo client cannot be awakened. --><p id=zjmobliestart>Wake up Zhejiang Mobile Mobile Business Hall! </p><script type=text/javascript> function applink(){ window.location = 'zjmobile://platformapi/startapp'; var clickedAt = +new Date; setTimeout(function(){ !window.document.webkitHidden && setTimeout(function(){ if (+new Date - clickedAt < 2000){ window.location = 'https://itunes.apple.com/us/app/zhe-jiang-yi-dong-shou-ji/id898243566#weixin.qq.com'; } }, 500); }, 500) }applink() ;</script> </body></html>In this way, our needs have been completed. During this process, we also encountered many enthusiastic people's explanations. I will record them here. At first, some people did not understand my needs and thought that I was implementing it on the Android side. They asked me to pass the package name. To check whether the app is installed, record the method here, the code is as follows:
For more methods, please check out my tool class: CommonUtilLibrary
Others think that I want to invoke the local app by loading the webview in the app. I will also record it here. The code is as follows:
webView.setWebViewClient(new WebViewClient(){ @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { Uri uri=Uri.parse(url); if(uri.getScheme().equals(abraham)&&uri.getHost(). equals(jingewenku.com)){ String arg0=uri.getQueryParameter(arg0); String arg1=uri.getQueryParameter(arg1); }else{ view.loadUrl(url); } return true; }});It should also be noted that if the local app is invoked in WeChat, the WeChat on the mobile phone uses the built-in browser of WeChat (you can send the address of the previously obtained page on the server to any of your contacts, click Send message to open the web page) Open that simple HTML page. Note: It is not feasible to directly open scheme://host/datastring. WeChat will not parse this string of characters into a URL. It must be packaged into a web page to browse with WeChat. The device is turned on. After entering, you will see the page we just designed. At this time, clicking to start the application directly will not wake up the previously installed APP. Because WeChat has blocked it, you need to choose to open it in the browser from the menu in the upper right corner. At this time, some browsers can wake up, but some browsers cannot. For example, if the built-in browser on the author's test machine MX4 does not work, UC Browser can wake up. Some browsers cannot be woken up. I have consulted a lot of information and cannot completely solve it. The only thing I can think of now is to let the front-end make a judgment on the browser that encounters the problem. It will prompt that it is not supported and what browser should be used. If any reader has a solution, please leave a message, thank you!
postscript:
Why can't I wake up the app in WeChat and need to open it with a browser?
Because WeChat has implemented scheme shielding on all sharing connections, that is to say, all calls to scheme in the sharing connections have been blocked by WeChat.
So why can some applications be evoked, such as Dianping and Didi Taxi?
From a non-technical perspective, because of Dianping and Didi Taxi, they are both godsons and biological sons of WeChat. He has special care for his son.
From a technical perspective, WeChat has a whitelist, and scheme calls will not be blocked for shared connections in the whitelist.
Don't understand? Let's give an example.
For example, Dianping’s sharing link is http://dazhongdianping.share.1.com
Corresponding to the WeChat whitelist, there will be an item http://dazhongdianping. All sharing originating from this connection will not block the scheme.
For example http://dazhongdianping.share.2.com
http://dazhongdianping.share.3.com
Even a subsidiary of Dianping can use http://zigongsi.dazhongdianping.share.3.com. The root domain name is also in the whitelist, so it can be used.
At this point, everyone should understand that it is impossible to bypass this problem by borrowing Dianping's scheme unless your sharing link can be linked to Dianping's root domain name.
This question should be explained clearly. Another thing to mention is that when it comes to downloading apk, WeChat blocks any application, and sons are no exception. So if you want to provide a download link, no matter whether you are a son or not, you cannot escape using a browser to open it. Among the low methods.
Appendix: URL Schemes for Common Applications
1. System default application
| name | URL Scheme | Bundle identifier |
|---|---|---|
| Safari | http:// | |
| maps | http://maps.google.com | |
| Phone | tel:// | |
| SMS | sms:// | |
| mailto:// | ||
| iBooks | ibooks:// | |
| App Store | itms-apps://itunes.apple.com | |
| Music | music:// | |
| Videos | videos:// |
2. Commonly used third-party software
| name | URL Scheme | Bundle identifier |
|---|---|---|
| mqq:// | ||
| weixin:// | ||
| Tencent Weibo | TencentWeibo:// | |
| Taobao | taobao:// | |
| Alipay | alipay:// | |
| sinaweibo:// | ||
| weico Weibo | weico:// | |
| QQ browser | mqqbrowser:// | com.tencent.mttlite |
| uc browser | dolphin:// | com.dolphin.browser.iphone.chinese |
| Open Browser | ohttp:// | com.oupeng.mini |
| Sogou Browser | SogouMSE:// | com.sogou.SogouExplorerMobile |
| Baidu map | baidumap:// | com.baidu.map |
| Chrome | googlechrome:// | |
| Youku | youku:// | |
| Jingdong | openapp.jdmoble:// | |
| everyone | renren:// | |
| Meituan | imeituan:// | |
| No. 1 store | wccbyihaodian:// | |
| I'll check | wcc:// | |
| Youdao Dictionary | yddictproapp:// | |
| Zhihu | zhihu:// | |
| Review | dianping:// | |
| micro disk | sinavdisk:// | |
| Doubanfm | doubanradio:// | |
| NetEase open class | ntesopen:// | |
| All-round business card king | camcard:// | |
| QQ Music | qqmusic:// | |
| Tencent Video | tenvideo:// | |
| Douban Movies | doubanmovie:// | |
| NetEase Cloud Music | orpheus:// | |
| NetEase News | newsapp:// | |
| NetEase application | apper:// | |
| NetEase Lottery | ntescaipiao:// | |
| Youdao Cloud Notes | youdaonote:// | |
| See more | duokan-reader:// | |
| National Air Quality Index | dirtybeijing:// | |
| Baidu Music | baidumusic:// | |
| Go to the kitchen | xcfapp:// |
The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.