博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
微信内部浏览器打开网页时提示外部浏览器打开遮罩升级版
阅读量:7200 次
发布时间:2019-06-29

本文共 1660 字,大约阅读时间需要 5 分钟。

上半年公司有一个新的APP项目上线,我们在项目首页做个二维码,然后用户用手机扫一扫就能下载了。但是很多用户反映扫一扫之后下载不了,了解之后才知道这些用户都是使用的微信的扫一扫,而我们开发测试人员一般使用uc之类的浏览器做扫描。上网查了一下,微信自带的内置浏览器屏蔽了下载功能,所以才出现用微信扫一扫不能下载的情况。这时候我们一般会建议用户使用uc或者其他第三方浏览器自带的扫一扫功能下载。但是现在的微信太普及了,很多人都习惯性的使用微信来扫码下载,总不能每个用户都解释一遍,所以我们一直在寻找解决方案。 要解决这个问题思路很明确,既然微信内置浏览器不支持下载,那就只能想办法调用外部浏览器来下载。

所以我们在寻找这么一种方案:用户点了某个推广链接如何调用外部的浏览器实现下载功能呢?

 

 

 

好了,废话不多说了,直接上方案。

方案1:

弹出一个遮罩提示用户在新的浏览器窗口打开。

 

 
 

使用的是纯JS+HTML+CSS结合的方式,但不要一进入微信就弹出提示它在新浏览器中打开,在这个页面里面还可以提交表单查看信息等,只有它点击应用的链接后,才弹出提示它跳转后下载。

想要制作而又不懂技术的朋友可以前往

部分代码(网上有很多,我就不献丑了)

a>

×span>p>div>

var is_weixin = (function(){return navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1})();

window.onload = function() {

var winHeight = typeof window.innerHeight != 'undefined' ? window.innerHeight : document.documentElement.clientHeight; //兼容IOS,不需要的可以去掉

var btn = document.getElementById('J_weixin');

var tip = document.getElementById('weixin-tip');

var close = document.getElementById('close');

if (is_weixin) {

btn.onclick = function(e) {

tip.style.height = winHeight + 'px'; //兼容IOS弹窗整屏

tip.style.display = 'block';

return false;

}

close.onclick = function() {

tip.style.display = 'none';

}

}

}

方案2:

这个方案就是我们现在用的这种,相比第一种的话,转化率方面都有显著发的提升,

这个方案需要我们借助一个外部的接口来实现此功能 

我们在他们那边租用了此接口。

通过租用的接口可以实现安卓端微信直接唤醒手机默认浏览器打开指定的链接,从而实现下载APP的功能,

 
 

具体实现原理:

利用HTTP请求中Header中的user-agent字段,来识别用户的客户端,如果判断用户是在微信中打开的链接,则自动打开系统手机浏览器来打开链接。如果是在手机浏览器打开,则正常访问。

判断用户客户端的Javasript代码如下:

function is_wechat_client(){

      var ua = navigator.userAgent.toLowerCase();

      if(ua.match(/MicroMessenger/i)=="micromessenger"){

          return true;

      }else{

          return false;

      }

}

好了,亲们,上面两种办法笔者都尝试过了,均可行。如果你有更好的办法可以在此处留言,方便广大码友

转载于:https://www.cnblogs.com/csa12/p/10260020.html

你可能感兴趣的文章
图像处理——灰度化、二值化、膨胀算法、腐蚀算法以及开运算和闭运算
查看>>
Android 中PopupWindow使用 (转)
查看>>
Java-Junit 的Hello world
查看>>
文本文件与二进制文件区别
查看>>
Linux 基础命令
查看>>
获取项目
查看>>
Listview 异步加载图片之优化篇(有图有码有解释)
查看>>
ASP.NET MVC的Web Api的实练
查看>>
2011年一次面试的实际记录
查看>>
【原】移动web资源整理
查看>>
atitit.attilax.com产品 软件项目通用框架类库总结
查看>>
careercup-高等难度 18.6
查看>>
带鉴权信息的SIP呼叫
查看>>
Ubuntu14.04下安装DevStack
查看>>
TypeC一个微软开发的超简单.NET依赖注入/IoC容器
查看>>
UVa 490 - Rotating Sentences
查看>>
委托批量处理Excel
查看>>
八大排序算法
查看>>
还在为工作发愁?学JavaScript吧
查看>>
在Apache下开启SSI配置
查看>>