react-判断移动平台或者跳转

613 阅读1分钟

使用 react 开发过程可能会碰到 h5 根据不同平台适配的功能,关于微信界面提示跳转到某个下载连接,或者跳转到某个app,下面将会简单介绍下

判断是否是移动端

let isMobile = (RegExp('iphone').test(u) || 
                RegExp('ipod touch').test(u) ||
                RegExp('ipad').test(u) || 
                RegExp('android').test(u) || 
                RegExp('android 2').test(u))

判断移动平台

const PlatformUtils = () => {
    let u = navigator.userAgent.toLowerCase();

    let mobile = {
        isIphone : function() {
            return (RegExp('iphone').test(u) || RegExp('ipod touch').test(u))
        },
        isIpad : function() {
            return RegExp('ipad').test(u)
        },
        isAndroid : function() {
            return (RegExp('android').test(u) || RegExp('android 2').test(u))
        },
        isWechat: function() {
            return RegExp(/MicroMessenger/i).test(u)
        },
        isQQ: function() {
            return RegExp(/\sQQ/i).test(u)
        },
    }

    return {
        ...mobile,
        isMobile : function() {
            return (mobile.isIphone() || mobile.isIpad() || mobile.isAndroid())
        }
    };
}

跳转到指定平台或者下载地址

urls = {
    'android':'http://host/android/123123.apk',
    'ios':'https://itunes.apple.com/cn/app/wei/123123123', //也可以使用 Universal Link跳转app
    'other':'其他连接或者我们的app的scheme,可以跳转app'
};
//链接到指定url
window.location.href = urls.ios;