微信打开网址添加在浏览器中打开提示遮罩

文章目录

使用微信打开网址时,无法在微信内打开常用下载软件,手机APP等。网上流传的各种微信打开下载链接,微信已更新基本失效,最新的一个是使用链接跳转方式:

http://mp.weixin.qq.com/mp/redirect?url=http://caibaojian.com/test.apk#weixin.qq.com#wechat_redirect。

将链接文本中的http://caibaojian.com/test.apk换成你的下载链接地址。本人已经测试可行。欢迎打开微信扫码测试。已经失效,用户可以将应用传到应用宝。

weixin-dl

终极解决方法

今天要加的是一个终极解决方法:弹出一个遮罩提示用户在新的浏览器窗口打开

再也不用管微信如何的更新,直接判断微信的ua,然后弹出一个遮罩提示用户在浏览器中打开下载。并且不加关闭的按钮。类似于下面这样子:

weixin-tip

这样子用户就只能在浏览器中打开,并且可以直接下载应用了。欢迎打开微信扫描查看(其他扫描没有效果)。

weixin-tip-js

演示和下载

我已经将代码上传到github上了,你可以直接下载我的图片和js来用。github地址

如果这个代码对你有用,希望你在下载时也点击star一下。

版本一:纯JS

版本二:纯jQuery

版本三:jquery+css+div(虽然操作复杂,但实际上平时常用这种)。

如果你已经将它用在你的项目中了,欢迎留下你的在线地址哦。

号外:由于这个代码一进入就是弹出提示,可能会影响用户其它操作,故而写了另一篇优化的代码,支持用户点击下载链接之后才弹出提示,并且还可以点击关闭。

详情请看:微信扫描打开APP下载链接提示代码优化

简单的教程:微信内置浏览器不支持下载文件应用的解决方法答疑

「五年博客,如果觉得我的文章对您有用,请帮助本站成长」

订阅周报 关注微博

原创文章:微信打开网址添加在浏览器中打开提示遮罩 ,未经许可,禁止转载,©版权所有
原文出处:前端开发博客 (http://caibaojian.com/weixin-tip.html)

发表评论

请登录后发表评论:

“微信打开网址添加在浏览器中打开提示遮罩”有109个评论

  1. 手机必备品

    博主,给做一个这样的呗,付费

    登录回复
  2. uianan

    博主你好,请问怎么让手机qq打开网址实现同样的效果?

    我的替换代码是:

    function is_mobileQQ() {
    var ua = navigator.userAgent.toLowerCase();
    if (ua.match(/\sQQ/i) == " qq" && /iphone/i.test(ua) == false) {
    return true;
    } else {
    return false;
    }
    }

    可是还是不能实现

    登录回复
  3. 雪莉杨先生_8608

    楼主你好 关于微信打开网址浏览器打开提示 您可以帮我做下吗 我做不好 可以给您支付报酬 感谢了 我微信 new3978

    登录回复
  4. ssdgff

    感谢博主,代码很好。

    登录回复
  5. Sumxelc

    问下,这个项目里弹出的遮罩层怎么实现点击后消失啊??

    登录回复
  6. 肥曼是瘦子

    你好啊,这个代码应该在哪里改写呢?能不能有具体的教程啊?谢谢你~!~!

    登录回复
  7. 用户3684641438

    你好 ,我刚接触这个东西,有个问题想问一下 这个如果一个页面上只能点击安卓实现跳转,拿苹果为什么不能跳转呢?

    登录回复
  8. 袁波00705

    你好,请问一下,另加一个判断手机QQ的UA
    这个代码加在哪里,怎么加,我加了怎么没效果。

    登录回复
    • 前端开发博客

      你好,qq这个是不需要添加的。为了不影响你的使用,我把qq这段代码移到别的地方。

      登录回复
  9. 会跳的雄蟑螂

    你好,请问怎么联系您,想请您帮我们做一个类似的程序

    登录回复
  10. 前端开发博客

    非常好的代码,感谢博主辛苦付出

    登录回复
  11. 小鬼哦111

    http://dwz.cn/2higTE 我想找个浏览器也有遮罩层图片指引浏览器下载 怎么处理啊? 能帮忙弄一下吗 ? 我新手

    登录回复
  12. 章章的小新

    博主,二维码的文本信息是1个apk下载链接,我怎么扫描二维码的时候,判断是微信还是什么浏览器啊?主要是这个中间步骤不知道怎么做,求大神讲解

    登录回复
    • 前端博客

      就是判断是微信标志,然后操作,主要代码:
      var ua = navigator.userAgent.toLowerCase();
      if (ua.match(/MicroMessenger/i) == "micromessenger"){}

      登录回复
      • 於飛龍

        博主 请教你一下 我现在使用wex5生成的二维码 然后微信扫一扫 不能正常下载apk 我需要在什么地方去判断是微信标志呢?

        登录回复
  13. happy--萍萍--

    扫面你放的这张二维码后 显示弹出遮罩页面,按照提示点击在浏览器打开后怎样下载apk呢,这快是怎么弄的

    登录回复
  14. wangshuCoding

    感谢分享~~~

    登录回复
  15. 三门峡水利

    请问高手,这个如何使用的呢。我是需要在一个支付宝支付界面添加这个功能

    登录回复
  16. 天涯路清晨

    不错

    登录回复
  17. 今天不写诗

    研究 研究!

    登录回复
  18. 颜单发布

    你好!请问这个如何使用呢?使用方法。

    登录回复
  19. 10_euro

    怎么在这个代码上添加关闭按钮

    登录回复
    • 前端博客

      可以看我文章底部提到的第二篇文章。

      登录回复
      • 10_euro

        那个不太会用,我用的是wordpress建站,很新的新人,很多代码建站基础都不是很懂,自己的一个小的影视作品网站,这篇文章的代码加了有提示,第二篇的不会加,主要是想在微信朋友圈发外部网站链接的时候,别人打开就提示这个在浏览器中打开,因为微信自带的浏览器会对网站重新排版,就是想在这个提示的基础上有个关闭按钮,第二篇的看完后,按钮点击位置啊,那些都不需要,我不知道怎么改和加入到wordpress里面

        登录回复
        • 前端博客
          回复10_euro :

          可以在里面加一个关闭的按钮,并给按钮加个动作。例如:<i class="icon-close" onclick="document.getElementById('weixin-tip').style.display='none'">X</i>

          登录回复
        • 10_euro
          回复前端博客 :

          谢谢,我试试

          登录回复
        • 10_euro
          回复前端博客 :

          站长,我想知道<i class="icon-close" onclick="document.getElementById('weixin-tip').style.display='none'">X</i>是加到这篇文章代码的哪个位置.是head,还是body

          登录回复
        • 前端开发博客
          回复10_euro :

          你用的哪个版本,这个可以加在html代码,也可以加在js里面,但是需要添加一点css代码才会起作用。可以加在版本一的js里面。

          登录回复
        • 10_euro
          回复前端开发博客 :

          加在js里面,应该怎么写

          登录回复
  20. 用户zpw82861ne

    怎么下载的?

    登录回复
  21. 网购PK实体店

    请博主教下我们代码加到什么地方?谢谢了,新手一枚!

    登录回复
  22. 菠菜的另一种形态

    你好,现在我是只有一个链接生效,其他链接不生效,请问怎么处理!http://www.litpsmart.com/downloads/

    登录回复
  23. kami帅

    非常好 学习了
    请问 关于关闭的代码 是否可以提供?
    另外如何只让第一次打开的时候显示弹窗呢?

    登录回复
    • 前端博客

      可以使用cookie记录弹窗的,保留它的cookie值,实现第一次之后就不再显示,具体搜本站关于cookie的文章教程。

      登录回复
  24. leo

    强大,学习了

    登录回复