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

在H5中唤起APP,如果激活失败,进入APP下载页面

时间:2023-04-05 19:09:57 HTML5

H5中激发APP原理:通过Scheme协议打开APPScheme组成:scheme:path[#fragment]1.直接使用协议打开APP,如果打开失败,进入下载页面打开App

functionopenApp(){//尝试通过iframe打开APP,如果能正常打开,则直接切换到APP//每个APP都有自己的scheme协议name,例如微信为weixin:////否则跳转到APP下载页面varifr=document.createElement('iframe');ifr.src='APP协议://打开页面路径';ifr.style.display='无';文档.body.appendChild(ifr);window.setTimeout(function(){downloadAPP()document.body.removeChild(ifr);},2000)}functiondownloadAPP(){//判断是Android还是iOSconstu=navigator.userAgent;让系统='';如果(u.indexOf('Android')>-1||u.indexOf('Adr')>-1){system='Android';}elseif(!!u.match(/\(i[^;]+;(U;)?CPU.+MacOSX/)){system='iOS';}else{system='unknown';}//根据系统的不同,跳转到不同的下载APP地址if(system==='Android'){//TODO:这里也可以根据不同的手机厂商窗口跳转到各个厂商的应用商店.location="安卓下载位置address"}elseif(system==='iOS'){window.location="iOSstoreaddress"}}二、使用第三方插件,原理还是一样https://github.com/suanmei/ca...,具体用法见githubimportCallAppfrom'callapp-lib';functionopenApp(){constoption={scheme:{protocol:'matchu',},appstore:'appstore'sapplicationaddress','yingyongbao:'appaddress,Fallback:'打开失败后的页面',timeout:3000,};constlib=newCallApp(option);lib.open({path:'打开APP指定页面',});}