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

概述

大体思路是这样的：先建一个蒙版，蒙版放上提示的信息，然后写一个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>

最终效果

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

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

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

赞 (0)

相关推荐

  • JS判断当前页面是否在微信浏览器打开的方法

    本文实例讲述了JS判断当前页面是否在微信浏览器打开的方法.分享给大家供大家参考,具体如下: 最近做很多HTML5的项目,很多页面会通过微信微博等SNS分享出去.在分享页面上提供公司APP的下载.但是在很多应用的浏览器中,点击下载链接无法下载应用.那么针对这些浏览器我们需要给用户提示从safari或者系统自带的浏览器打开分享页面.通过js就可以判断当前页面是在什么浏览器打开的. 以下是一段示例代码,注释中表明了通过JS如何判断是否在微信浏览器打开,是否在QQ空间浏览器,是否在新浪微博打开.当然可以

  • 微信实现自动跳转到用其他浏览器打开指定APP下载

    目前的APP基本都支持二维码扫描下载,二维码下载也成为了大家用起来很顺手的一种方式.由于微信的用户基本占据了国内市场的90%,说到扫一扫用户第一个想到的就是打开微信扫一下,通过微信分享APP,再从分享的链接下载apk/ios包.故用户通常都是使用微信打开链接或扫描二维码前往下载页,这是刚需. 在我们做营销活动或推广宣传的时候,容易遇到域名被封,无法跳转app下载等情况.这时需要微信跳转外部浏览器打开页面的功能,对于ios用户默认可以通过微信内置浏览器点击右上角的更多按钮从而选择"在浏览器中打开&

  • PHP判断是否是微信打开,浏览器打开的方法

    #问题 项目中遇到的问题, 如果用户是使用微信访问的. 那么进行友好提示"如何使用浏览器打开/告诉用户使用浏览器打开" 方案 useragent是浏览器标识, 带有一些客户信息. 比如浏览器内核, 操作系统等等 微信访问网页也是一个浏览器, 它也有UA. 那么就判断它的UA 就可以辨别是否被微信所访问了 $ua = $_SERVER['HTTP_USER_AGENT']; //MicroMessenger 是android/iphone版微信所带的 //Windows Phone 是w

  • 微信打开网址添加在浏览器中打开提示的办法

    微信打开网址添加在浏览器中打开提示的办法

    使用微信打开网址时,无法在微信内打开常用下载软件,手机APP等.网上流传的各种微信打开下载链接,微信一更新基本失效.大家常用的方法是,弹出一个遮罩提示用户在新的浏览器窗口打开,再也不用管微信如何的更新. 直接判断微信的ua,如果是在微信内置浏览器中打开,弹出一个遮罩提示用户在浏览器中打开下载,并且不加关闭的按钮.这样子用户就只能在浏览器中打开,并且可以直接下载应用了. css代码 <style type="text/css"> *{ margin:0; padding:0;

  • 微信支付如何实现内置浏览器的H5页面支付

    因为项目需要,要在H5页面中加入微信支付,所以便去尝试,只想说真的很坑,尤其调试起来不方便 这是微信的官方API文档 微信API 微信支付的准备工作 申请公众号,申请开通支付,这个很简单,自行百度 申请好之后 在微信公众平台页面的"微信支付"页面中的"开发配置"Tab上配置"支付授权目录","测试授权目录","测试白名单" 在微信公众平台页面的"开发者中心"中找到"AppID(

  • PHP判断是手机端还是PC端 PHP判断是否是微信浏览器

    本文实例为大家分享了PHP判断的两个实例,一是PHP判断是手机端还是PC端,二是PHP判断是否是微信浏览器,供大家参考,具体内容如下 1.判断是否是手机端 function isMobile() { // 如果有HTTP_X_WAP_PROFILE则一定是移动设备 if (isset($_SERVER['HTTP_X_WAP_PROFILE'])) { return true; } // 如果via信息含有wap则一定是移动设备,部分服务商会屏蔽该信息 if (isset($_SERVER['H

  • PHP判断是否是微信打开还是浏览器打开的方法

    /** * 方法一:判断判断是否是微信打开(试过,可以) */ $ua = $_SERVER['HTTP_USER_AGENT']; if (strpos($ua, 'MicroMessenger') == false && strpos($ua, 'Windows Phone') == false) { echo '普通浏览器打开'.$wxpay_type; //跳转移动端页面 $alipay_type=5;//支付宝移动支付 $wxpay_type=3;//微信H5支付 } else

  • JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法

    在实际的应用中,我们常常需要实现在移动app和浏览器中点击返回.后退.上一页等按钮实现自己的关闭页面.调整到指定页面或执行一些其它操作的需求,那在代码中怎样监听当点击微信.支付宝.百度糯米.百度钱包等app的返回按钮或者浏览器的上一页或后退按钮的事件呢. 我相信很多朋友像我一样,在百度.搜狗里面搜索很久都没找到方法. 下面就来告诉大家怎样监听的方法: 首先我们要了解浏览器的history. 大家知道在页面中我们可以使用javascript window history,后退到前面页面,但是由于安

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

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

    概述 大体思路是这样的:先建一个蒙版,蒙版放上提示的信息,然后写一个js,在页面打开的时候判断是不是用微信自带的浏览器打开的,如果是就打开蒙版,提示用浏览器打开 .基本页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>APP下载</title> <style type="text/cs

  • 微信小程序列表时间戳转换实现过程解析

    微信小程序列表时间戳转换实现过程解析

    这篇文章主要介绍了微信小程序列表时间戳转换实现过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 第一步先写js 随便命名为times.js function toDate(number){ var n=number * 1000; var date = new Date(n); var Y = date.getFullYear() + '/'; var M = (date.getMonth()+1 < 10 ? '0'+(date.get

  • 微信小程序引入Vant组件库过程解析

    微信小程序引入Vant组件库过程解析

    前期准备 Vant Weapp组件库: https://youzan.github.io/vant-weapp/#/intro 1.先在微信开发者工具中打开项目的终端: 然后初始化一个package.json文件:输入命令:npm init 然后一路回车默认的即可: npm init 项目就回产生一个package.json文件: { "name": "miniprogram", "version": "1.0.0", &qu

  • 微信小程序之侧边栏滑动实现过程解析（附完整源码）

    微信小程序之侧边栏滑动实现过程解析（附完整源码）

    一.效果图 讲什么都不如直接上效果图好,所以我们先来看下实现效果如何. 通过滑动屏幕,或者点击左上角的图标按钮,都能实现侧边栏的划出效果. 二.原理解析 1.先实现侧边栏的内容,让侧边栏的内容居左,然后将侧边栏的内容置于屏幕的最底部. 2.接着实现主页的内容,并且让主页的内容默认是覆盖在侧边栏的内容上面. 3.然后,实现手指滑动屏幕的时候,主页的内容,向左滑动一定的宽度,让侧边栏的内容显示出来,而滑动的效果是通过 css 的 transition 来实现的. 三.源码 由于实现过程的时,我对代码

  • Jquery轮播效果实现过程解析

    轮播是学习jquery开始的第二个实现的动效,也是学习时间最久的一个.在实现轮播的过程中总是会遇到各种各样的问题,请教过很多人,也多次问过度娘.今天,也不敢果敢的说,可以马上写好一个轮播.希望是通过随笔的方式,记录下一些思维过程. 首先是html结构,一个简单的轮播,单张图片无缝轮播,主要分为三大层:div>ul>li,li里面的img图片. 其次,css样式:div固定住宽高,overflow:hidden:ul的宽度建议是动态获取(下一步会讲是怎么获取):关于li我习惯使用浮动,让他们依次

  • 微信小程序实现左侧滑栏过程解析

    微信小程序实现左侧滑栏过程解析

    前言 一直想给项目中的小程序设置侧滑栏,将退出按钮放到侧滑中,但是小程序没有提供相应的控件和API,因此只能自己手动实现,网上很多大神造的轮子很不错,本文就在是站在巨人的肩膀上实现. hexo图片不显示问题,可前往简书 效果 先看看效果,我的侧滑栏需要列出如下信息: 初始状态下,左下角设置悬空按钮 点击悬空按钮,侧边栏拉出,悬空按钮旋转180度 主页内容向右滑动一定比例,并设置阴影遮罩 实现 首先将xml文件分为三部分,一部分是主页内容,一部分是侧滑栏内容,一部分是悬浮按钮. <!--index

  • Python爬虫使用浏览器cookies：browsercookie过程解析

    很多用Python的人可能都写过网络爬虫,自动化获取网络数据确实是一件令人愉悦的事情,而Python很好的帮助我们达到这种愉悦.然而,爬虫经常要碰到各种登录.验证的阻挠,让人灰心丧气(网站:天天碰到各种各样的爬虫抓我们网站,也很让人灰心丧气-).爬虫和反爬虫就是一个猫和老鼠的游戏,道高一尺魔高一丈,两者反复纠缠. 由于http协议的无状态性,登录验证都是通过传递cookies来实现的.通过浏览器登录一次,登录信息的cookie是就会被浏览器保存下来.下次再打开该网站时,浏览器自动带上保存的coo

  • 微信小程序 scroll-view 水平滚动实现过程解析

    微信小程序 scroll-view 水平滚动实现过程解析

    1. scroll-view水平滚动使用 1. wxml <scroll-view class="scroll-wrap" scroll-x> <view class="scroll-view-item"> <view class="scroll-img-wrap scroll-major-img-wrap"> <image src="../../images/wukecheng@2x.png&

  • java浏览器文件打包下载过程解析

    最近,在项目中遇到了需要将一系列的图片打包下载的需求,借鉴了网上的一些通用方法,就顺便分享出来实现的方法,不太记得借鉴的是哪位兄弟的博客了,总之万分感谢,进入正题,实现打包下载的基本功能: 1.controller层代码: /** * 图片压缩打包 */ @RequestMapping(value = "/zipFile") public void compressionFile(HttpServletRequest request, HttpServletResponse respo

  • 微信小程序实现上传图片裁剪图片过程解析

    微信小程序实现上传图片裁剪图片过程解析

    有的时候我们上传头像,商品图片这些的时候有的希望上传的是自己想要的图片形状,吧图片宽高固定死的话,他又会变形,比列差不多的看起来没什么区别,不固定的话,他们会宽的高的不一样,看起来完全不舒服,不美观了. 所以想了个这样的办法,用这个裁剪工具,在选择图片的时候,就把图片的大小裁剪成自己想要的大小,这样就都一致了,下面我们来看看吧! wxml: <view class="wancll-padded-15 wancll-bg-white wancll-font-size-14">

随机推荐