前端根据机型跳转对应市场下载app

公司有这样的要求,H5界面,让用户点击下载我们公司App按钮后,判断机型,引导到各自的应用商店去下载,然后那些冷门机型就通过链接下载。

注意:我本来想的是通过js来判断用户是否安装了这个App,发现基本上不可能实现。网上也有通过location打开判断时长来确定用户是否安装了app(原理在于 如果安装了app 至少有一段时间打开app,而没有,js的判断基本上在一瞬间完成。)

我用的方法是 直接通过应用商店来判断是否下载了,反正就是一股脑地拉起应用商店,应用商店会判断,安装了的会直接显示打开(嘻嘻,这不就行了?)

首先 上判断机型的方法

judeBrand() {
                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'
                }
            },

如果想要判断更加准确,更加齐全,建议去搜一搜各种手机的useAgent 然后根据它写match的正则。

2.跳转链接方法

downLoadUrl(url) {
                const a = document.createElement('a')
                a.href= url
                a.click()
            }

3.主方法

 goDownload() {
                const iosLinkUrl = "苹果链接"
                const androidLinkurl = "安卓链接"
                const huaweiUrl = 'appmarket://details?id=com.xx.xxx'
                const oppoUrl = "oppomarket://details?packagename=com.xx.xxx"
                const vivoUrl = "vivomarket://details?id=com.xx.xxx"
                const xiaomiUrl = 'mimarket://details?id=com.xx.xxx'
                switch (this.judeBrand()) {
                    case 'iphone':
                        this.downLoadUrl(iosLinkUrl)
                        break
                    case 'xiaomi':
                        this.downLoadUrl(xiaomiUrl)
                        break
                    case 'huawei':
                        this.downLoadUrl(huaweiUrl)
                        break
                    case 'vivo':
                        this.downLoadUrl(vivoUrl)
                        break
                    case 'oppo':
                        this.downLoadUrl(oppoUrl)
                        break
                    default:
                        this.downLoadUrl(androidLinkurl)
                        break
                }

            },

com.xx.xxx换成上线应用市场的标识名字

苹果会自动打开自己应用市场。

  • 3
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值