编程 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 相关文章推荐

Mootools 1.2教程(21)——类（二）

Sep 15 Javascript

绑定回车enter事件代码

May 18 Javascript

jquery操作对象数组元素方法详解

Nov 26 Javascript

推荐25个超炫的jQuery网格插件

Nov 28 Javascript

jquery实现叠层3D文字特效代码分享

Aug 21 Javascript

node.js express中app.param的用法详解

Jul 16 Javascript

原生js调用json方法总结

Feb 22 Javascript

vue实现修改图片后实时更新

Nov 14 Javascript

微信小程序自定义导航栏（模板化）

Nov 15 Javascript

通过js实现压缩图片上传功能

Feb 25 Javascript

js实现双色球效果

Aug 02 Javascript

JSON 入门教程基础篇 json入门学习笔记

Sep 22 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

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

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