微信链接跳转浏览器 H5实现APP下载功能实现方法

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

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

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

案例如下：

一、遮罩提示：

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

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

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

部分关键代码

第一步：判断微信的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样式

.wxtip{background: rgba(0,0,0,0.8); text-align: center; position: fixed; left:0; top: 0; width: 100%; height: 100%; z-index: 998; display: none;}

.wxtip-icon{width: 52px; height: 67px; background: url(weixin-tip.png) no-repeat; display: block; position: absolute; right: 20px; top: 20px;}

.wxtip-txt{margin-top: 107px; color: #fff; font-size: 16px; line-height: 1.5;}

第四步：点击按钮显示隐藏层，点击隐藏层关闭，总的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下载功能实现方法相关推荐

微信链接跳转浏览器实现微信中直接下载棋牌游戏类APP功能
需求分析在微信的使用率已经高居各社交APP榜首的同时,微信成为了我国移动流量最大的平台之一.在此趋势的引导下,很多的商家.个体户便抓住了这一机遇,利用微信这个渠道来做产品的推广.以及营销方案宣传.但 ...
H5实现APP下载功能
<a href="https://dl.01zhuanche.com/android/upinstall/4.0/4.3.1/app_release_4.3.1_v88_db70.ap ...
实现微信小程序web-view内嵌H5中的下载功能(大文件切片下载)
实现微信小程序内嵌H5中的下载功能一.项目场景: 难点解决方案: 1.H5微信小程序: a.首先必不可少的是安装jweixin-module模块: b.在main.js中将依赖绑定: c.H5对应 ...
微信内置浏览器无法打开APP下载链接的解决方案
最近遇到一个问题,app用户邀请好友,分享到微信好友,但是微信好友打不开对应的app下载链接.然后ui给我做了个图,引导用户点击浏览器右上角,在外部浏览器中打开app下载页,如下图: 但是我又遇到问题 ...
打开链接跳转浏览器代码
简介: QQ打开链接跳转浏览器代码:自动识别是否为QQ内打开,如是将自动跳转浏览器,也可复制网址自己打开,复制下方代码加入到你的页面中就可实现. 目的是为了防止QQ拦截:如有帮助到你,请记得收藏,分享 ...
小红书直播功能如何用小红书app直播功能使用方法【详解】
小红书直播功能如何用小红书app直播功能使用方法[详解]小红书直播会用到什么工具?一定要收藏这3个!#小红书直播 #小红书运营 #小红书开店小红书直播常用的三个工具,这里只要是你有实名认证的个人账 ...
微信分享链接打开无法下载APP的解决方案（微信自动跳转浏览器打开下载链接）
需求分析目前的APP基本都支持二维码扫描下载,二维码下载也成为了大家用起来很顺手的一种方式.由于微信的用户基本占据了国内市场的 90%,说到扫一扫用户第一个想到的就是打开微信扫一下,通过微信分享AP ...
微信中无法下载APP的解决办法---微信自动跳转浏览器打开下载链接
需求分析目前的APP基本都支持二维码扫描下载,二维码下载也成为了大家用起来很顺手的一种方式.由于微信的用户基本占据了国内市场的90%,说到扫一扫用户第一个想到的就是打开微信扫一下,通过微信分享APP ...
【微信跳转接口】微信引导用户右上角打开浏览器，访问APP下载链接
先给大家看效果图: demo源代码下载: https://download.csdn.net/download/qq15577969/11996508 直接上代码: <!DOCTYPE html ...

微信链接跳转浏览器 H5实现APP下载功能实现方法

微信链接跳转浏览器 H5实现APP下载功能实现方法相关推荐

最新文章

热门文章