博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
web页面打开本地app(判断是否安装)
阅读量:7054 次
发布时间:2019-06-28

本文共 6290 字,大约阅读时间需要 20 分钟。

在应用宝中有APP申请链接:

//是否可以打开App不可以跳则到下载页$(".downNow button").on("click",function(){	if(navigator.userAgent.match(/(iPhone|iPod|iPad);?/i))    {	    var loadDateTime = new Date().getTime();	    window.setTimeout(function() {		    var timeOutDateTime = new Date().getTime();		    // alert("loadDateTime:"+loadDateTime+"--"+"timeOutDateTime"+timeOutDateTime)	        if (timeOutDateTime - loadDateTime < 3000) {	            window.location.href = "http:";//下载链接		    } else {		        window.close();		    }	 	},1500);	    window.location.href = "baoxianquan://";//ios app协议    }	if(navigator.userAgent.match(/android/i))	{		var loadDateTime = new Date().getTime();	    window.setTimeout(function() {		    var timeOutDateTime = new Date().getTime();		     // alert("loadDateTime:"+loadDateTime+"--"+"timeOutDateTime"+timeOutDateTime)	        if (timeOutDateTime - loadDateTime < 3000) {	            window.location.href = "http:";//下载链接		    } else {		        window.close();		    }	 	},1500);	    window.location.href = "bxq://com.tou360.insurcircle";//android app协议	    //jxapi://com.tou360.bida/	    // window.setTimeout(function() {	    // 	var timeOutDateTime = new Date();	    // 	if((timeOutDateTime-loadDateTime)<3000){	    // 		window.location.href = "http://a.app.qq.com/o/simple.jsp?pkgname=com.tou360.bidaagent";//android 下载地址	    // 	}  	    // }, 2000)    	}});

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

myapp://myapp://openmyapp://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开发人员要做的百度搜索结果第一条:

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

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

//增加通用链接的生成,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端接入通用链接,注意抛出的链接不要跟主站同域即可,之后就是不断的调试,自己去踩坑吧,记得绑定域名,这个对域名具有一定的依赖性。

 

转载于:https://www.cnblogs.com/longsiyuan/p/6084722.html

你可能感兴趣的文章
JSP简单的练习-功能标签
查看>>
TreeMap cannot be cast to java.lang.Comparable
查看>>
Eclipse和PyDev搭建完美Python开发环境(Windows篇)
查看>>
Extjs4.2布局——layout: accordion(Ext.layout.container.Accordion)
查看>>
OC ARC之循环引用问题(代码分析)
查看>>
Windows/Centos安装GO语言环境
查看>>
C/C++函数指针声明
查看>>
iOS 苹果开发证书失效的解决方案(Failed to locate or generate matching signing assets)
查看>>
24款最好的jQuery日期时间选择器插件
查看>>
记2016腾讯 TST 校招面试经历,电面、笔试写代码、技术面、hr面,共5轮
查看>>
我是一个线程(转)
查看>>
ORACLE 11G用于有效期
查看>>
Java float保留两位小数或多位小数
查看>>
access order by 判断是否除数为0
查看>>
高仿微信新消息提示音功能
查看>>
Atitit.antlr实现词法分析
查看>>
zmNgFrameWork 架构升级ng1.5和md5静态资源缓存方案【angular1.x】
查看>>
iOS应用内支付(IAP)的那些坑
查看>>
strings和nm命令
查看>>
eclipse + Android Studio 集成 Genymotion 模拟器
查看>>