微信跳转手机默认浏览器提示微信h5页面中下载第三方app的方法

由于微信的限制，应用文件在内置浏览器中下载全部被屏蔽掉，造成很多人用微信扫描二维码下载时点击下载按钮没反应，我想到的是做一个提示用户在浏览器中打开下载。

可以参考：微信打开网址添加在浏览器中打开提示和微信扫描打开APP下载链接提示代码优化。

其实原来很简单，就是判断当前是在微信内置浏览器中，然后将默认隐藏的提示层显示出来。

案例如下：

一、遮罩提示：

二、微信跳转:微信自动跳转手机默认浏览器打开下载链接

安卓展示：直接跳转浏览器下载APK

苹果展示：直接跳转打开苹果商店

相信做前端的朋友一定都遇到这种情况的，当你的网页中有直接链接apk下载的时候会没有反映的，是因为在微信内是无法下载软件、手机APP等，那么这个时候一般的解决方案就是：必须要点击右上角三个点，选择“在浏览器中打开”才可以。但是这时候问题就来了，怎么添加提示信息页面让用户去点击右上角三个点,选择“在浏览器中打开”呢？

其实原来很简单，就是判断当前是在微信内置浏览器中，然后将默认隐藏的提示层显示出来。

第一步：判断微信的UA。

var ua = navigator.userAgent;
var isWeixin =  !!/MicroMessenger/i.test(ua);

第二步：引入默认隐藏层。

<a href="http://caibaojian.com/test.apk" id="JdownApp">点击下载APP</a>
<a href="http://caibaojian.com/test.apk" id="JdownApp2" class="btn-warn">点击下载APP2</a>
<div class="wxtip" id="JweixinTip">
<span class="wxtip-icon"></span>
<p class="wxtip-txt">点击右上角<br/>选择在浏览器中打开</p>
</div>

第三步：添加CSS样式

function weixinTip(ele){var ua = navigator.userAgent;var isWeixin = !!/MicroMessenger/i.test(ua);if(isWeixin){ele.onclick=function(e){window.event? window.event.returnValue = false : e.preventDefault();document.getElementById('JweixinTip').style.display='block';}document.getElementById('JweixinTip').onclick=function(){this.style.display='none';}}
}
var btn1 = document.getElementById('JdownApp');//下载一
weixinTip(btn1);
var btn2 = document.getElementById('JdownApp2'); //下载二
weixinTip(btn2);

第四步：点击按钮显示隐藏层，点击隐藏层关闭，总的JS代码如下：

function weixinTip(ele){var ua = navigator.userAgent;var isWeixin = !!/MicroMessenger/i.test(ua);if(isWeixin){ele.onclick=function(e){window.event? window.event.returnValue = false : e.preventDefault();document.getElementById('JweixinTip').style.display='block';}document.getElementById('JweixinTip').onclick=function(){this.style.display='none';}}
}
var btn1 = document.getElementById('JdownApp');//下载一
weixinTip(btn1);
var btn2 = document.getElementById('JdownApp2'); //下载二
weixinTip(btn2);

微信跳转手机默认浏览器提示微信h5页面中下载第三方app的方法相关推荐

H5 -- 微信h5页面中下载第三方app的方法
需求:在微信h5页面中下载第三方app -- 安卓, 直接下载apk文件包:iphone,跳转AppStore 分析:微信不支持,在微信中屏蔽了apk文件的下载以及AppStore的跳转(且除非和TX ...
需求：在微信h5页面中下载第三方app —— 安卓，直接下载apk文件包；iphone，跳转AppStore
分析:微信不支持,在微信中屏蔽了apk文件的下载以及AppStore的跳转(且除非和TX有合作的应用,否则也不支持通过scheme跳转第三方app) 点击查看案例地址变通方法: 一.借助TX的应用市 ...
微信跳转手机默认浏览器下载APP（APK）的方法
想必大家会经常碰到网页链接在微信内无法打开和微信内无法打开app下载页的情况.通常这种情况微信会给个提示 "已停止访问该网址" ,那么导致这个情况的因素有哪些呢,主要有以下四点 1 ...
微信跳转手机默认浏览器打开指定HTML链接微信点击链接直接下载安装包实现方式及源码
需求:微信跳转手机默认浏览器打开指定HTML链接微信点击链接直接下载安装包原因:在微信内不允许直接下载apk 这里有一个解决方案,直接上关键代码 <!doctype html> < ...
微信跳转手机默认浏览器打开的实现方式
最近遇到一个需求.朋友找我制作一个在微信中的聊天框,或者公众号菜单发布一条链接或者二维码,.跳出微信打开一个指定的我们自己的页面,拿到这个需求后我们团队分开去找资料研究方案,通过微信的开发文档.腾讯的 ...
H5页面拉起第三方App
这是一篇自己写的旧文,首发于: 原文链接,略有修改. 背景在H5页面或者app的webview中调起第三方app 核心调起app是操作系统(iOS.Android)的机制,在h5页面,我们可以做的 ...
app内嵌H5页面上传图片，调用app的方法和注册回调
html <span class="file-inp" @click.stop="changeImageA ...
微信打开链接可以实现微信跳转手机浏览器，实现微信下载APP或者打开指定链接。
当我们在微信内分享链接或二维码的时候,我们会发现我们的网站是可以在浏览器里正常打开的,但就是不能在微信里打开,提示 " 已停止访问该网页 ",无论是聊天框也一样.说是系统检测到您的 ...
怎么用微信打开链接可以实现微信跳转手机浏览器打开链接
但凡使用微信分享转发链接的朋友,应该都会遇到链接在微信内无法打开的问题,甚至可以说是家常便饭.一般都有以下几种情况: 情况1:分享转发H5网页,但会因为他人举报或微信系统检测到含敏感词和诱导分享内容 ...

微信跳转手机默认浏览器提示微信h5页面中下载第三方app的方法

微信跳转手机默认浏览器提示微信h5页面中下载第三方app的方法相关推荐

最新文章

热门文章

微信跳转手机默认浏览器提示 微信h5页面中下载第三方app的方法

微信跳转手机默认浏览器提示 微信h5页面中下载第三方app的方法相关推荐

最新文章

热门文章

微信跳转手机默认浏览器提示微信h5页面中下载第三方app的方法

微信跳转手机默认浏览器提示微信h5页面中下载第三方app的方法相关推荐