微信H5下载文件处理:让微信自动弹起跳转外部浏览器窗口

一、业务场景

微信上进行的网页宣传、游戏传播、文件下载各类活动很多,因微信内置浏览器限制等因素无法完成下载,这时需要跳转至第三方浏览器完成后续操作。

二、实现方法

方法一、弹出一个遮罩提示用户在新的浏览器窗口打开
再也不用管微信如何的更新,直接判断如果是在微信中打开,然后弹出一个遮罩提示用户在浏览器中打开下载。并且不加关闭的按钮。效果如下面这样子,这样子用户微信中打开链接,就提示在浏览器中打开,并且可以直接下载应用了。
请添加图片描述

方法二、(个人感觉第一中方法对用户不太友好,操作过于繁琐)
此方法在实际项目中实操过,比较友好。当用户点击下载按钮时,调起弹出框让用户直接选择可打开的软件,确认后可直接跳转至第三方APP进行下载,简化了下载步骤,效果图和实现代码如下:
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/e4aa339f1afd45729717b09fe06f5549.jpe
在这里插入图片描述

<div class="right">
    <van-image width="28px" height="28px" fit="cover" :src="downloadIcon" @click="downloadCourseware(item)" />
    <a class="app-download-btn" id="BtnClick" href="javascript:;" style="display: none;"> 点此继续访问 </a>
</div>

//判断浏览器类型
    modelUtilInit() {
      var UA = navigator.userAgent,
        isAndroid = /android|adr/gi.test(UA),
        isIOS = /iphone|ipod|ipad/gi.test(UA) && !isAndroid,
        isBlackBerry = /BlackBerry/i.test(UA),
        isWindowPhone = /IEMobile/i.test(UA),
        isMobile = isAndroid || isIOS || isBlackBerry || isWindowPhone;
      this.viewParam = {
        isAndroid: isAndroid,
        isIOS: isIOS,
        isMobile: isMobile,
        isWeixin: /MicroMessenger/gi.test(UA),
        isQQ: /QQ/gi.test(UA)
      };
      console.log(this.viewParam);
    },
 /** 下载文件 */
    downloadCourseware(file) {
      // 判断是否是微信内置浏览器
      if (this.viewParam.isWeixin) {
        // 安卓浏览器
        if (this.viewParam.isAndroid) {
          var iframe = document.createElement("iframe");
          iframe.style.display = "none";
          iframe.src = file.filePath;
          document.body.appendChild(iframe);
          iframe.click();
        }
        // IOS浏览器
        else if (this.viewParam.isIOS) {
          var entityDom = document.getElementById('BtnClick');
          entityDom.href = file.filePath;
          entityDom.click();
        }
      }
      // 非微信内置浏览器
      else {
        window.location.replace(file.filePath);
      }
    },
评论 12
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值