编程 Javascript

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

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>

最终效果

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

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

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

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

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

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

- Author -

山猫大战响尾蛇

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JavaScript实现禁止后退的方法

Dec 27 Javascript

Jquery 动态添加按钮实现代码

May 06 Javascript

jQuery+CSS 实现随滚动条增减的汽水瓶中的液体效果

Sep 26 Javascript

js 获取浏览器版本以此来调整CSS的样式

Jun 03 Javascript

jquery中ajax使用error调试错误的方法

Feb 08 Javascript

jQuery实现的向下图文信息滚动效果

May 03 Javascript

JavaScript代码性能优化总结(推荐)

May 16 Javascript

JQuery对ASP.NET MVC数据进行更新删除

Jul 13 Javascript

iscroll.js滚动加载实例详解

Jul 18 Javascript

JS点击图片弹出文件选择框并覆盖原图功能的实现代码

Aug 25 Javascript

bootstrap轮播模板使用方法详解

Nov 17 Javascript

React Form组件的实现封装杂谈

May 07 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

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

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