当前位置: 首页 > Web前端 > JavaScript

在H5页面打开app,安卓和苹果

时间:2023-03-26 22:34:39 JavaScript

对于app的分享页面,移动端经常会遇到需要唤醒app定位的功能。跳转到App方法Android通常使用URLScheme方法IOS有两种方法,meta标签和UniversalLinks,我们通常使用UniversalLinksURLSchemeURLScheme是一个外部接口,可以让app相互跳转。每个app都不一样,如果有重复,会响应先安装的app。URLScheme的格式为:[scheme]://[host]/[path]?[query]例如:淘宝:taobao://QQ:mqq://WeChat:weixin://metatagssetmeta在网页选项卡上,用safari打开时,顶部会显示自己app的导航栏。如果没有安装应用,点击跳转到应用商店下载。如果安装了应用,可以直接通过顶部的meta标签唤醒应用。(这是IOS独有的)Universal在LinksiOS9之前,一直使用URLSchemes技术从外部跳转到App,但是如果在iOS系统中跳转URLSchemes时App没有安装,会提示CannotopenPage,而当有多个注册时方案是一样的,目前没有办法区分,但是从iOS9开始,可以使用UniversalLinks技术跳转到页面,是实现唤醒更完美的解决方案应用程序的功能。唤醒应用大部分时间是在微信中,但是由于微信内部禁用了唤醒功能,所以做了一个引导页,引导用户通过浏览器打开。(可以唤起一些知名app)

//获取浏览器用于HTTP请求的useragentheader的值varu=navigator.userAgent,ua=u.toLowerCase()varisWeiXin=ua.indexOf('micromessenger')!=-1;var{isAndroid,isIOS}=detectVersion()//获取scheme跳转的参数id值和source值varid=getQueryString('id')varsource=getQueryString('source')//判断当前浏览器函数detectVersion(){varisAndroid,isIOS;if(u.indexOf('Android')>-1||u.indexOf('Linux')>-1){//android或uc浏览器//androidisAndroid=true}if(ua.indexOf("likemacosx")>0){isIOS=true}return{isAndroid,isIOS}}//调用app方法functionopenApp(callback){varurl=""if(isAndroid){url='[scheme]://'+source+'?id='+idvartimeout,t=3000,hasApp=truevaropenScript=setTimeout(function(){if(!hasApp){callback&&callback()}document.body.removeChild(ifr)},5000)vart1=Date.now()varifr=document.createElement("iframe")ifr.setAttribute("src",url)ifr.setAttribute("style","display:none")document.body.appendChild(ifr)timeout=setTimeout(function(){vart2=Date.now()if(t2-t1