h5网页检测手机是否安装了app。

公司业务拓展到微信，qq和支付宝；在这些平台打开的h5页面需要唤起app实现一些功能；

原理：h5页面内创建一个iframe 通过url scheme 实现h5与安卓和苹果之间的跳转。

实现：找客户端的同事获取url scheme，格式：xx://'跳转页面'/'携带参数'；通过这个链接我们可以跳转到应用的某个页面，并携带一定的参数；

代码实现：

1.通过创建iframe，并隐藏；

因为app厂商的差异，浏览器内核和版本不同；通过js触发存在风险；所以这里使用iframe url scheme地址来触发scheme；

var iframe = document.createElement("iframe");

iframe.src = openUrl;

iframe.style.display = "none";

2.判断是否安装了app；

原理：通过url scheme打开app。

if（成功）｛

h5页面进入后台，在定时器控制打开页面会有明显的延迟；

所以通过时间判断；new date

｝

function openAppUrl ( ){

var gotoApptime = (+new Date());

function check(opentime){

if(opentime>3000||document.hidden||document.webkitHidden){可判断页面是否可见

打开app的函数

}else{

错误未打开

//启动间隔20ms运行的定时器，并检测累计消耗时间是否超过3000ms，超过则结束

var num =0;

var timer = setInterval(function(){

num++;

var opentime =+new Date() - gotoApptime;

if(num>100 ||open time >3000){

clearInterval(timer);

check(opentime);

})

3.微信中h5页面打开app或者下载应用效果；通过应用宝链接实现。

                                 if(callback){/ /客户端检测微信直接跳应用宝链接varbrowser=BrowserInfo();//使用微链接varencodeUri=encodeURIComponent('你的uri');

if(browser.isWeixin){window.location.href='你的微链url&android_schema='+encodeUri;

}else{

openAppUrl(function(opened){


callback&&callback(opened);});

}}

完整函数

exportconstopenApp=function(openUrl,callback){//检查app是否打开functioncheckOpen(cb){var_clickTime= +(newDate());functioncheck(elsTime){if(elsTime>3000||document.hidden||document.webkitHidden){cb(1);}else{cb(0);}}//启动间隔20ms运行的定时器，并检测累计消耗时间是否超过3000ms，超过则结束var_count=0,intHandle;intHandle=setInterval(function(){_count++;varelsTime= +(newDate())-_clickTime;if(_count>=100||elsTime>3000){clearInterval(intHandle);check(elsTime);}},20);}

//在iframe 中打开APPvarifr=document.createElement('iframe');ifr.src=openUrl;ifr.style.display='none';

if(callback){//客户端检测微信直接跳应用宝链接varbrowser=BrowserInfo();//使用微链接varencodeUri=encodeURIComponent(openUrl);

if(browser.isWeixin){window.location.href='你的微链url&android_schema='+encodeUri;}else{checkOpen(function(opened){callback&&callback(opened);});

}}

document.body.appendChild(ifr);setTimeout(function(){document.body.removeChild(ifr);},2000);

}函数中调用的BrowserInfo是一个简单的客户端检测。具体如下：

/**

* 客户端检测

*/

exportconstBrowserInfo=function(){

varjson={

userAgent:navigator.userAgent.toLowerCase(),

isAndroid:Boolean(navigator.userAgent.match(/android/ig)),

isIphone:Boolean(navigator.userAgent.match(/iphone|ipod/ig)),

isIpad:Boolean(navigator.userAgent.match(/ipad/ig)),

isWeixin:Boolean(navigator.userAgent.match(/MicroMessenger/ig)),

}

returnjson;

}

h5网页检测手机是否安装了app。相关推荐

PC、H5网页授权跳转至支付宝APP
授权支付宝是拼接固定的链接,固定链接中的appId=20000067是固定的,只需要更改自己应用的appid 1.第三方应用授权单个授权拼接示例: https://openauth.alipay. ...
如何在一个APP内检测手机内安装了另外一个APP并且跳转到另外一个APP内？
开发情景:(uniapp) 前段时间,公司开发了一款拼团类型的购物软件,但是,突然被人举报有病毒,涉嫌欺诈(此APP还未上架),升级会报病毒,不升级交易支付时会有金融风险. 挽救措施: 改包名,移动开 ...
H5判断手机是否安装某个APP
举例子(支付宝) <!DOCTYPE html> <html><head><meta charset="UTF-8"><met ...
android 获取已安装错误代码,android获取手机已经安装的app信息
Android获取手机已安装APP(系统/非系统) 效果图主体代码 private ListView mlistview; private ListpackageInfoList; private ...
解决vivo手机无法安装测试APP的问题
编程环境: 1.android studio (java) 2.vivo y85 USB连接真机测试 **遇到的问题:**在用USB连接android studio 调试app时,发现在真机上无法安装 ...
android 检测手机是否安装了应用宝 app跳转应用宝
//检测是否安装了应用宝 public boolean isMobile_spExist() {PackageManager manager = this.getPackageManager();Li ...
android应用宝检测是否安装,android 检测手机是否安装了应用宝 app跳转应用宝
//检测是否安装了应用宝 public boolean isMobile_spExist() { PackageManager manager = this.getPackageManager(); ...
Android检测手机是否安装app
// 判断设备是否已经安装某应用// pkgName应用包名public static boolean checkInstalled(Context context, String pkgName) ...
手机html图片模糊,css3处理sprite背景图压缩来解决H5网页在手机浏览器下图标模糊的问题_html/css_WEB-ITnose...
最近在负责一个微信H5 App项目,遇到一个郁闷的问题,手机浏览器查看网页时图标都是模糊的,有锯齿,电脑浏览器显示则是正常.大概知道是分辨率适配等类型的问题,后来网上查找了一些办法,大部分的解决方案都 ...

h5网页检测手机是否安装了app。

h5网页检测手机是否安装了app。相关推荐

最新文章

热门文章