微信扫码提示在浏览器中打开的2种实现方式
由于微信的限制,应用文件在内置浏览器中下载全部被屏蔽掉,造成很多人用微信扫描二维码下载时点击下载按钮没反应,我想到的是做一个提示用户在浏览器中打开下载。
方法一:遮罩提示法
其实原来很简单,就是判断当前是在微信内置浏览器中,然后将默认隐藏的提示层显示出来。
第一步:判断微信的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.οnclick=function(e){ window.event? window.event.returnValue = false : e.preventDefault(); document.getElementById('JweixinTip').style.display='block';} document.getElementById('JweixinTip').οnclick=function(){ this.style.display='none';}} }var btn1 = document.getElementById('JdownApp');//下载一weixinTip(btn1);var btn2 = document.getElementById('JdownApp2'); //下载二weixinTip(btn2);
以上就是遮罩代码,你再也不用担心用户不会操作了。
方法二:自动跳转法
该方法需要分苹果和安卓2种情况,我们可以用现有的工具接口:Getinstall
安卓:
可以直接填写apk的下载地址,也可以直接填写H5下载页面的落地页,接口判断为安卓设备时会自动跳出外部浏览器,并打开填写的地址。
苹果:
这里就比较复杂了,由于Getinstall接口判断设备为苹果时,第一步会判断是网页还是下载,如果是下载APP,会自动调用AppStore的APP下载模块,直接下载APP,如果判断为网页,则也是执行上面的遮罩代码,提示用户在safari 中打开。
虽然Getinstall是专用于APP下载的接口,但如果是想要做网页跳转也是可以直接拿来使用的。
微信扫码提示在浏览器中打开的2种实现方式相关推荐
- 微信扫码提示在浏览器中打开的遮罩代码解决方式
相信做前端的朋友一定都遇到这种情况的.当你的网页中有直接链接apk下载的时候会没有反映的.是因为在微信内是无法下载软件.手机APP等.那么这个时候一般的解决方案就是.必须要点击右上角三个点.选择&qu ...
- 微信扫码提示在浏览器中打开的遮罩代码
由于微信的限制,应用文件在内置浏览器中下载全部被屏蔽掉,造成很多人用微信扫描二维码下载时点击下载按钮没反应,我想到的是做一个提示用户在浏览器中打开下载. 之前写过的两篇文章:微信打开网址添加在浏览器中 ...
- 微信中提示在浏览器中打开
使用微信打开网址时,无法在微信内打开常用下载软件,手机APP等.网上流传的各种微信打开下载链接,微信一更新基本失效.大家常用的方法是,弹出一个遮罩提示用户在新的浏览器窗口打开,再也不用管微信如何的更新 ...
- 微信打开网址提示在浏览器中打开的办法
使用微信打开网址时,无法在微信内打开常用下载软件,手机APP等.网上流传的各种微信打开下载链接,微信一更新基本失效.大家常用的方法是,弹出一个遮罩提示用户在新的浏览器窗口打开,再也不用管微信如何的更新 ...
- 微信提示已停止访问该网页,提示在浏览器中打开
微信提示:已停止访问该网页, 该网站链接以及在qq上被提示危险网站,千万别访问,首先先看下微信中打开网址被微信拦截并 不管是网站的首页,还是产品的页面地址,以及在线支付的地址,都会被微信提示:已停止访 ...
- 微信扫码 android sdk,H5中js-sdk扫码功能,Android手机微信中无法调用扫码?
我的H5对接微信JS-SDK中的扫码功能,发现在Android手机微信中无法调用扫码功能,在苹果手机微信中可以使用. 报如下错误: errMsg:scanQRCode:permissi on deni ...
- 企业微信客户端通过jsapi调起微信扫码提示40093:jsapi签名错误
错误提示: 检查原因:40093,jsapi签名错误. 1.请检查用于签名的jsapi_ticket是否是正确的,是否过期.可以通过获取相应jsapi_ticket接口获取当前的jsapi_tic ...
- 借助云开发10行代码生成小程序码,可以微信扫码快速进入指定小程序页
最近老有同学问我,如何生成小程序二维码,让用户扫码后能快速进入指定页面.经过一番研究,发现用云开发的云调用来实现特别方便,基本上10行代码就可以快速的生成指定页面的二维码.这样我们在做一些线下业务时就 ...
- 「实用」微信扫码 - 关注公众号后网站自动登录
点击上方 好好学java ,选择 星标 公众号 重磅资讯.干货,第一时间送达 今日推荐:用好Java中的枚举,真的没有那么简单!个人原创+1博客:点击前往,查看更多 作者:destiny 链接:htt ...
- 微信扫码:关注公众号后网站自动登录的实现原理
点击上方 Java后端,选择 设为星标 优质文章,及时送达 作者:destiny 链接:segmentfault.com/a/1190000022188562 序言 常见方式 平常大家见到过最多的扫码 ...
最新文章
- maven学习(4)-Maven 构建Web 项目
- nvm-windows安装和配置
- sudo运行程序遇到的问题
- CIKM 2021 | Google出品:将对比学习用于解决推荐系统长尾问题
- (2)verilog语言编写打两拍
- python 旅游_Python带你来一次说走就走的环球旅行
- python java正则表达式_java 正则表达式
- 黑苹果Mojave下驱动高通模块Atheros DHXA-195(AR9285无线网卡和AR3011 蓝牙3.0)
- socks5 转换为 http 代理(使用privoxy)
- 华为网络安全论述题解析(1)
- 电子产品做3C认证检测标准是什么
- ARP报文抓包解析学习
- 60条有名的原则与定理
- 子网掩码是什么,IP段的24是什么写法(CIDR写法,斜杠记法斜线记法)
- streaming mr
- VS Warring
- ADS(Authenticated data structure)
- 网页内嵌B站视频,隐藏相关控件
- Java中使用SOAP的方式调用天气预报webservice的接口实例
- 拼手气红包java_JAVA实现拼手气红包算法
热门文章
- colmak键盘_萌神进化 IKBC 新POKER2机械键盘体验
- highcharts使用downloadCSV导出数据时间与实际时间不对应
- windows重置net use或者SMB协议
- 传输层 可靠传输 连续ARQ协议和滑动窗口协议
- PS给人物添加阴影和高光
- 苹果手机怎么投屏到电脑上?屏幕镜像即可投屏
- 信用评分模型详解(上)之 评分卡模型
- 2.3 sklearn中的metrics.roc_curve评价指标
- linux socket监听端口,Linux-socket使用
- java实现一码多扫支付_详解JAVA后端实现统一扫码支付:微信篇