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

相关文章

W外链微信推广短连接怎么做?

制作微信推广链接的难点分析 一、内容创作难度 制作微信推广链接时,首先需要创作有吸引力的内容。这不仅要求内容本身有趣、有价值,还要能够激起人们的分享欲望。对于许多企业和个人来说,尤其是那些缺乏创意和写作能力的人来说,这是制作微信推广链接的一大难点。 二、精准定位难度 微信用户群体庞大,不同用户的需求和兴趣各异。因此,制作推广链接时需要精准定位目标受众,以便更有效地吸引他们点击并分享链接

无人叉车3d激光slam多房间建图定位异常处理方案-墙体画线地图切分方案

墙体画线地图切分方案 针对问题:墙体两侧特征混淆误匹配,导致建图和定位偏差,表现为过门跳变、外月台走歪等 ·解决思路:预期的根治方案IGICP需要较长时间完成上线,先使用切分地图的工程化方案,即墙体两侧切分为不同地图,在某一侧只使用该侧地图进行定位 方案思路 切分原理:切分地图基于关键帧位置,而非点云。 理论基础:光照是直线的,一帧点云必定只能照射到墙的一侧,无法同时照到两侧实践考虑:关

常用的jdk下载地址

jdk下载地址 安装方式可以看之前的博客: mac安装jdk oracle 版本:https://www.oracle.com/java/technologies/downloads/ Eclipse Temurin版本:https://adoptium.net/zh-CN/temurin/releases/ 阿里版本: github:https://github.com/

【生成模型系列(初级)】嵌入(Embedding)方程——自然语言处理的数学灵魂【通俗理解】

【通俗理解】嵌入(Embedding)方程——自然语言处理的数学灵魂 关键词提炼 #嵌入方程 #自然语言处理 #词向量 #机器学习 #神经网络 #向量空间模型 #Siri #Google翻译 #AlexNet 第一节:嵌入方程的类比与核心概念【尽可能通俗】 嵌入方程可以被看作是自然语言处理中的“翻译机”,它将文本中的单词或短语转换成计算机能够理解的数学形式,即向量。 正如翻译机将一种语言

基于51单片机的自动转向修复系统的设计与实现

文章目录 前言资料获取设计介绍功能介绍设计清单具体实现截图参考文献设计获取 前言 💗博主介绍:✌全网粉丝10W+,CSDN特邀作者、博客专家、CSDN新星计划导师,一名热衷于单片机技术探索与分享的博主、专注于 精通51/STM32/MSP430/AVR等单片机设计 主要对象是咱们电子相关专业的大学生,希望您们都共创辉煌!✌💗 👇🏻 精彩专栏 推荐订阅👇🏻 单片机

EasyPlayer.js网页H5 Web js播放器能力合集

最近遇到一个需求,要求做一款播放器,发现能力上跟EasyPlayer.js基本一致,满足要求: 需求 功性能 分类 需求描述 功能 预览 分屏模式 单分屏(单屏/全屏) 多分屏(2*2) 多分屏(3*3) 多分屏(4*4) 播放控制 播放(单个或全部) 暂停(暂停时展示最后一帧画面) 停止(单个或全部) 声音控制(开关/音量调节) 主辅码流切换 辅助功能 屏

2. 下载rknn-toolkit2项目

官网链接: https://github.com/airockchip/rknn-toolkit2 安装好git:[[1. Git的安装]] 下载项目: git clone https://github.com/airockchip/rknn-toolkit2.git 或者直接去github下载压缩文件,解压即可。

Python3 BeautifulSoup爬虫 POJ自动提交

POJ 提交代码采用Base64加密方式 import http.cookiejarimport loggingimport urllib.parseimport urllib.requestimport base64from bs4 import BeautifulSoupfrom submitcode import SubmitCodeclass SubmitPoj():de

Thymeleaf:生成静态文件及异常处理java.lang.NoClassDefFoundError: ognl/PropertyAccessor

我们需要引入包: <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency><dependency><groupId>org.springframework</groupId><artifactId>sp

使用JS/Jquery获得父窗口的几个方法(笔记)

<pre name="code" class="javascript">取父窗口的元素方法:$(selector, window.parent.document);那么你取父窗口的父窗口的元素就可以用:$(selector, window.parent.parent.document);如题: $(selector, window.top.document);//获得顶级窗口里面的元素 $(