微信提示 在浏览器打开 效果实现过程解析


Posted in Javascript onSeptember 10, 2019

概述

大体思路是这样的:先建一个蒙版,蒙版放上提示的信息,然后写一个js,在页面打开的时候判断是不是用微信自带的浏览器打开的,如果是就打开蒙版,提示用浏览器打开

.基本页面

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>APP下载</title>
    <style type="text/css">
      td {
        line-height: 50px;
        font-size: 40px;
      }    
    </style>
  </head>
  <body style="background-color: #4DFFFF;padding-top: 400px">
    <div align="center" style="width: 100%;">
      <table>
        <tr>
          <td valign="middle">
            <a href="community.apk" rel="external nofollow" id="JdownApp">安卓下载</a>
          </td>
        </tr>
        <tr>
          <td valign="middle">
            <a href="community.ipa" rel="external nofollow" id="JdownApp2" class="btn-warn">苹果下载</a>
          </td>
        </tr>
      </table>     
    </div>
  </body>
</html>

添加蒙版

<!--引入遮蔽层-->
<div id="Mask" style="">
</div>
//蒙版样式
#Mask {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  background-image: url(img/tweixinip.jpg);
  background-size: cover;
  width: 100%;
  height: 100%;
  z-index: 1000;
}
.model-content {
  width: 100%;
  height: 100%;
  text-align: center;
  background: #ffffff;
  border-radius: 6px;
  margin: 100px auto;
  line-height: 30px;
  z-index: 10001;
}

添加js

<script type="text/javascript">
  //判断是否在微信中打开
  var ua = navigator.userAgent;
  var isWeixin = !!/MicroMessenger/i.test(ua);
  //如果使用的是微信自带浏览器,就打开蒙版
  if(isWeixin) {
    var SHOW = 0;
    document.getElementById('Mask').style.display = ++SHOW % 2 == 1 ? 'block' : 'none';
  }
</script>

最终效果

当使用浏览器打开时展示原始页面

微信提示 在浏览器打开 效果实现过程解析

当使用微信打开时展示蒙版

微信提示 在浏览器打开 效果实现过程解析

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
分析 JavaScript 中令人困惑的变量赋值
Aug 13 Javascript
jquery插件lazyload.js延迟加载图片的使用方法
Feb 19 Javascript
判断日期是否能跨月查询的js代码
Jul 25 Javascript
jquery根据属性和index来查找属性值并操作
Jul 25 Javascript
学习javascript面向对象 理解javascript对象
Jan 04 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
Dec 29 Javascript
JS表单数据验证的正则表达式(常用)
Feb 18 Javascript
js实现图片左右滚动效果
Feb 27 Javascript
vue组件之间数据传递的方法实例分析
Feb 12 Javascript
微信小程序与公众号实现数据互通的方法
Jul 25 Javascript
微信小程序 this.triggerEvent()的具体使用
Dec 10 Javascript
关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题
Jan 16 Javascript
Vue+Koa2+mongoose写一个像素绘板的实现方法
Sep 10 #Javascript
js神秘的电报密码 哈弗曼编码实现
Sep 10 #Javascript
使用js实现一个简单的滚动条过程解析
Sep 10 #Javascript
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
Sep 10 #jQuery
Elasticsearch实现复合查询高亮结果功能
Sep 10 #Javascript
如何通过shell脚本自动生成vue文件详解
Sep 10 #Javascript
js获取 gif 的帧数的代码实例
Sep 10 #Javascript
You might like
PHP实现读取一个1G的文件大小
2013/08/24 PHP
PHP常量使用的几个需要注意的地方(谨慎使用PHP中的常量)
2014/09/12 PHP
PHP的中使用非缓冲模式查询数据库的方法
2017/02/05 PHP
PHP+mysql防止SQL注入的方法小结
2019/04/27 PHP
jQuery控制图片的hover效果(smartRollover.js)
2012/03/18 Javascript
jQuery 淡入淡出 png图在ie8下有黑色边框的解决方法
2013/03/05 Javascript
js实现正方形颜色从下往上升的效果
2014/08/04 Javascript
浅谈jquery事件处理
2015/04/24 Javascript
JS/Jquery判断对象为空的方法
2015/06/11 Javascript
整理JavaScript对DOM中各种类型的元素的常用操作
2016/05/05 Javascript
AngularJS实现数据列表的增加、删除和上移下移等功能实例
2016/09/05 Javascript
基于vue的短信验证码倒计时demo
2017/09/13 Javascript
ionic3实战教程之随机布局瀑布流的实现方法
2017/12/28 Javascript
JS计算两个时间相差分钟数的方法示例
2018/01/10 Javascript
vue地区选择组件教程详解
2018/05/04 Javascript
基于element-ui的rules中正则表达式
2018/09/04 Javascript
vue自定义指令的创建和使用方法实例分析
2018/12/04 Javascript
用vue 实现手机触屏滑动功能
2020/05/28 Javascript
[46:53]Secret vs Liquid 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python实现pdf转换成word/txt纯文本文件
2018/06/07 Python
一篇文章彻底搞懂Python中可迭代(Iterable)、迭代器(Iterator)与生成器(Generator)的概念
2019/05/13 Python
浅谈Python中函数的定义及其调用方法
2019/07/19 Python
Python 从subprocess运行的子进程中实时获取输出的例子
2019/08/14 Python
使用python实现kNN分类算法
2019/10/16 Python
Django中的AutoField字段使用
2020/05/18 Python
css3圆角边框和边框阴影示例
2014/05/05 HTML / CSS
详解HTML5中rel属性的prefetch预加载功能使用
2016/05/06 HTML / CSS
AT&T Wireless:手机、无限数据计划和配件
2018/06/03 全球购物
总经理办公室主任岗位职责
2013/11/12 职场文书
小学家长评语大全
2014/04/16 职场文书
幼儿园清明节活动总结
2014/07/04 职场文书
销售合作意向书范本
2015/05/08 职场文书
小学运动会开幕词
2016/03/04 职场文书
只需要12页,掌握撰写一流商业计划书的技巧
2019/05/07 职场文书
导游词之山东八仙过海景区
2019/11/11 职场文书
Python游戏开发实例之graphics实现AI五子棋
2021/11/01 Python