获取当前浏览器
可以用 navigation.userAgent 来区分当前的运行环境(当前测试手机:vivo x20)
- QQ(Android)
Mozilla/5.0 (Linux; Android 8.1.0; vivo X20A Build/OPM1.171019.011; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/66.0.3359.126 MQQBrowser/6.2 TBS/045120 Mobile Safari/537.36 V1_AND_SQ_8.2.6_1320_YYB_D QQ/8.2.6.4370 NetType/WIFI WebP/0.3.0 Pixel/1080 StatusBarHeight/72 SimpleUISwitch/0 - QQ(iPhone)
Mozilla/5.0 (iPhone; CPU iPhone OS 13_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/17C54 QQ/8.2.6.700 V1_IPH_SQ_8.2.6_1_APP_A Pixel/1125 MiniAppEnable Core/WKWebView Device/Apple(iPhone X) NetType/WIFI QBWebViewType/1 WKType/1 - 微信(Android)
Mozilla/5.0 (Linux; Android 8.1.0; vivo X20A Build/OPM1.171019.011; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/67.0.3396.87 XWEB/1169 MMWEBSDK/191201 Mobile Safari/537.36 MMWEBID/946 MicroMessenger/7.0.10.1580(0x27000AFD) Process/toolsmp NetType/WIFI Language/zh_CN ABI/arm64 - 微信(iPhone)
Mozilla/5.0 (iPhone; CPU iPhone OS 13_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148 MicroMessenger/7.0.10(0x17000a21) NetType/WIFI Language/zh_CN - QQ浏览器(Android)
Mozilla/5.0 (Linux; U; Android 8.1.0; zh-cn; vivo X20A Build/OPM1.171019.011) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/66.0.3359.126 MQQBrowser/10.1 Mobile - 系统浏览器(Android)
Mozilla/5.0 (Linux; Android 8.1.0; vivo X20A Build/OPM1.171019.011; wv) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.84 Mobile Safari/537.36 VivoBrowser/7.4.12.4 - Firefox(PC)
Mozilla/5.0 (Windows NT 10.0; WOW64; rv:56.0) Gecko/20100101 Firefox/56.0 - Chrome(PC)
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.106 Safari/537.36
另外
- MAC 电脑
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15) AppleWebKit/605.1.15 (KHTML, like Gecko) - iPad
Mozilla/5.0 (iPad; CPU OS 13_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148
区分不同浏览器
navigator.userAgent
- 含有 Mobile 则是移动端,否则是PC端浏览器。
- 含有 Android 的是安卓,含有 iPhone 的是 iPhone。
- 含有 QQ 的是 QQ 或 QQ浏览器。
- 含有 MicroMessenger 的是微信。
const type = document.getElementById("type");
const ua = window.navigator.userAgent;
let isAndroid = ua.includes("Android");
let isIPhone = ua.includes("iPhone");
let isWX = ua.includes("MicroMessenger");
let isQQ = ua.includes("QQ");
if(isAndroid) {
if(isWX) {
type.innerHTML = "安卓 微信";
} else {
type.innerHTML = "安卓 其它";
}
} else if(isIPhone) {
if(isQQ) {
type.innerHTML = "IOS QQ";
} else {
type.innerHTML = "IOS 其它";
}
}
现象
由于 Android 和 iPhone 的实现方式,包括现象都是不同的。所以下面分类讨论。
Android
QQ(Android)
QQ 和 浏览器 通过预设好的 intent-filter 是可以打开第三方应用的(无论此时第三方应用是否已开启,均能打开)
微信(Andorid)
由于微信在5.0.3以后,考虑到安全问题,就禁用了微信浏览器里打开别的app,所以无法直接在微信里打开第三方的APP。
虽然无法直接打开,但有以下几个代替方案:
序号 | 实现方式 | 缺点 |
1 | 跳转应用宝的下载页面,应用宝会根据是否已安装,来切换下载或打开的页面 | 此种打开方式无法传递参数 |
2 | 引导用户在浏览器里打开当前网页,因为微信虽然禁止了android:scheme跳转,但是浏览器都是支持的 | 操作有些繁琐,需要前端添加提示蒙版 |
3 | 应用实现浏览器意图,同样引导用户右上角选择浏览器打开,然后选中本应用 | 该应用的性质被改为浏览器,任何网址选择用浏览器打开都会出现本应用的选项 |
4 | 分享小程序,然后通过小程序API打开应用 | 哔哩哔哩的做法,但实现小程序需要人力物力 |
5 | 网易云音乐居然有办法直接打开自己的APP(实现原理未知) | 弊端是如果网易云音乐APP没被打开或进程被滑动杀死,此时是不会自动打开的 |
6 | 应用实现浏览器意图(但对意图的 host 或 port 做限制)当然同样需要引导用户选择右上角,通过浏览器打开。但非本应用的链接,选择浏览器打开时,就不会出现本应用的提示了 |
打开应用宝页面
- 如果未安装该应用,则会自动跳转到下载页面
- 若已安装,则显示为应用封面和并包含打开按钮
分享为小程序,在小程序中打开
iPhone
微信
实现方式
前端页面
主要是用 a 标签来打开应用
<html>
<head>
<meta charset="utf8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
<title>跳转到第三方APP</title>
<style>
body {
font-size: 16px;
}
h1,h2,div,a {
display:block;
margin: 1rem;
}
</style>
<script>
function showUserAgent() {
const userAgent = document.getElementById("userAgent");
userAgent.innerHTML = window.navigator.userAgent;
}
function showType() {
const type = document.getElementById("type");
const ua = window.navigator.userAgent;
const mobile = {};
mobile.isAndroid = ua.includes("Android");
mobile.isIPhone = ua.includes("iPhone");
mobile.isWX = ua.includes("MicroMessenger");
mobile.isQQ = ua.includes("QQ");
window.mobile = mobile;
if(mobile.isAndroid) {
if(mobile.isWX) {
type.innerHTML = "安卓 微信";
} else {
type.innerHTML = "安卓 其它";
}
} else if(mobile.isIPhone) {
if(mobile.isQQ) {
type.innerHTML = "IOS QQ";
} else {
type.innerHTML = "IOS 其它";
}
}
}
function openApp(url) {
document.location = url;
setTimeout( function() {
if(window.mobile.isAndroid) {
if(confirm( '您还未安装这个应用,是否现在去应用宝下载该应用?'))
document.location = "https://itunes.apple.com/";
} else if(window.mobile.isIPhone)
if(confirm( '您还未安装这个应用,是否现在去AppStore下载该应用?'))
document.location = "https://cftweb.3g.qq.com/qqappstore/index";
}, 1000);
}
window.onload = ()=>{
showUserAgent();
showType();
}
</script>
</head>
<body>
<h1>navigator.userAgent</h1>
<div id="userAgent"></div>
<h2 id="type"></h2>
<h1>Android</h1>
<a href="#" onclick="openApp('open://host/links?data=test')">QQ和浏览器打开APP</a>
<h1>IOS</h1>
<a href="#" onclick="openApp('fastlion://host.test.com')">打开第三方APP</a>
</body>
</html>
Android
intnet 匹配规则
- Action 匹配只要有一个与Intent中携带Action相同即可
- Intent默认会携带"android.intent.category.DEFAULT",所以隐式启动的组件必须包含
<category android:name="android.intent.category.DEFAULT" />
- Category 匹配要包含全部Intent中携带Category
- Data 用于指定数据,通常是URI格式。和 Action 一样,匹配只要有一个与Intent中携带Data相同即可
在 AndroidManifest.xml 添加如下意图过滤器
<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" />
<!-- 接收微信、QQ右上角,用浏览器打开的意图 -->
<data android:scheme="https" />
<data android:scheme="http" />
<!-- 接收QQ、浏览器链接点击后,直接打开的意图(data的参数可以随意) -->
<data
android:scheme="open"
android:host="com.open.url"
android:port="8888"
android:path="/appLinks" />
</intent-filter>
</activity>
打开应用的两种意图
- QQ和浏览器直接打开
- intent
intent://com.open.url:8888/appLinks?data=test#Intent;scheme=open;launchFlags=0x10000000;component=<应用包名>/.activity.MainActivity;i.fling_action_key=2;l.appShareID=-1;S.preAct=QQBrowserActivity;S.leftViewText=%E8%BF%94%E5%9B%9E;l.preAct_elapsedRealtime=14362619;i.fling_code_key=208902589;S.url=http%3A%2F%2F192.168.1.248%3A5500%2Findex.html;l.preAct_time=1582515805501;B.h5_ark_is_from_share=false;end
- uri
uri = open://com.open.url:8888/appLinks?data=test
- 微信右上角,使用浏览器打开
- intent
intent://<网页地址>:5500/index.html?from=singlemessage#Intent;scheme=http;launchFlags=0x10000000;package=<应用包名>;component=<应用包名>/.activity.MainActivity;end
- uri
uri = http://<网页地址>:5500/index.html?from=singlemessage
在 MainActivity 中处理这些意图
/**
* 自定义的打开应用的协议
*/
public static final String SCHEME_OPEN = "open";
/**
* 网页
*/
public static final String SCHEME_HTTP = "http";
/**
* 加密网页
*/
public static final String SCHEME_HTTPS = "https";
@Override
protected void onCreate(Bundle savedInstanceState) {
onNewIntent(getIntent());
}
@Override
protected void onNewIntent(Intent intent) {
if (intent != null) {
Uri uri = intent.getData();
if(uri != null) {
String url = uri.toString();
if(url.startsWith(Constant.SCHEME_OPEN)) {
webBusiness.loadUrl(url.replace("Constant.SCHEME_OPEN", "https"));
deal = true;
} else if(url.startsWith(Constant.SCHEME_HTTP)) {
webBusiness.loadUrl(url);
deal = true;
}
}
}
}
iPhone
iOS 可以使用 Universal links(微信可以,QQ不行) 或 自定义协议(微信、QQ均可)打开应用。
常用软件 | URL Scheme | Bundle identifier |
QQ | mqq:// | |
微信 | weixin:// | |
腾讯微博 | TencentWeibo:// | |
淘宝 | taobao:// | |
支付宝 | alipay:// | |
微博 | sinaweibo:// | |
QQ浏览器 | mqqbrowser:// | com.tencent.mttlite |
uc浏览器 | dolphin:// | com.dolphin.browser.iphone.chinese |
百度地图 | baidumap:// | com.baidu.map |
实现方式
- 在“项目” -> “info” -> “URL Types”中,新增一个URL Schemes。
- 其实只要通过上面的配置就可以打开应用了。但有时我们还要传递参数进来,然后程序根据参数调用不同的功能或打开不同的页面。我们可在 AppDelegate.swift 中的如下方法里获取参数,并做相应的处理。
func application(_ app: UIApplication, open url: URL,
options: [UIApplicationOpenURLOptionsKey : Any] = [:]) -> Bool {
if url.host == nil {
return true;
}
//获取来源应用的Identifier
print("来源App:\(options[UIApplicationOpenURLOptionsKey.sourceApplication]!)")
//获取url以及参数
let urlString = url.absoluteString
let queryArray = urlString.components(separatedBy: "/")
print(urlString)
let alertController = UIAlertController(title: "参数如下",
message: "\(queryArray[2]) \(queryArray[3])",
preferredStyle: .alert)
let cancelAction = UIAlertAction(title: "取消", style: .cancel, handler: nil)
alertController.addAction(cancelAction)
self.window!.rootViewController!.present(alertController, animated: true,
completion: nil)
return true
}