怎么在网页中打开你的app

先声明一下关于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及以上就得用通用连接去解决，重点就是这个通用连接。