admin管理员组文章数量:1558099
判断是否安装某款app?
原理:
- 技术中 没有某个参数 去判断是否存在app。
- 利用延时器原理:超过指定时间未打开app,则该判断手机未安装该app
如果是在微信浏览器打开h5页面,域名未加入到 微信白名单
中,则必须切换到 浏览器
中才能打开
/**
* 判断是否安装app
* @url ios,android 提供(打开app的链接)
* @callback (未安装app的回调)
* */
function openApp(url, callback) {
let {isAndroid, isIOS, isIOS9} = judgePhoneType();
if(isWeiXin()){
alert("请您在浏览器中打开,即可下载") ;
return ;
}
if (isAndroid || isIOS) {
let hasApp = true, t = 1000,
t1 = Date.now(),
ifr = document.createElement("iframe");
setTimeout(function () {
if (!hasApp) {
callback && callback()
}
document.body.removeChild(ifr);
}, 2000);
ifr.setAttribute('src', url);
ifr.setAttribute('style', 'display:none');
document.body.appendChild(ifr);
setTimeout(function () { //启动app时间较长处理
let t2 = Date.now();
if (t2 - t1 < t + 100) {
hasApp = false;
}
}, t);
}
if (isIOS9) {
location.href = url;
setTimeout(function () {
callback && callback()
}, 250);
setTimeout(function () {
location.reload();
}, 1000);
}
}
唤端媒介 URL Scheme
我们的手机上有许多私密信息,联系方式、照片、银行卡信息…我们不希望这些信息可以被手机应用随意获取到,信息泄露的危害甚大。所以,如何保证个人信息在设备所有者知情并允许的情况下被使用,是智能设备的核心安全问题。对此,苹果使用了名为 沙盒 的机制:应用只能访问它声明可能访问的资源。但沙盒也阻碍了应用间合理的信息共享,某种程度上限制了应用的能力。因此,我们急需要一个辅助工具来帮助我们实现应用通信, URL Scheme 就是这个工具。
格式
[scheme:][//authority][path][?query]
协议:域名/参数
例如: com.qdxxzy.user://shihaoo?type=xxx
const CONFIG = {
android: 'https://a.app.qq/o/simple.jsp?pkgname=com.xiaoxiao.shihaoo',
ios: 'https://apps.apple/cn/app/%E6%98%AF%E5%A5%BD/id1457958161',
scheme: 'com.qdxxzy.user://'
};
window.onload = function () {
let oBtn = document.getElementById('btn') ;
oBtn.addEventListener('click', function () {
//打开app整套流程
openApp( `${ CONFIG.scheme }shihaoo?type=xxx`, goConfirmAddr);
});
};
function openApp(){
...
}
/**
* 超时跳转h5页面
* */
function goConfirmAddr() {
let { isAndroid } = judgePhoneType();
window.location.href = !isAndroid ? CONFIG.ios : CONFIG.android ;
}
/**
* 判断是否为微信浏览器
* 兼容ios
* */
function isWeiXin() {
return /micromessenger/i.test(navigator.userAgent.toLowerCase()) || typeof navigator.wxuserAgent !== 'undefined'
}
/**
* 判断手机类型
* return [ isAndroid, isIOS, isIOS9 ]
* */
function judgePhoneType() {
let isAndroid = false, isIOS = false, isIOS9 = false, version,
u = navigator.userAgent,
ua = u.toLowerCase();
//Android系统
if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) { //android终端或者uc浏览器
isAndroid = true
}
//ios
if (ua.indexOf("like mac os x") > 0) {
let regStr_saf = /os [\d._]*/gi;
let verinfo = ua.match(regStr_saf);
version = (verinfo + "").replace(/[^0-9|_.]/ig, "").replace(/_/ig, ".");
}
let version_str = version + "";
// ios9以上
if (version_str !== "undefined" && version_str.length > 0) {
version = parseInt(version);
if (version >= 8) {
isIOS9 = true
} else {
isIOS = true
}
}
return {isAndroid, isIOS, isIOS9};
}
兼容ios
,判断是否为微信浏览器(不易查找,亲测有效)
return /micromessenger/i.test(navigator.userAgent.toLowerCase()) || typeof navigator.wxuserAgent !== 'undefined'
js跳转到各手机应用商城
1.是否是内置浏览器
function is_neizhi() {
var ua = navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == "micromessenger") {
return "weixin";
} else if (ua.match(/QQ/i) == "qq") {
return "QQ";
} else if (ua.match(/Alipay/i) == "alipay" && payway == 2) {
return "alipay";
}
return false;
}
2.判断手机品牌
function verifyBrand() {
const userAgent = navigator.userAgent.toLowerCase()
const isIphone = userAgent.match(/(iphone|ipad|ipod)/i);
const isHuawei = userAgent.match(/huawei/i);
const isHonor = userAgent.match(/honor/i);
const isOppo = userAgent.match(/oppo/i);
const isOppoR15 = userAgent.match(/PACM00/i);
const isVivo = userAgent.match(/vivo/i);
const isXiaomi = userAgent.match(/mi\s/i);
const isXIAOMI = userAgent.match(/xiaomi/i);
const isXiaomi2s = userAgent.match(/mix\s/i);
const isRedmi = userAgent.match(/redmi/i);
if (isIphone) {
return 'iphone'
} else if (isHuawei || isHonor) {
return 'huawei';
} else if (isOppo || isOppoR15) {
return 'oppo';
} else if (isVivo) {
return 'vivo';
} else if (isXiaomi || isRedmi || isXiaomi2s || isXIAOMI) {
return 'xiaomi';
} else {
return 'other'
}
}
3.跳转下载的主方法,如果是内置浏览器,需要跳转到手机自带的浏览器方可使用
function goDownload() {
if (is_neizhi()){
//内置浏览器 可加提示使其打开手机自带浏览器
return;
}
const iosLinkUrl = "苹果链接";
const androidLinkurl ="安卓链接";
const huaweiUrl = 'appmarket://details?id=安卓包名';
const oppoUrl = "oppomarket://details?packagename=安卓包名";
const vivoUrl = "vivomarket://details?id=安卓包名";
const xiaomiUrl = 'mimarket://details?id=安卓包名';
switch (this.verifyBrand()) {
case 'iphone':
window.location.href=iosLinkUrl ;
break;
case 'xiaomi':
window.location.href=xiaomiUrl;
break;
case 'huawei':
window.location.href=huaweiUrl;
break;
case 'vivo':
window.location.href=vivoUrl;
break;
case 'oppo':
window.location.href=oppoUrl;
break;
default:
window.location.href=androidLinkurl;
break;
}
}
版权声明:本文标题:H5判断是否安装某款app,打开app或跳转到app下载页面 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dianzi/1727318978a1108124.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论