判断是不是微信浏览器,如果是将弹出遮罩层提示在右上角浏览器中打开(一般用于下载东西)

<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="聚贤堂,聚贤堂官网,聚闲堂,聚闲堂官网,聚贤堂跑胡子,聚闲堂跑胡子,聚贤堂游戏,聚闲堂游戏,跑胡子,字牌">
    <meta name="description" content="聚闲堂跑胡子是针对湖南地区的地方性棋牌游戏,亦称“字牌”、“纸牌”,在我国某些地区也叫“跑胡纸”、“跑和字”、“二七十”、“煨胡子”、“棍棍”、“大贰”等。">
    <title>聚闲堂跑胡子</title>
    <!-- Bootstrap -->
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/css/style.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn‘t work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
  <style type="text/css">
  /*核心css*/
    .wxtip{background: rgba(0,0,0,0.8); text-align: center; position: fixed; left:0; top: 0; width: 100%; height: 100%; z-index: 998; display: none;}
    .wxtip-icon{width: 52px; height: 67px; background: url(http://img.caibaojian.com/uploads/2016/01/weixin-tip.png) no-repeat; display: block; position: absolute; right: 30px; top: 20px;}
    .wxtip-txt{padding-top: 107px; color: #fff; font-size: 16px; line-height: 1.5;}
  </style>
    <!-- top -->
    <header>
      <div class="container">
        <div class="media">
          <img class="img-responsive  col-sm-2 col-xs-4" src="assets/img/IMG_0561.jpg">
          <div class="col-sm-10 hidden-xs">
            <p>应用名称:聚闲堂跑胡子</p>
            <ul class="list-unstyled">
              <li class="col-sm-4">应用大小:15.71MB</li>
              <li class="col-sm-4">版本:1.0.1</li>
              <li class="col-sm-4"></li>
            </ul>
            <p>系统支持:IOS 8.0以上,Android 2.2.x以上</p>
          </div>
          <div class="col-sm-10 visible-xs">
            <ul class="list-unstyled">
              <li class="col-sm-4">应用名称:聚闲堂跑胡子</li>
              <li class="col-sm-4">应用大小:15.71MB</li>
              <li class="col-sm-4">版本:1.0.1</li>
              <li class="col-sm-4">系统支持:IOS 8.0以上,Android 2.2.x以上</li>
            </ul>
          </div>
        </div>
      </div>
    </header>
    <!-- 游戏介绍 -->
    <div class="xx_intorduce">
      <div class="container">
        <div class="col-sm-6 col-xs-12">
            <img class="img-responsive" src="assets/img/gameIntro.png">
            <div class="xx_intrtext">
              <p>《聚闲堂跑胡子》是一款手机棋牌类扑克牌、麻将类型游戏,内有乐山二七十、常德跑胡子、红黑点、碰胡子、桂林字牌、郴州毛胡子等多种玩法,画面精美,玩法正宗,更安全,更省流量。灵活的出牌规则,再加上丰富的玩法,使得虽然每一局的时间简短,但却又不失乐趣。</p>
              <!-- <p>应用名称:聚闲堂跑胡子 </p>
              <p>应用大小:15.71M</p>
              <p>系统支持:IOS 8.0以上,Android 2.2.x以上</p> -->
              <p>分类:棋牌游戏</p>
              <p>语言:简体中文</p>
              <p>更新时间:2016-12-31</p>
              <!-- <p>版本:1.0.1</p> -->
            </div>
        </div>
        <div class="col-sm-6 col-xs-12">
          <img class="img-responsive" src="assets/img/gameFig.png">
          <div class="xx_intrtext">
            <p>【超丰富的竞技玩法】</br>全天候随时和伙伴竞技PK!看谁技高一筹,能笑到最后!</p>
            <p>【超贴近的游戏交互】</br>语音实时对讲,沟通就像面对面!</p>
            <p>【高品质的游戏体验】</br>超精美场景化的游戏界面,感受纯正的家乡味道!</p>
            <p>【超纯正的经典玩法】</br>体验最地道的家乡玩法,好友同玩千里约战,随时随地组牌局!</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 下载 -->
    <div align="center" class="container xx_donwload">
      <a id="JdownApp"><img class="img-responsive" src="assets/img/download_btn.png"></a>
    </div>
    <!-- footer -->
    <!-- <footer>
      <p>
         Copyright ? 2016 聚闲堂游戏 京ICP备17006628号 | 京ICP证17006628号
      </p>
    </footer> -->


<!-- 开始写代码 -->
<!-- jQuery (necessary for Bootstrap‘s JavaScript plugins) -->
<script src="assets/js/jquery-3.1.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="assets/js/bootstrap.min.js"></script>
<script type="text/javascript">
function doDownload(ele){
  ele.onclick=function(e){
    // 获取终端的相关信息
    var Terminal = {
        // 辨别移动终端类型
        platform : function(){
            var u = navigator.userAgent, app = navigator.appVersion;
            return {
                // android终端或者uc浏览器
                android: u.indexOf(Android) > -1 || u.indexOf(Linux) > -1,
                // 是否为iPhone或者QQHD浏览器
                iPhone: u.indexOf(iPhone) > -1 ,
                // 是否iPad
                iPad: u.indexOf(iPad) > -1
            };
        }(),
        // 辨别移动终端的语言:zh-cn、en-us、ko-kr、ja-jp...
        language : (navigator.browserLanguage || navigator.language).toLowerCase()
    }

    // 根据不同的终端,跳转到不同的地址
    var theUrl = http://www.jxtgzh.com/juxiantangphz.apk;
    if(Terminal.platform.android){
        theUrl = http://www.jxtgzh.com/juxiantangphz.apk;
    }else if(Terminal.platform.iPhone){
        theUrl = https://itunes.apple.com/cn/app/jie-zou-da-shi/id1196806285?mt=8;
    }else if(Terminal.platform.iPad){
        theUrl = https://itunes.apple.com/cn/app/jie-zou-da-shi/id1196806285?mt=8;
    }
    location.href = theUrl;
  }
}
doDownload(document.getElementById(JdownApp));
</script>
</body>
</html>

<script type="text/javascript">
    function is_weixin() {
        var ua = navigator.userAgent.toLowerCase();
        if (ua.match(/MicroMessenger/i) == "micromessenger") {
            return true;
        } else {
            return false;
        }
    }
    var isWeixin = is_weixin();
    var winHeight = typeof window.innerHeight != undefined ? window.innerHeight : document.documentElement.clientHeight;
    function loadHtml(){
      var div = document.createElement(div);
      div.id = weixin-tip;
      div.innerHTML = <p><img src="assets/img/live_weixin.png" width="100%" alt="微信打开"/></p>;
      document.body.appendChild(div);
    }
    
    function loadStyleText(cssText) {
          var style = document.createElement(style);
          style.rel = stylesheet;
          style.type = text/css;
          try {
              style.appendChild(document.createTextNode(cssText));
          } catch (e) {
              style.styleSheet.cssText = cssText; //ie9以下
          }
            var head=document.getElementsByTagName("head")[0]; //head标签之间加上style样式
            head.appendChild(style); 
      }
      var cssText = "#weixin-tip{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%;}";
    if(isWeixin){
      loadHtml();
      loadStyleText(cssText);
    }
  </script>

 

判断是不是微信浏览器,如果是将弹出遮罩层提示在右上角浏览器中打开(一般用于下载东西)

上一篇:微信小程序 View:flex 布局


下一篇:微信小程序image组件binderror使用例子(对应html、js中的onerror)