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

一、业务场景

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

二、实现方法

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

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

//判断浏览器类型

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);

}

},