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

迷南。 2023-07-07 05:58 14阅读 0赞

# 获取当前浏览器 #

可以用 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 的是微信。

# 现象 #

由于 Android 和 iPhone 的实现方式，包括现象都是不同的。所以下面分类讨论。

## Android ##

### QQ（Android） ###

QQ 和 浏览器 通过预设好的 intent-filter 是可以打开第三方应用的（无论此时第三方应用是否已开启，均能打开）

![在这里插入图片描述][20200221160746685.jpg]  
![在这里插入图片描述][20200221160756298.jpg]

### 微信（Andorid） ###

由于微信在5.0.3以后，考虑到安全问题，就禁用了微信浏览器里打开别的app，所以无法直接在微信里打开第三方的APP。

![在这里插入图片描述][2020022116072466.jpg]  
![在这里插入图片描述][20200221160733142.jpg]

#### 虽然无法直接打开，但有以下几个代替方案： ####

<table> 
 <thead> 
  <tr> 
   <th align="left">序号</th> 
   <th align="left">实现方式</th> 
   <th align="left">缺点</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">1</td> 
   <td align="left">跳转应用宝的下载页面，应用宝会根据是否已安装，来切换下载或打开的页面</td> 
   <td align="left">此种打开方式无法传递参数</td> 
  </tr> 
  <tr> 
   <td align="left">2</td> 
   <td align="left">引导用户在浏览器里打开当前网页，因为微信虽然禁止了android:scheme跳转，但是浏览器都是支持的</td> 
   <td align="left">操作有些繁琐，需要前端添加提示蒙版</td> 
  </tr> 
  <tr> 
   <td align="left">3</td> 
   <td align="left">应用实现浏览器意图，同样引导用户右上角选择浏览器打开，然后选中本应用</td> 
   <td align="left">该应用的性质被改为浏览器，任何网址选择用浏览器打开都会出现本应用的选项</td> 
  </tr> 
  <tr> 
   <td align="left">4</td> 
   <td align="left">分享小程序，然后通过小程序API打开应用</td> 
   <td align="left">哔哩哔哩的做法，但实现小程序需要人力物力</td> 
  </tr> 
  <tr> 
   <td align="left">5</td> 
   <td align="left">网易云音乐居然有办法直接打开自己的APP（实现原理未知）</td> 
   <td align="left">弊端是如果网易云音乐APP没被打开或进程被滑动杀死，此时是不会自动打开的</td> 
  </tr> 
  <tr> 
   <td align="left">6</td> 
   <td align="left">应用实现浏览器意图（但对意图的 host 或 port 做限制）当然同样需要引导用户选择右上角，通过浏览器打开。但非本应用的链接，选择浏览器打开时，就不会出现本应用的提示了</td> 
   <td align="left"></td> 
  </tr> 
 </tbody> 
</table>

#### 打开应用宝页面 ####

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

![在这里插入图片描述][20200225103301537.jpg]![在这里插入图片描述][20200225103313693.jpg]

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

![在这里插入图片描述][20200225101258361.jpg]

## iPhone ##

### QQ ###

![在这里插入图片描述][20200224151130714.jpg]

### 微信 ###

![在这里插入图片描述][20200224163252332.png]

# 实现方式 #

## 前端页面 ##

主要是用 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 添加如下意图过滤器

打开应用的两种意图

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均可）打开应用。

<table> 
 <thead> 
  <tr> 
   <th align="left">常用软件</th> 
   <th align="left">URL Scheme</th> 
   <th align="left">Bundle identifier</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">QQ</td> 
   <td align="left">mqq://</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">微信</td> 
   <td align="left">weixin://</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">腾讯微博</td> 
   <td align="left">TencentWeibo://</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">淘宝</td> 
   <td align="left">taobao://</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">支付宝</td> 
   <td align="left">alipay://</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">微博</td> 
   <td align="left">sinaweibo://</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">QQ浏览器</td> 
   <td align="left">mqqbrowser://</td> 
   <td align="left">com.tencent.mttlite</td> 
  </tr> 
  <tr> 
   <td align="left">uc浏览器</td> 
   <td align="left">dolphin://</td> 
   <td align="left">com.dolphin.browser.iphone.chinese</td> 
  </tr> 
  <tr> 
   <td align="left">百度地图</td> 
   <td align="left">baidumap://</td> 
   <td align="left">com.baidu.map</td> 
  </tr> 
 </tbody> 
</table>

### 实现方式 ###

1.  在“项目” -> “info” -> “URL Types”中，新增一个URL Schemes。  
    ![在这里插入图片描述][20200225105022298.png]
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
    }

[20200221160746685.jpg]: https://img-blog.csdnimg.cn/20200221160746685.jpg
[20200221160756298.jpg]: https://img-blog.csdnimg.cn/20200221160756298.jpg
[2020022116072466.jpg]: https://img-blog.csdnimg.cn/2020022116072466.jpg
[20200221160733142.jpg]: https://img-blog.csdnimg.cn/20200221160733142.jpg
[20200225103301537.jpg]: https://img-blog.csdnimg.cn/20200225103301537.jpg
[20200225103313693.jpg]: https://img-blog.csdnimg.cn/20200225103313693.jpg
[20200225101258361.jpg]: https://img-blog.csdnimg.cn/20200225101258361.jpg
[20200224151130714.jpg]: https://img-blog.csdnimg.cn/20200224151130714.jpg
[20200224163252332.png]: https://img-blog.csdnimg.cn/20200224163252332.png
[20200225105022298.png]: https://img-blog.csdnimg.cn/20200225105022298.png