h5端聚合分发app

将至端午节，我们这边的一款文旅产品app需要在服务区进行地推，为配合好推广，需要在服务区张贴易拉罐海报等多种形式二维码供新老用户下载。

不具体写代码，只写相关方法

需求功能：

  1. IOS端 扫码进入APPLE STORE中下载APP。
  2. Android端 扫码进入对应机型的应用商店中下载APP。若已经安装APP，则尝试唤醒APP。
  3. 其他端打开，进入官网。

思路：

  1. 获取当前设备类型，判断是否为IOS或Android。
  2. 判断终端设备品牌（小米，华为…）。
  3. 尝试打开app
    …

一些方法：

h5跳转打开app

window.location.href = 'scheme url'

h5唤醒app，未安装或唤醒失败时的处理

  1. 监听页面是否被隐藏/显示，若有变化归结为唤醒成功。
  2. 添加延时方法，若在指定时间内未唤醒成功，则跳转容错页面。
// 默认展示
let onShow = 'visible'
let timer = null

document.addEventListener("visibilitychange", function () {
    // 将页面赋值给onShow
    onShow = document.visibilityState
    // 清除延时，不再跳转容错页面
    timer && clearTimeout(timer)
});
// 唤醒app
window.location.href = 'scheme url'
// 延时3秒，若在3秒内未唤醒成功并且页面打开显示状态，则跳转容错页面
timer = setTimeout(() => {
    // 页面没变化，跳转
    if (onShow === "visible") {
        window.location.href = '容错页面或操作'
    }
}, 1000 * 3)

获取手机品牌、跳转对应应用商店

国内安卓手机都会预装本品牌的应用商店且不可卸载，故直接跳转即可。

function getMobileBrand() {
    let sUserAgent = navigator.userAgent.toLowerCase()
    var isHuawei = sUserAgent.match(/huawei/i) == "huawei";
    var isHonor = sUserAgent.match(/honor/i) == "honor";
    var isOppo = sUserAgent.match(/oppo/i) == "oppo";
    var isOppoR15 = sUserAgent.match(/pacm00/i) == "pacm00";
    var isVivo = sUserAgent.match(/vivo/i) == "vivo";
    var isXiaomi = sUserAgent.match(/mi\s/i) == "mi ";
    var isXiaomi2s = sUserAgent.match(/mix\s/i) == "mix ";
    var isRedmi = sUserAgent.match(/redmi/i) == "redmi";
    if (isHuawei || isHonor) {
        return 'huawei';
    } else if (isOppo || isOppoR15) {
        return 'oppo';
    } else if (isVivo) {
        return 'vivo';
    } else if (isXiaomi || isRedmi || isXiaomi2s) {
        return 'xiaomi';
    } else {
        return 'default';
    }
}

const appStore = {
    vivo: 'vivomarket://details?id=包名',
    huawei: 'appmarket://details?id=包名',
    oppo: 'oppomarket://details?packagename=包名',
    xiaomi: 'mimarket://details?id=包名',
    default: '如果真没应用市场的时候跳转的下载apk地址'
}
// 跳转对应市场
window.location.href = appStore[getMobileBrand()];

获取设备终端类型

function judgeClient() {
    let u = navigator.userAgent;
    let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;   //判断是否是 android终端
    let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);     //判断是否是 iOS终端
    if(isAndroid){
        return 'Android';
    }else if(isIOS){
        return 'IOS';
    }else{
        return 'Other';
    }
}

获取访问终端内核

let browser = {
    versions: function () {
    let u = navigator.userAgent, app = navigator.appVersion;
    return {
        trident: u.indexOf('Trident') > -1, //IE内核
        presto: u.indexOf('Presto') > -1, //opera内核
        webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
        gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,//火狐内核
        mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
        ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
        android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android终端
        iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
        iPad: u.indexOf('iPad') > -1, //是否iPad
        webApp: u.indexOf('Safari') == -1, //是否web应该程序，没有头部与底部
        weixin: u.indexOf('MicroMessenger') > -1, //是否微信
        qq: u.match(/\sQQ/i) == " qq" //是否QQ
    };
    }(),
    language: (navigator.browserLanguage || navigator.language).toLowerCase()
};

欢迎大家下载 豫行易途App，一起玩转河南！！
https://blog.zhanghaoran.ren/image/1718091310221豫行易途app下载.png