微信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

相关文章

使用Python实现可恢复式多线程下载器

《使用Python实现可恢复式多线程下载器》在数字时代,大文件下载已成为日常操作,本文将手把手教你用Python打造专业级下载器,实现断点续传,多线程加速,速度限制等功能,感兴趣的小伙伴可以了解下... 目录一、智能续传:从崩溃边缘抢救进度二、多线程加速:榨干网络带宽三、速度控制:做网络的好邻居四、终端交互

浏览器插件cursor实现自动注册、续杯的详细过程

《浏览器插件cursor实现自动注册、续杯的详细过程》Cursor简易注册助手脚本通过自动化邮箱填写和验证码获取流程,大大简化了Cursor的注册过程,它不仅提高了注册效率,还通过友好的用户界面和详细... 目录前言功能概述使用方法安装脚本使用流程邮箱输入页面验证码页面实战演示技术实现核心功能实现1. 随机

java向微信服务号发送消息的完整步骤实例

《java向微信服务号发送消息的完整步骤实例》:本文主要介绍java向微信服务号发送消息的相关资料,包括申请测试号获取appID/appsecret、关注公众号获取openID、配置消息模板及代码... 目录步骤1. 申请测试系统2. 公众号账号信息3. 关注测试号二维码4. 消息模板接口5. Java测试

如何在Mac上彻底删除Edge账户? 手动卸载Edge浏览器并清理残留文件技巧

《如何在Mac上彻底删除Edge账户?手动卸载Edge浏览器并清理残留文件技巧》Mac上的Edge账户里存了不少网站密码和个人信息,结果同事一不小心打开了,简直尴尬到爆炸,想要卸载edge浏览器并清... 如果你遇到 Microsoft Edge 浏览器运行迟缓、频繁崩溃或网页加载异常等问题,可以尝试多种方

Python如何将OpenCV摄像头视频流通过浏览器播放

《Python如何将OpenCV摄像头视频流通过浏览器播放》:本文主要介绍Python如何将OpenCV摄像头视频流通过浏览器播放的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完... 目录方法1:使用Flask + MJPEG流实现代码使用方法优点缺点方法2:使用WebSocket传输视

HTML5实现的移动端购物车自动结算功能示例代码

《HTML5实现的移动端购物车自动结算功能示例代码》本文介绍HTML5实现移动端购物车自动结算,通过WebStorage、事件监听、DOM操作等技术,确保实时更新与数据同步,优化性能及无障碍性,提升用... 目录1. 移动端购物车自动结算概述2. 数据存储与状态保存机制2.1 浏览器端的数据存储方式2.1.

基于 HTML5 Canvas 实现图片旋转与下载功能(完整代码展示)

《基于HTML5Canvas实现图片旋转与下载功能(完整代码展示)》本文将深入剖析一段基于HTML5Canvas的代码,该代码实现了图片的旋转(90度和180度)以及旋转后图片的下载... 目录一、引言二、html 结构分析三、css 样式分析四、JavaScript 功能实现一、引言在 Web 开发中,

springboot下载接口限速功能实现

《springboot下载接口限速功能实现》通过Redis统计并发数动态调整每个用户带宽,核心逻辑为每秒读取并发送限定数据量,防止单用户占用过多资源,确保整体下载均衡且高效,本文给大家介绍spring... 目录 一、整体目标 二、涉及的主要类/方法✅ 三、核心流程图解(简化) 四、关键代码详解1️⃣ 设置

一文详解MySQL如何设置自动备份任务

《一文详解MySQL如何设置自动备份任务》设置自动备份任务可以确保你的数据库定期备份,防止数据丢失,下面我们就来详细介绍一下如何使用Bash脚本和Cron任务在Linux系统上设置MySQL数据库的自... 目录1. 编写备份脚本1.1 创建并编辑备份脚本1.2 给予脚本执行权限2. 设置 Cron 任务2

电脑提示xlstat4.dll丢失怎么修复? xlstat4.dll文件丢失处理办法

《电脑提示xlstat4.dll丢失怎么修复?xlstat4.dll文件丢失处理办法》长时间使用电脑,大家多少都会遇到类似dll文件丢失的情况,不过,解决这一问题其实并不复杂,下面我们就来看看xls... 在Windows操作系统中,xlstat4.dll是一个重要的动态链接库文件,通常用于支持各种应用程序