Android 中 QQ 和 微信打开第三方应用

获取当前浏览器

可以用 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 做限制）当然同样需要引导用户选择右上角，通过浏览器打开。但非本应用的链接，选择浏览器打开时，就不会出现本应用的提示了

打开应用宝页面

1. 如果未安装该应用，则会自动跳转到下载页面
2. 若已安装，则显示为应用封面和并包含打开按钮

分享为小程序，在小程序中打开

iPhone

QQ

微信

实现方式

前端页面

主要是用 a 标签来打开应用

    
        
        
        
        
        
    
    
        
navigator.userAgent
        

        

        
Android
        QQ和浏览器打开APP
        
IOS
        打开第三方APP
    

Android

intnet 匹配规则

• Action 匹配只要有一个与Intent中携带Action相同即可
• Intent默认会携带"android.intent.category.DEFAULT"，所以隐式启动的组件必须包含
• Category 匹配要包含全部Intent中携带Category
• Data 用于指定数据，通常是URI格式。和 Action 一样，匹配只要有一个与Intent中携带Data相同即可

在 AndroidManifest.xml 添加如下意图过滤器

打开应用的两种意图

1. QQ和浏览器直接打开

   1. 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
   2. uri
      uri = open://com.open.url:8888/appLinks?data=test

2. 微信右上角，使用浏览器打开

   1. intent
      intent://<网页地址>:5500/index.html?from=singlemessage#Intent;scheme=http;launchFlags=0x10000000;package=<应用包名>;component=<应用包名>/.activity.MainActivity;end
   2. 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

实现方式

1. 在“项目” -> “info” -> “URL Types”中，新增一个URL Schemes。
   

2. 其实只要通过上面的配置就可以打开应用了。但有时我们还要传递参数进来，然后程序根据参数调用不同的功能或打开不同的页面。我们可在 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
}