h5拉起app

h5拉起app

以下分四种情况：微信内，qq内，默认浏览器安卓，默认浏览器ios

1.微信

  使用微信内部开放标签wx-open-launch-app
  场景：微信内打开url,内有按钮，点击拉起app
  局限：入口必须是扫二维码进入的网址或者卡片式分享打开的网址
  官方网址：
    https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.htm
  前提：有公众号，有开放平台账号，进行过关联，公众平台配置过js接口安全域名
  具体使用：

<wx-open-launch-app
  id="launch-btn"  
  appid="your-appid"  
  extinfo="your-extinfo">  
  <script type="text/wxtag-template">    
  <style>.btn { padding: 12px }</style>   
   <button class="btn">App内查看</button>  
  </script>
</wx-open-launch-app>
<script language="javascript" src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>  
var btn = document.getElementById('launch-btn'); 
 btn.addEventListener('launch', function (e) {    
	 console.log('success');  
 });  
 btn.addEventListener('error', function (e) {    
 	console.log('fail', e.detail);  
 });</script>
//extinfo是传递给app的参数，字符串格式，具体怎么定义按业务来
//appid是微信开放平台-管理中心-公众号-查看-关联设置-appid，不是公众号的
//注意，网页操作不要忘记wx.config,在wx.ready(()=>{给extinfo赋值})

2.qq(我是实际项目用的不是这个api，在官网找不到了，是之前人写的，下面这个没用过)

  官网链接：https://open.mobile.qq.com/api/common/index#api:isAppInstalled
  引入sdk

<script src="https://open.mobile.qq.com/sdk/qqapi.js"></script>

  检查是否安装：isAppInstalled

//检测手机QQ是否安装
var value = "mqq"; //ios 
var value = "com.tencent.mobileqq"; //android 
mqq.invoke('app', 'isAppInstalled', { "name" : value }, function(result){ 
    alert("mobileqq is install: " + result); 
});

  打开app:launchApp

mqq.invoke('app', 'launchApp', { 
    name: "mqq"// IOS 
}); 
mqq.invoke('app', 'launchApp', { 
    name: "com.tencent.mobileqq"// android 
});

3.url scheme

  安卓：
  场景:安卓手机自带浏览器打开链接唤起app
  缺点:捕获不到未安装，只能定时未打开就跳转下载页
  客户端提供 scheme,host,port,path ,具体拼接方式为scheme://host:port/path；一般只有scheme+host就行，具体看客户端怎么配置,具体链接直接问客户端要就行了
  具体使用：

a标签  
<a class="a" href="baiduscheme://com.baidu.www" id="android_a">打开app</a>
或者location.href
location.href=baiduscheme://com.baidu.www
或者window.open(不建议使用，手机浏览器几乎默认关闭主动打开弹窗，需要交互)
或者使用iframe
  var ifr = document.createElement('iframe');
  ifr.style.display = "none"
  ifr.setAttribute('id', 'ifr')
  ifr.setAttribute('src', "baiduscheme://com.baidu.www")
  document.querySelector('body').appendChild(ifr);
使用这样打开后返回源地址未改变，体验好一点，另外单独设置定时跳转下载页

  ios:没做过

4.Universal Links

  场景：ios手机自带浏览器打开链接唤起app
  特点：链接是标准的http或者https开头的链接
  客户端配置完后会把一个命名为apple-app-site-association的文件放置到服务器根目录，要到这个文件自己看里面paths怎么写的，拼接路劲，直接问要可能有的客户端不懂
  具提示使用：location.href跳转，可直接拼接下载页的地址，打开就打开，打不开就是没有安装，跳转到下载页

apple-app-site-association大概内容是这样  
放到baidu.com根目录下时拉起拉起链接为http://baidu.com/jump/,
可以把http://baidu.com/jump/download.html设置为下载页
直接用http://baidu.com/jump/download.html跳转
{
    "applinks": {
        "apps": [],
        "details": [
        {
            "appID": "aaaaaaa.com.baidu.wwww",
            "paths": ["/jump/*"]
        },
        
        ]
    }
}