怎么在网页中打开你的app

28

先声明一下关于ios中9.0打开方式的文章来自博客:IOS9通用链接(universal link)

前言

对于一个完备的互联网产品而言需要有app端与web端两个不同前端,对于产品而言很多都希望能够将wap页上的用户引向native app上这就要求前端工程师们为网页提供各种入口去打开app,今天我们就聊一聊app的打开方式(有错误的地方还请高手指正)。

常规打开

对于app打开而言最常规的打开就是通过url scheme的方式去打开你的app,如下的

myapp://
myapp://open
myapp://type=1&id=2sdeo223lwe

这些抛出都是以url的方式进行抛出,app捕捉到这些抛出去做相应的处理,本文对app的处理不做详细描述,app开发请自行谷歌百度。对于前端而言抛出的方式也有很多,而最理想的方式是通过iframe的src对其进行链抛出,来!说的在多都没有代码来的清晰,请看下面。

首先我们需要有一个iframe:

//实际上就是新建一个iframe的生成器
var  createIframe=(function(){
  var iframe;
    return function(){
        if(iframe){
            return iframe;
        }else{
            iframe = document.createElement('iframe');
            iframe.style.display = 'none';
            document.body.appendChild(iframe);
            return iframe;      
        }
    }
})()

之后我们还需要一个url scheme:

//生成一个url scheme,假设我们约定的scheme是myApp://type=1&id=iewo212j32这种形式的

var baseScheme = "myApp://"
var createScheme=function(options){
    var urlScheme=baseScheme;
    for(var item in options){
        urlScheme=urlScheme+item + '=' + encodeURIComponent(options[item]) + "&";
    }
    urlScheme = urlScheme.substring(0, urlScheme.length - 1);
    return encodeURIComponent(urlScheme);
}

这种scheme形式的其实不是最好的,根据我们踩过的坑,觉得约定为与http协议相近可能更好一些,具体的协议需要前端人员自己去和app端人员约定。

ok万事具备,iframe有了,urlScheme也有了,该去打开app了

var openApp=function(){
    var localUrl=createScheme();
    var openIframe=createIframe();
    if(isIos()){
        //判断是否是ios,具体的判断函数自行百度
        window.location.href = localUrl;
        var loadDateTime = Date.now();
        setTimeout(function () {
            var timeOutDateTime = Date.now();
            if (timeOutDateTime - loadDateTime < 1000) {
                window.location.href = "你的下载页面";
            }
        }, 25);
    }else if(isAndroid()){
        //判断是否是android,具体的判断函数自行百度
        if (isChrome()) {
            //chrome浏览器用iframe打不开得直接去打开,算一个坑
            window.location.href = localUrl;
        } else {
            //抛出你的scheme
            openIframe.src = localUrl;
        }
        setTimeout(function () {
            window.location.href = "你的下载页面";
        }, 500);
    }else{
        //主要是给winphone的用户准备的,实际都没测过,现在winphone不好找啊
        openIframe.src = localUrl;
        setTimeout(function () {
            window.location.href = "你的下载页面";
        }, 500);
    }
}

以上就是你要打开scheme的主要代码了,好吧,实际上不只是打开app,还要实现未打开的时候跳到下载页去。其中安卓实际上无论有没有打开都会跳到下载页去,而ios........好吧!按照网上的说法是浏览器失焦后会挂起脚本,呵呵,这是多老的ios版本的表现了,实际上现在的ios已经没有这么做,有些版本会跟安卓的表现一样,而有些则是直接跳转根本不会去打开,还有打开的时候那个恶心的系统弹窗是什么鬼。好吧,实际上至此你会发现,ios9.0以上的有些打不开直接跳,有些打得开还会有允许弹窗,而微信则是无论如何都打不开,实际上微信会在他的浏览器里拦截掉所有未经其允许的scheme包括app store,那么接下来我们要解决这些问题。

通用链接

针对ios9及以上的打不开问题,实际上ios9提供了更好的解决方案————通用链接。

什么是Universal Links(通用链接)?

这是iOS9推出的一项功能,如果你的应用支持Universal Links(通用链接),那么就能够方便的通过传统的HTTP链接来启动APP(如果iOS设备上已经安装了你的app,不需要额外做任何判断等),或者打开网页(iOS设备上没有安装你的app)。或许可以更简单点来说明,在iOS9之前,对于从各种从浏览器,Safari、UIWebView或者 WKWebView中唤醒APP的需求,我们通常只能使用scheme。

以上来自网上关于通用链接的介绍,对于前端简单点讲就是你访问一个http的url,如果这个url带有你提交给开发平台的配置文件中匹配规则的内容,ios系统会去尝试打开你的app,如果打不开,系统就会在浏览器中转向你要访问的链接。很好的一个属性,因为通过这个属性在ios9上我们能够绕过微信的拦截从而打开app。

以下是ios开发人员要做的百度搜索结果第一条ios中实现通用链接

而我们要做的真的很简单,实际上我们只需要抛出链接就好了(实际上博主只是来骗经验的)。在此之前请准备好与主站不同的域名,比如主站www.xxxx.com,你们可以准备好open.xxxx.com的域名作为重定向用。好吧!实际上通用链接有一个很坑的属性,必须是异域打开,而且如果你提交的是你主站的链接,你打开你的主站你会发现网站上方会挂着一个难看的灰条转向appstore中你们的app,没错,就是ios系统干的这个事,具体的其他注意事项可以参考这篇文章IOS9通用链接(universal link)

那么接下来我们的代码得做好更改

//增加通用链接的生成,
var baseScheme = "myApp://",
    baseLink="http://m.xxxx.com?";
var createScheme=function(options,isLink){
    var urlScheme=isLink?baseLink:baseScheme;
    for(var item in options){
        urlScheme=urlScheme+item + '=' + encodeURIComponent(options[item]) + "&";
    }
    urlScheme = urlScheme.substring(0, urlScheme.length - 1);
    return isLink?urlScheme:encodeURIComponent(urlScheme);
}

然后对抛出做

var openApp=function(){
    //生成你的scheme你也可以选择外部传入
    var localUrl=createScheme({type:1,id:"sdsdewe2122"});
    var openIframe=createIframe();
    if(isIos()){
        //判断是否是ios,具体的判断函数自行百度
        if(isGreaterThan9()){
            //判断是否为ios9以上的版本,跟其他判断一样navigator.userAgent判断,ios会有带版本号
            localUrl=createScheme({type:1,id:"sdsdewe2122"},true);//代码还可以优化一下
            location.href = localUrl;//实际上不少产品会选择一开始将链接写入到用户需要点击的a标签里
            return;
        }
        window.location.href = localUrl;
        var loadDateTime = Date.now();
        setTimeout(function () {
            var timeOutDateTime = Date.now();
            if (timeOutDateTime - loadDateTime < 1000) {
                window.location.href = "你的下载页面";
            }
        }, 25);
    }else if(isAndroid()){
        //判断是否是android,具体的判断函数自行百度
        if (isChrome()) {
            //chrome浏览器用iframe打不开得直接去打开,算一个坑
            window.location.href = localUrl;
        } else {
            //抛出你的scheme
            openIframe.src = localUrl;
        }
        setTimeout(function () {
            window.location.href = "你的下载页面";
        }, 500);
    }else{
        //主要是给winphone的用户准备的,实际都没测过,现在winphone不好找啊
        openIframe.src = localUrl;
        setTimeout(function () {
            window.location.href = "你的下载页面";
        }, 500);
    }
}

实际上就只需要更改这么点,最重要的是app端接入通用链接,注意抛出的链接不要跟主站同域即可,之后就是不断的调试,自己去踩坑吧,记得绑定域名,这个对域名具有一定的依赖性。

微信中打开

至此只有微信是打不开的,实际上腾讯系的产品都是打不开的,包括qq浏览器。

对于微信中有两种方式:

  • 一种简单的方式就是弹窗告诉用户让他去浏览器中打开——在技术之外的办法

  • 还有一种方式就是应用宝

是的如果是微信就去打开你的app对应的应用宝,应用宝会去检测你的app是否存在有则去打开,但只是去打开。实际上腾讯的应用宝对于开发者在功能上做的比想象中的要强大,你在应用宝的微下载中配置申请你的applink与app store的链接,之后你只要在你的链接参数中带上android_schema="myApp://"就在应用宝中打开app中的特定功能,如果忽略应用宝的页面跟自己scheme打开没有太大区别,具体的操作可以查看应用宝的说明。简而言之,腾讯的产品中都去借助应用宝这个平台去执行你需要的操作。在此就不贴代码了,只要判断浏览器如果是微信或者是qq就去跳你的应用宝链接就行。

总结

实际上单纯打开app非常简单,目前无论安卓还是ios都能够很好的支持scheme,当然腾讯系产品除外,实际上百度浏览器也会拦截scheme(我觉得真是奇了葩!!!微信这种尚能理解,一个浏览器居然擅自去拦截scheme)目前对百度浏览器还没有什么很好的办法,可以尝试是否能够通过百度应用市场去解决。如果是希望打开app同时又要打开下载页,那么ios9及以上就得用通用链接去解决,重点就是这个通用链接。

你可能感兴趣的

28 条评论
Chandler心沒長大 · 2016年07月16日

你好题主,我关于你文中有一处不明,想请教,你题中说:「其中安卓实际上无论有没有打开都会跳到下载页去」,可我通过手机百度到的关于知乎啊,贴吧啊啥的链接,点开后,都没有跳到下载页啊,是不是我理解的有问题啊。能方便解答一下吗。谢谢。

回复

AlfredMou 作者 · 2016年07月16日

这其实是有一个产品需求前提的,产品要求做到wap页唤起app如果用户没装app则跳转到下载页,但实际上对于前端来说我们是无法获知用户是否安装特定app的信息的,所以我们只能做到抛出scheme然后不管是否打开都直接跳下载页(通用链接除外)。你说的情况我看了一下,贴吧的打开只是单纯的贴了一个应用的下载地址不管你有没有安装都直接去下载安装包(这很有百度的风格),知乎的我没找到,不过之前对知乎进行调研的时候发现他只会提供一个打开功能,如果你有装应用那么他就会去打开,如果你没装就什么反应都没有

回复

Nola_jun · 2016年07月19日

我想问个问题,我使用您这个代码,但是一直都是有报错的,这是为什么?而且就算判断了ios还是android,它最后都是跳转到window的,这个又是为什么呢?能帮忙解决问题吗

回复

AlfredMou 作者 · 2016年07月20日

代码Scheme生成的那个有点问题改了一下不过不会报错,报错主要应该是我这边用来判断的各个函数都是没有加的缘故,需要你们自己去写一下,isIos isAndroid isGreaterThan9 isChrome这些百度一下就有了所以我没加上去,如果你写了最后都跳到window的话可能是你的判断函数写错了,我自己用我的判断函数的话没有这个问题

回复

夕君 · 2016年07月20日

在用户没有装app 的情况下 是会弹出一个 错误的,这个怎么解决?

回复

AlfredMou 作者 · 2016年07月20日

什么系统的?哪个浏览器,一般来说可以改变链接的抛出方式来避开(并不绝对),最合理的是用iframe去打开链接

回复

夕君 · 2016年07月20日

ios9 Safari 好的,不知道不是是在当前页打开的原因 就提示错误,我试试 iframe ,感谢

回复

kirstenzmx · 2016年08月04日

ios9 safari用iframe已经无法跳转app

回复

沧浪的羽毛 · 2016年08月26日

好象只能用iframe,如果直接用location.href,他跳转的是在当前域名下+url Scheme,比如 location.href='myapp://',实际跳转的是 www.xxx.com/myapp:// 这种地址

回复

AlfredMou 作者 · 2016年08月28日

应该是不会的,可能极少的安卓机的浏览器会这么搞,之前评测的时候有一个机器的uc还是哪个浏览器是这样子的。

回复

AlfredMou 作者 · 2016年08月28日

iOS9以上确实iframe打不开APP的大家尽量考虑接上通用链接吧,微信applink的话好像现在只给提交不给通过了,所以新进产品都是用不上的

回复

0

AppLink在哪里申请的啊,貌似我都没地方申请。问了客服说是S级的应用才能使用AppLink。

神秘博士 · 2017年02月10日
Alexee · 2016年12月20日

我现在用的都是 window.location.href 的方法进行跳转,这个方法同ios9以上的通用链接相比,建议使用哪种呢?(不仅要打开应用,还要打开指定的某个页面)

回复

jvaeyhcd · 2016年12月24日

楼主您的文章写得很不错,但是我还是有一点不明白,能否具体阐述一下,如何使用应用宝的Applink实现跳转到app中对应的文章页面。

回复

AlfredMou 作者 · 2016年12月26日

应用宝有个开发者账号,这个账号可以为你的应用申请各种接口,其中有一个就是AppLink,申请通过之后就能在转向应用宝的链接里使用android_schema这个参数里面可以带有你需要抛出的scheme,简单的说就是你在应用宝开发者平台申请接口,接口申请下来之后他会开放出来一个参数让你带个scheme给他由他来抛这个scheme。你可以参考一下网易新闻在微信安卓里的表现他们是申请下来了的,我们在他们之后申请接口应用宝只能申请不给通过,不知道现在应用宝有没有开放出来。

回复

0

请问下,在android平台下微信里可以通过加android_schema参数来唤醒app,但是ios下怎么实现呢?

whitout · 2017年02月04日
0

@whitout universal links

神秘博士 · 2017年02月10日
0

@神秘博士 但是这只支持ios9以上啊

whitout · 2017年02月13日
Fakefish · 2017年01月05日

现在网易也不能自动唤起了。。是应用宝关了么

回复

大切洛基 · 2017年01月19日

在openinstall上面,android和ios的跳转都可以实现了。而且也在微信里面跳转的问题也是解决了的。

回复

tudosing · 2017年07月18日

我用window.location.href="scheme"打开chrome浏览器的app,无效,请问是什么原因的?

回复

沉舟 · 2017年08月01日

我想问一下,现在大众点评可以从微信直接打开APP(安卓端),是用什么方式做的?

回复

0

2种可能,1是合作企业可以加入白名单,2是手机有装应用宝

just路人周 · 2017年08月12日
just路人周 · 2017年08月12日

我按照楼主的方式在安卓的AndroidManifest添加了schema,IOS是在info.plist中找了匹配的值,在被唤起的APP都在手机后台运行的情况下,安卓手机和苹果都可以正常呼起APP,但是程序被杀死的情况下,苹果的可以,但安卓的闪了以下就没了。

回复

zhiruoyu88 · 2017年09月01日

百度浏览器拦截scheme也是够恶心的

回复

载入中...