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

文章目录

使用微信打开网址时,无法在微信内打开常用下载软件,手机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 Responses to “微信打开网址添加在浏览器中打开提示遮罩”

  1. 岚冰之舞

    刚刚接触这个~想请教一下~我只需要从微信推送消息中自动弹出提醒使用浏览器打开页面要怎么弄?不需要下载的功能~我试了很久都只是能弹出遮盖层,而且我做站的地方与存储图片什么的不是同一个服务器,我需要通过网络连接方式才能提取,请问要怎么弄呢?PS我对代码还是一个新手

    登录回复
    • 前端博客

      假如通过微信扫描打开之后的网址是你可以控制的,那么你就可以按照我上面给的代码放进去。假如那个打开的网址你无法控制,则没有办法提示弹出浏览器打开。

      登录回复
  2. 贰贰贰少爷

    我想打开网址,但是怎么用?

    登录回复
  3. 低调的风成长中

    交换个链接吧,http://tbj1818.com/

    登录回复
  4. 低调的风成长中

    不错,学习了。很棒。。

    登录回复
  5. 山和花

    学习了 谢谢

    登录回复
  6. 鲁小石

    初学者,谢谢,学习一下

    登录回复
  7. 前端博客

    本文已经取消回复可见了,只要登录就能看到代码了。

    登录回复
  8. 有下载么?

    登录回复
  9. Link + Boxer

    怎么个做法,看看

    登录回复
  10. 记忆

    正好要用,学习来了,先谢谢楼主了[呵呵]

    登录回复
  11. 前端博客

    本站文章评论第一次评论需要审核后才能通过,所以,请各位朋友认真回复,也算是对我们网站的一点支持。

    登录回复
  12. ♚.花姑娘

    挺好的

    登录回复
  13. 旋律

    [泪]希望能解决,试下

    登录回复
  14. 旋律

    正出了这个问题,学下怎么解决这个问题。

    登录回复
  15. wzabing

    不错的解决方法!

    登录回复
  16. 爱斯基摩狗

    谢谢博主,正需要这个东西

    登录回复
  17. google

    好东西,谢谢

    登录回复
  18. 走在歧路上的中国

    好东西

    登录回复
  19. Blog visitor

    留言

    以再 詳閱

    登录回复
  20. 乱了乱了乱了乱了乱了乱了

    微信的链接有没有办法用系统的浏览器打开,而不是用微信内置的浏览器

    登录回复
  21. 胖大海

    很不错

    登录回复
  22. 享到家服务平台

    遮罩层代码 很重要啊
    有没有什么方法 在微信里面点击一下 就能直接 用浏览器打开 本页呢

    登录回复
    • 前端博客

      不太清楚,微信好像保护自己应用安全的,只有自家网站才可以。需要点击右上角打开。不过不知道可否通过js点击功能让它弹出右上角选项出来。

      登录回复
  23. 陆汝强

    看看 怎么弄

    登录回复
  24. 三月

    不错,分析的比较好

    登录回复
  25. 三月

    看看,下个资源

    登录回复
  26. Jora-L

    为毛要发表评论才能下载啊 ··无奈

    登录回复
  27. 天鹅出头鸟不见

    看看 我想要这个东西!

    登录回复
  28. 天鹅出头鸟不见

    不错的 说a !

    登录回复
  29. ♠小生♠

    怎么回复还审核啊,想学习一下真难

    登录回复
    • 前端博客

      抱歉,最近评论很多随便的,所以只有通过审核才会显示,希望不会对你造成困扰,感谢你对网站的支持,如果你在使用这个案例过程中有问题,可以在这里给我留言。

      登录回复
  30. ♠小生♠

    来看看学习

    登录回复
  31. 转介率

    谢谢楼主分享

    登录回复
  32. 转介率

    不错

    登录回复
  33. 精准营销

    不错啊,香看看~~

    登录回复
  34. Chris

    很期待的样子。

    登录回复
  35. gua

    急求

    登录回复
  36. 西部秋虫

    看看试试,感谢分享。

    登录回复
  37. OnePiece_xiaoJ

    好东西,好思路。

    登录回复
  38. 裸跑的鱼

    怎么个做法,学习学习

    登录回复
  39. nelcc

    恨恨恨恨恨恨恨恨恨恨恨恨恨恨恨恨恨恨恨恨

    登录回复
  40. 付啊啊

    遮罩的代码是 哪个啊?

    登录回复
    • 前端博客

      https://github.com/kujian/weixinTip 遮罩代码是一个div,默认是隐藏的,当使用微信扫描时才会显示哦。这个项目里有三个代码,你可以选择自己需要的代码来使用。

      登录回复
  41. 付啊啊

    代码 粘贴到哪里啊?

    登录回复
    • 网购PK实体店

      我也不知道粘贴到哪里啊?懂得请好心人说一下![可怜]

      登录回复
      • 前端博客

        这个是通过修改网页内容来控制的,你要对所要显示微信这个提示的网页有权限修改。

        登录回复
  42. ZDK

    试了一下 只有个遮罩 没有显示的文字和图片。。求指导

    登录回复
    • 前端博客

      你好,请下载github项目里的代码,打开演示就可以看到图片和文字,请参照代码修改。

      登录回复
      • ZDK

        刚刚在网上也找到一个方法 试了一下效果很好 大神有兴趣可以看看 不过我还没付费 打算自己研究研究**.tuige**

        登录回复
        • 前端博客
          回复ZDK :

          这个跟我文章说的下载应用弹出提示没有关系,它是淘宝链接。鉴于此,我把这个网址编辑隐藏了。

          登录回复
  43. Lonsung

    请问这个是不是只能在微信上使用,如果使用其他的扫描软件呢?

    另外,我如果需要使用英文的提示语,那么这里的代码中的lang="zh_CN" 以及 charset="UTF-8"是否也需要更换。

    登录回复
    • 前端博客

      这个是通过微信扫描时才会出现的提示,如果不是微信扫描,那么是可以正常下载应用的,所以不必要加提示。提示语是通过文字或者图片提示的,你需要根据自己需要修改.lang = "zh_CN"是代表是中文网页,charset表示这个网页时utf-8格式。

      登录回复
  44. 姜浩波

    我想请问这个是只是遮罩层的代码,还是有微信页面用浏览器打开跳转到另一个页面的代码??谢谢

    登录回复
    • 前端博客

      这个是一个遮罩提醒用户打开新浏览器访问页面,无法做到自动用浏览器打开跳转到一个页面。

      登录回复
  45. 零度网络科技

    经过测试无效!正在跳转...

    登录回复
    • 前端博客

      微信的下载链接是不是抽风的,最妥当的方式还是参考本文提供的几种微信在新窗口打开方式。

      登录回复
  46. 集价网

    请问这个如果是wordpress的要怎么把这个代码用起来,谢谢,新手一个,不懂。致敬!

    登录回复
  47. 一个空格引发的血案

    好东西

    登录回复
  48. 西门

    微信下载APP还真是第一次涉及到,我们没这需求

    登录回复
    • 前端博客

      不是微信下载APP,是用微信扫描二维码进入网址,点击下载apk的软件没有反应,这在手机移动页面还是需要用到的,除非你们没有推广APP,只是单独做移动前端,那就少了。

      登录回复
  49. 自信2011

    假如您有意向,可以去我博客上联系我~

    登录回复