微信扫描打开APP下载链接提示代码优化

文章目录

上一次我发了一篇文章叫“微信打开网址添加在浏览器中打开提示”,里面我发出来了三个代码,分别是纯JSjs+htmljQuery+HTML代码。今天来一个简化版带可以关闭的按钮操作。使用的是纯JS+HTML+CSS结合的方式,但不要一进入微信就弹出提示它在新浏览器中打开,在这个页面里面还可以提交表单查看信息等,只有它点击应用的链接后,才弹出提示它跳转后下载。

效果如下:

screenshots

HTML代码:

<a id="J_weixin" class="android-btn" href="#"><img src="img/android-btn.png" alt="安卓版下载" /></a>
<div id="weixin-tip"><p><img src="img/live_weixin.png" alt="微信打开"/><span id="close" title="关闭" class="close">×</span></p></div>

CSS代码:

#weixin-tip{display:none;position:fixed;left:0;top:0;background:rgba(0,0,0,0.8);filter:alpha(opacity=80);width:100%;height:100%;z-index:100;}
#weixin-tip p{text-align:center;margin-top:10%;padding:0 5%;position:relative;}
#weixin-tip .close{color:#fff;padding:5px;font:bold 20px/24px simsun;text-shadow:0 1px 0 #ddd;position:absolute;top:0;left:5%;}

JS封装代码:

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';
		}
	}
}

演示

打开微信扫描看看效果吧。代码演示地址

微信扫描

很多人说这个看不懂,来看看这个更简单的:http://caibaojian.com/weixin-tip3.html

原文链接:微信扫描打开APP下载链接提示代码优化 版权所有,转载时请注明出处,违者必究。
注明出处格式:前端开发博客 (http://caibaojian.com/weixin-tip2.html)

发表评论

请登录后发表评论:

99 Responses to “微信扫描打开APP下载链接提示代码优化”

  1. 网络创业项目分享

    我的电影网站地址:http://www.muwuyingshi.com/,被微信给屏蔽了,如何实现在微信中点击这个地址出现自动提示使用请使用浏览器打开。希望大神能指点!

    登录回复
  2. Bigbang全球粉丝后援团

    非常感谢。测试了一下这个管用 我想问下 多个连接只有第一个弹出 剩下的都不弹出了是吗?
    http://caibaojian.com/weixin-tip3.html 我看了这个支持多个连接 但是这个测试的不行再浏览器打开也有遮罩提示 我是苹果手机

    登录回复
  3. 菜花网

    以上代码如何更改为在
    <article class="action">
    <a class="android-btn" href="#">
    <a class="android-btn" href="#">
    <a class="android-btn" href="#">
    </article>

    所有链接都提示

    登录回复
  4. LooWIngNGaI

    你好 我想请问是在哪里开始添加 我在网站填写了HTML可是没有显示

    登录回复
  5. 用户3684641438

    很不错 不过苹果点击怎么弹不出来哦

    登录回复
    • 前端博客

      我苹果版的没加效果,只加Android的而已。

      登录回复
      • 用户3684641438

        哦 哪怎么加呢

        登录回复
      • 用户3684641438

        我想用这个 可苹果版的没有 用着很纠结 体验也不是很好。

        登录回复
        • 前端博客
          回复用户3684641438 :

          都一样的,写了一个更简单的。去看看教程:http://caibaojian.com/weixin-tip3.html

          登录回复
        • 用户3684641438
          回复前端博客 :

          这样吧楼主我接触的不是很多,你能帮我做一个么,费用我来出吧!我的微信是18521064704 你加一下我,可以么

          登录回复
  6. 蘑菇呼呼

    很不错,非常感谢

    登录回复
  7. 竹家人袜品

    非常感谢,已用上

    登录回复
  8. 2012_san哥

    很好,很强大,想问一下问题,我也是第一次弄这个,遇到了微信扫描的问题,我把这个网页放在测试服务器上,做了个二维码地址,扫描后怎么还是先出了微信的提示页说将要访问"http://********:8081/portal/AppDownload.html",继续访问后才出现你给的例子页面,这是什么情况呢,是不是一定要正式域名才行啊,急死我了~~~

    登录回复
    • 前端博客

      跟我这个代码无关哦。这个我不太清楚,可能你们开发有做过配置之类的?

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

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

    登录回复
  10. 章章的小新

    博主,,我用了你的代码。扫描我的二维码咋不能用啊。

    登录回复
  11. 游荡在大葱岁月

    你好,html代码要往哪里加呢?

    登录回复