微信中下载APP，页面跳转提示信息的实现

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

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

第一步：判断微信的UA。

1 2	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>

<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);

代码演示：

演示URL链接：http://www.oicto.com/demo/weixin-downapp/

运行效果：

微信中下载APP，页面跳转提示信息的实现相关推荐

微信中下载APP的方案安卓手机弹出默认浏览器打开苹果跳转App Store苹果商店下载
在微信中,打开app下载链接,或者使用微信扫一扫app下载二维码,都是无法下载app的. 因为腾讯为了自身利益,屏蔽了其他app直接在微信中下载.下面给分享下,找到的2种有效的解决方案. 方案:点击链 ...
微信中下载app共有两种实现方式，然而安卓手机跟苹果手机还尽然不同。
1.苹果用户打开后要么自动调起App Store下载(前提是你的应用在苹果商店上架了):要么是去Safari下载. 2.安卓用户打开链接后要么直接下载,要么前往手机默认浏览器下载. 以上是最好的实现方 ...
怎样微信扫描二维码跳转页面,H5页面在微信中下载APP的实现方式
使用微信推广的用户经常都会遇到推广链接被拦截导致无法下载app的情况,此时用户在微信中打开会提示" 已停止访问该网页 ".这对于使用微信营销的商家来说就很不友好且损失非常大,因为用 ...
微信中无法下载APP h5页面在微信中下载APP的解决方案
很多朋友都已经习惯在微信内分享网页链接和二维码了,通过扫描二维码下载APP或打开网页也成为大家惯用且非常方便的方式了.如此微信就成为了扫描二维码重要的工具,因为对于用户来说,说到二维码大家第一反应就是 ...
微信扫一扫功能扫描二维码调用外部浏览器打开指定页面实现微信中下载APP的功能
需求分析分享链接已经成为手机应用一个非常重要的推广传播形式.为了提高转化率,就需要用户不管是在微信内直接打开链接还是扫描二维码都能直接打下载app. 但由于微信对第三方应用管的非常严格,故目前的大环 ...
js实现在微信中下载app
需求:从微信里跳到外部浏览器进行apk文件下载原因:在微信内不允许直接下载apk 微信中提示在浏览器中打开 <!doctype html> <html lang="en& ...
herl工具解决微信中下载APP
微信是目前超高活跃度的app稳稳第一名,是目前最具营销价值的营销渠道之一. 很多朋友应该都遇到过这样的问题,微信中是无论是扫描二维码下载还是下载页链接下载apk(APP),都是无法下载的,我们要怎么解 ...
微信中下载app无反应微信浏览器无法apk下载链接方案
上半年公司有一个新的APP项目上线,我们在项目首页做个二维码,然后用户用手机扫一扫就能下载了.但是很多用户反映扫一扫之后下载不了,了解之后才知道这些用户都是使用的微信的扫一扫,而我们开发测试人员一般使 ...
微信自动下载app（安卓跳转默认浏览器苹果跳转苹果商店App Store）
很多朋友的APP推广链接需要在微信中进行的网页宣传.传播.下载等等,但是各位朋友一定发现了微信中是屏蔽掉了APP的下载链接的.但是微信最为一个最大的社交平台,为了自身的利益,屏蔽掉了所有APK的下载链 ...

微信中下载APP，页面跳转提示信息的实现

微信中下载APP，页面跳转提示信息的实现相关推荐

最新文章

热门文章