如何在浏览器唤起App

参考博客,讲的比较详细

名词解释

Universal Link

Apple为iOS 9发布了一个所谓的通用链接的深层链接特性,即Universal links。能够方便的通过传统的HTTP/HTTPS 链接来启动App,使用相同的网址打开网站和App。

==使用==:ios在打包的时候会配置Universal Link(就是一个普通的http/https链接),通过页面中的a标签或者iframe去直接打开app,在微信中也可以直接打开。如果没有安装这个app,这个链接定向到一个可以自定义的页面。(比如app下载页面)

schema协议

scheme是一种页面内跳转协议,是一种非常好的实现机制,通过定义自己的scheme协议,可以非常方便跳转app中的各个页面。但是微信把scheme协议屏蔽掉了,只有他们专门给你加了白名单才可以,比如腾讯自家产品“应用宝”。

相关事件

  • pageshow:页面显示时触发,在load事件之后触发。需要将该事件绑定到window上才会触发

  • pagehide:页面隐藏时触发

  • visibilitychange:页面隐藏没有在当前显示时触发,比如切换tab,也会触发该事件

  • document.hidden 当页面隐藏时,该值为true,显示时为false

基本流程

  1. 先判断是Android还是IOS

  2. 如果是安卓,由于微信屏蔽了schema协议所以指引用户用浏览器打开

  3. 在浏览器先尝试吊起App,有包的话可以直接跳转;没有的话,利用定时器延时跳转下载页。

  4. 如果是IOS,利用IOS配置的Universal Link,把Universal Link指定到一个普通的页面(比如落地页)。

  5. 这个Universal Link可以在微信直接唤起app,所以有包就直接打开app,没有包就打开落地页去下载。(微信貌似对一键进桌做了限制,已经无法从微信直接进应用了)

遇到问题

  1. 这里如果已经安装app,打开app之后,返回网页会发现跳转到下载页,利用visibilitychange事件来取消定时器。

  2. 安卓浏览器跳转要用iframe的src属性,如果使用location.href会直接打开一个404页面。

  3. 浏览器打开app时会询问是否打开,这时也会跳转到下载页,这个问题魔窗也是这样并且没有
    找到解决办法,先忽略掉。

  4. ios的话就需要使用location.href方法了,因为不支持iframe跳转。

  5. ios一键进桌必须得在配置了ulink才可以,然后把https://ulink.xxx.com/com.xx.majiang.xin///com.xx.majiang.hn/?ftId=992516配置到ios跳转链接中,把参数改成我们配置的。

  6. 不能把Universal Link直接放到浏览器的地址栏,甚至直接在代码中执行window.location.href都不可以。必须有点击行为。

  7. universal link在2018年初也被微信给屏蔽了,就连itunes链接也屏蔽了。没办法只能通过浏览器去跳转。

示例代码

<style type="text/css">
    a{
        width: 200px;
        height: 100px;
        background: green;
        color: black;
    }
    iframe{
        width: 0;
        height: 0;
        display: none;
    }
</style>
<body>
    <a>按钮</a>
    <iframe></iframe>
</body>
<script src="jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    var u = navigator.userAgent;
    var ua = navigator.userAgent.toLocaleLowerCase();
    var parame = window.location.search;
    if(u.indexOf('Android') > -1 || u.indexOf('Linux') > -1){
        // 判断是安卓机
        if(ua.match(/Micromessenger/i) == 'micromessenger'){
            alert("请用浏览器打开");
        }else{
            $('a').on('click',function(){
                $("iframe").attr('src','puyangmajiang://puyang_easy_into_table'+parame.split("&")[0]);
                var timer = setTimeout(function(){
                    window.location.href= '/qipai/xx/puyang.html';
                },500);
                $(document).on('visibilitychange webkitvisibilitychange', function() {   
                        clearTimeout(timer);  
                })
            });
        }
    }else if(u.indexOf('iPhone') > -1){
        // 判断是苹果手机
        $("a").on('click',function(){
            window.location.href= "https://ulink.xx.com/com.majiang.xin//ulink/"+parame.split("&")[0];
        });
    }
</script>

如何配置

  1. 在魔窗后台的产品管理项查看Universal Link和Bundle ID

  2. 在项目的根目录需要添加一个apple-app-site-association.json文件。进行添加配置。

     "applinks":{
         "apps": [],
         "details":[
             {
                 "paths":["/com.xx.majiang.siyang/*"],
                 "appID":"6LLQDLVF5L.com.xx.majiang.siyang"
             }
         ]
     }
    

    paths是在apple-app-site-association文件的同级自己创建的目录(Universal Link不生效时指向的路径 ),appID前面是teamID(开发者账号里应该可以看)后面就是Bundle ID

  3. 在自己创建的目录中创建一个同名目录,把这个目录名设置在魔窗后台的mLink下对应的游戏中Universal Link项。

  4. 最后页面中的URI是产品管理中的Universal Link + mLink中Universal Link + 参数?ftId=

  5. 在chrome浏览器的模拟器中通过创建UA进行本地调试。常见UA如下:Mozilla/5.0 (iPhone; CPU iPhone OS 6_1_3 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Mobile/10B329 MicroMessenger/5.0.1

    iOS - 微信:
    Mozilla/5.0 (iPhone; CPU iPhone OS 11_2_2 like Mac OS X) AppleWebKit/604.4.7 (KHTML, like Gecko) Mobile/15C202 MicroMessenger/6.6.1 NetType/WIFI Language/zh_CN
    
    iOS - QQ:
    Mozilla/5.0 (iPhone; CPU iPhone OS 11_2_2 like Mac OS X) AppleWebKit/604.4.7 (KHTML, like Gecko) Mobile/15C202 QQ/7.3.5.473 V1_IPH_SQ_7.3.5_1_APP_A Pixel/1125 Core/UIWebView Device/Apple(iPhone X) NetType/WIFI QBWebViewType/1
    
    iOS - 微博:
    Mozilla/5.0 (iPhone; CPU iPhone OS 11_2_2 like Mac OS X) AppleWebKit/604.4.7 (KHTML, like Gecko) Mobile/15C202 Weibo (iPhone10,3__weibo__8.1.0__iphone__os11.2.2)
    
    iOS - safari:
    Mozilla/5.0 (iPhone; CPU iPhone OS 11_2_2 like Mac OS X) AppleWebKit/604.4.7 (KHTML, like Gecko) Version/11.0 Mobile/15C202 Safari/604.1
    
    android - 微信:
    Mozilla/5.0 (Linux; Android 4.4.2; PE-TL20 Build/HuaweiPE-TL20; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/57.0.2987.132 MQQBrowser/6.2 TBS/043807 Mobile Safari/537.36 MicroMessenger/6.6.1.1220(0x26060135) NetType/WIFI Language/zh_CN
    
    android - QQ:
    Mozilla/5.0 (Linux; Android 4.4.2; PE-TL20 Build/HuaweiPE-TL20; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/57.0.2987.132 MQQBrowser/6.2 TBS/043807 Mobile Safari/537.36 V1_AND_SQ_7.3.2_762_YYB_D QQ/7.3.2.3350 NetType/WIFI WebP/0.3.0 Pixel/1080
    
    android - 微博:
    Mozilla/5.0 (Linux; Android 4.4.2; PE-TL20 Build/HuaweiPE-TL20) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/30.0.0.0 Mobile Safari/537.36 Weibo (HUAWEI-PE-TL20__weibo__8.0.2__android__android4.4.2)
    
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,529评论 5 475
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,015评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,409评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,385评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,387评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,466评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,880评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,528评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,727评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,528评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,602评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,302评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,873评论 3 306
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,890评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,132评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,777评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,310评论 2 342

推荐阅读更多精彩内容