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

2024-04-19 13:04

本文主要是介绍微信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);}},

这篇关于微信H5下载文件处理:让微信自动弹起跳转外部浏览器窗口的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/917614

相关文章

Java利用@SneakyThrows注解提升异常处理效率详解

《Java利用@SneakyThrows注解提升异常处理效率详解》这篇文章将深度剖析@SneakyThrows的原理,用法,适用场景以及隐藏的陷阱,看看它如何让Java异常处理效率飙升50%,感兴趣的... 目录前言一、检查型异常的“诅咒”:为什么Java开发者讨厌它1.1 检查型异常的痛点1.2 为什么说

Python多线程实现大文件快速下载的代码实现

《Python多线程实现大文件快速下载的代码实现》在互联网时代,文件下载是日常操作之一,尤其是大文件,然而,网络条件不稳定或带宽有限时,下载速度会变得很慢,本文将介绍如何使用Python实现多线程下载... 目录引言一、多线程下载原理二、python实现多线程下载代码说明:三、实战案例四、注意事项五、总结引

Python利用PySpark和Kafka实现流处理引擎构建指南

《Python利用PySpark和Kafka实现流处理引擎构建指南》本文将深入解剖基于Python的实时处理黄金组合:Kafka(分布式消息队列)与PySpark(分布式计算引擎)的化学反应,并构建一... 目录引言:数据洪流时代的生存法则第一章 Kafka:数据世界的中央神经系统消息引擎核心设计哲学高吞吐

Go语言使用Gin处理路由参数和查询参数

《Go语言使用Gin处理路由参数和查询参数》在WebAPI开发中,处理路由参数(PathParameter)和查询参数(QueryParameter)是非常常见的需求,下面我们就来看看Go语言... 目录一、路由参数 vs 查询参数二、Gin 获取路由参数和查询参数三、示例代码四、运行与测试1. 测试编程路

Java异常捕获及处理方式详解

《Java异常捕获及处理方式详解》异常处理是Java编程中非常重要的一部分,它允许我们在程序运行时捕获并处理错误或不预期的行为,而不是让程序直接崩溃,本文将介绍Java中如何捕获异常,以及常用的异常处... 目录前言什么是异常?Java异常的基本语法解释:1. 捕获异常并处理示例1:捕获并处理单个异常解释:

MyBatis的xml中字符串类型判空与非字符串类型判空处理方式(最新整理)

《MyBatis的xml中字符串类型判空与非字符串类型判空处理方式(最新整理)》本文给大家介绍MyBatis的xml中字符串类型判空与非字符串类型判空处理方式,本文给大家介绍的非常详细,对大家的学习或... 目录完整 Hutool 写法版本对比优化为什么status变成Long?为什么 price 没事?怎

MySQL中处理数据的并发一致性的实现示例

《MySQL中处理数据的并发一致性的实现示例》在MySQL中处理数据的并发一致性是确保多个用户或应用程序同时访问和修改数据库时,不会导致数据冲突、数据丢失或数据不一致,MySQL通过事务和锁机制来管理... 目录一、事务(Transactions)1. 事务控制语句二、锁(Locks)1. 锁类型2. 锁粒

Spring Boot项目如何使用外部application.yml配置文件启动JAR包

《SpringBoot项目如何使用外部application.yml配置文件启动JAR包》文章介绍了SpringBoot项目通过指定外部application.yml配置文件启动JAR包的方法,包括... 目录Spring Boot项目中使用外部application.yml配置文件启动JAR包一、基本原理

SpringBoot实现RSA+AES自动接口解密的实战指南

《SpringBoot实现RSA+AES自动接口解密的实战指南》在当今数据泄露频发的网络环境中,接口安全已成为开发者不可忽视的核心议题,RSA+AES混合加密方案因其安全性高、性能优越而被广泛采用,本... 目录一、项目依赖与环境准备1.1 Maven依赖配置1.2 密钥生成与配置二、加密工具类实现2.1

Python调用LibreOffice处理自动化文档的完整指南

《Python调用LibreOffice处理自动化文档的完整指南》在数字化转型的浪潮中,文档处理自动化已成为提升效率的关键,LibreOffice作为开源办公软件的佼佼者,其命令行功能结合Python... 目录引言一、环境搭建:三步构建自动化基石1. 安装LibreOffice与python2. 验证安装