h5在微信浏览器，引导打开App

作者: 逸笛 | 来源:发表于2021-01-20 17:45 被阅读0次

h5在微信浏览器，引导打开App
记“在浏览器打开”动画
vue h5在微信浏览器中首次打开加载缓慢或白屏几秒后才渲染解决
微信如何实现自动跳转到用其他浏览器打开指定页面下载APK
微信如何实现自动跳转到用其他浏览器打开指定页面下载APK
微信如何实现自动跳转到用其他浏览器打开指定页面下载APK
微信如何实现自动跳转到用其他浏览器打开指定页面下载APP
微信如何实现自动跳转到用其他浏览器打开指定页面下载APK
移动端支付流程
微信自动跳转浏览器打开APP（APK）下载链接

0fcca160196dc81de0fce5f5949d42c.jpg

<div id="weixin-tip">
      <p><img :src="getPng('openAppBg')" alt="微信打开" class="openAppBg" /><span id="close" title="关闭"
          class="close">×</span></p>
    </div>

  #weixin-tip {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.8);
    filter: alpha(opacity=80);
    width: 100%;
    height: 100%;
    z-index: 100000;
  }

  #weixin-tip p {
    text-align: center;
    margin-top: 10%;
    position: relative;
  }

  .openAppBg {
    width: 90%;
  }

  #weixin-tip .close {
    color: #fff;
    padding: 5px;
    font: bold 40px simsun;
    text-shadow: 0 1px 0 #ddd;
    position: absolute;
    top: 0;
    left: 5%;
  }

var winHeight = typeof window.innerHeight != 'undefined' ? window.innerHeight : document.documentElement.clientHeight;
              var btn = document.getElementById('openBtn');
              var tip = document.getElementById('weixin-tip');
              var close = document.getElementById('close');
              btn.onclick = function (e) {
                tip.style.height = winHeight + 'px';
                tip.style.display = 'block';
                return false;
              }
              close.onclick = function () {
                tip.style.display = 'none';
              }

完整功能实现：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>好友邀请注册</title>
  <link rel="stylesheet" href="https://webimg.fmapp.com/Public/web/js/element-2.14.1/theme-chalk/index.min.css">
  <script src="https://webimg.fmapp.com/Public/web/js/vue-2.6.10/vue.min.js"></script>
  <script src="https://webimg.fmapp.com/Public/web/js/axios-0.19.0/axios.min.js"></script>
  <script src="https://webimg.fmapp.com/Public/web/js/element-2.14.1/index.min.js"></script>
  <script src="http://192.168.3.12:8028/Public/web/img/fm2021/web/api/cty.js"></script>
  <script src="http://192.168.3.12:8028/Public/web/img/fm2021/web/api/api.js"></script>
</head>
<style>
  body {
    margin: 0;
    padding: 0;
  }

  #register {
    height: 100vh;
    overflow: auto;
    position: relative;
    display: flex;
    /* align-items: center; */
    flex-direction: column;
    width: 100%;
    background-color: #ffded2;
  }

  .content {
    max-width: 375px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    left: 0;
    top: 0;
  }

  .leftImg {
    position: absolute;
    left: 0;
    top: 126px;
    z-index: 10;
    width: 85px;
  }

  .rightImg {
    width: 125px;
    position: absolute;
    right: 0;
    top: 45px;
    z-index: 0;
  }

  .title {
    z-index: 1;
    margin-top: 30px;
    font-weight: bold;
    font-size: 32px;
    color: #d8462c;
  }

  .desc {
    margin-top: 14px;
    width: 250px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background-color: #ffffff;
    border-radius: 15px;
    color: #d8462c;
    font-size: 13px;
  }

  .tgy {
    top: 550px;
    margin-bottom: 40px;
  }

  .success {
    top: 165px;
    margin-bottom: 20px;
  }

  .item-box {
    width: 88%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 28px;
  }

  .tgy-item {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .tgy-img {
    width: 46px;
    height: 46px;
    margin-bottom: 12px;
  }

  .tgy-desc {
    color: #333333;
    font-size: 12px;
  }


  .form {
    position: absolute;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 335px;
    background-color: #ffffff;
    border-radius: 10px;

  }

  .form-title-box {
    margin: 20px 0 0 0;
    display: flex;
    align-items: center;
  }

  .form-title {
    margin: 0px 10px;
    font-size: 17px;
    font-weight: bold;
    color: #333333;
  }

  .left {
    width: 28px;
  }

  .right {
    width: 28px;
    transform: rotateY(180deg);
  }

  /* 注册成功 */
  .success-img {
    margin-top: 46px;
    width: 84px;
    height: 84px;
  }

  .suc-title {
    margin: 20px 0 14px 0;
    color: #000000;
    font-size: 20px;
    font-weight: bold;
  }

  .suc-desc {
    color: #999999;
    font-size: 16px;
    margin-bottom: 10px;
  }

  .btn {
    text-decoration: none;
    color: #ffffff;
    font-size: 13px;
    width: 284px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background: url(http://192.168.3.12:8028/Public/web/img/fm2021/web/img/btnbg.png) no-repeat;
    background-size: 100% 100%;
    margin-bottom: 28px;
  }

  #weixin-tip {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.8);
    filter: alpha(opacity=80);
    width: 100%;
    height: 100%;
    z-index: 100000;
  }

  #weixin-tip p {
    text-align: center;
    margin-top: 10%;
    position: relative;
  }

  .openAppBg {
    width: 90%;
  }

  #weixin-tip .close {
    color: #fff;
    padding: 5px;
    font: bold 40px simsun;
    text-shadow: 0 1px 0 #ddd;
    position: absolute;
    top: 0;
    left: 5%;
  }
</style>

<body>
  <div id="register">
    <div id="weixin-tip">
      <p><img :src="getPng('openAppBg')" alt="微信打开" class="openAppBg" /><span id="close" title="关闭"
          class="close">×</span></p>
    </div>
    <div class="content">
      <span class="title">好友邀你拿零花钱啦</span>
      <span class="desc">0收费的推广任务平台,有手机就能兼职</span>
      <img class="leftImg" :src="getPng('left')">
      <img class="rightImg" :src="getPng('right')">
      <div class="success form" id="openBtn">
        <img :src="getPng('success')" class="success-img">
        <p class="suc-title">注册成功</p>
        <span class="suc-desc">奖励已发放至卡券包
        </span>
        <span class="suc-desc">
          APP登录后即可领取</span>
        　<a href="fmdisk://feemoo.app/openwith?type=0&id=720024" @click="goApp" class="btn"
          style="margin-top: 22px;">打开APP</a>
      </div>
      <div class="tgy form">
        <div class="form-title-box" style="margin-bottom: 28px;">
          <img class="left" :src="getPng('dots')">
          <span class="form-title">为什么选择推广易</span>
          <img class="right" :src="getPng('dots')">
        </div>
        <div class="item-box">
          <div class="tgy-item">
            <img class="tgy-img" :src="getPng('tgy1')">
            <span class="tgy-desc">平台审核保障</span>
          </div>
          <div class="tgy-item">
            <img class="tgy-img" :src="getPng('tgy2')">
            <span class="tgy-desc">每日上新任务</span>
          </div>
          <div class="tgy-item">
            <img class="tgy-img" :src="getPng('tgy3')">
            <span class="tgy-desc">在线人工客服</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>


  <script>
    var vm = new Vue({
      el: "#register",
      data: {
      },
      created() {

      },
      methods: {
        goApp() {
          var ua = navigator.userAgent.toLowerCase();
          var uat = navigator.userAgent;
          var is_weixin = ua.match(/MicroMessenger/i) == "micromessenger"
          var is_android = uat.indexOf('Android') > -1 || uat.indexOf('Linux') > -1;
          var is_ios = !!uat.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

          // 1.判断是否为微信浏览器  2.判断是安卓还是ios 
          if (is_weixin) {
            //1.安卓-微信（引导页）
            if (is_android) {
              var winHeight = typeof window.innerHeight != 'undefined' ? window.innerHeight : document.documentElement.clientHeight;
              var btn = document.getElementById('openBtn');
              var tip = document.getElementById('weixin-tip');
              var close = document.getElementById('close');
              btn.onclick = function (e) {
                tip.style.height = winHeight + 'px';
                tip.style.display = 'block';
                return false;
              }
              close.onclick = function () {
                tip.style.display = 'none';
              }
            } else {
              //2.ios-微信（moblink)  手动添加moblink.js  可前往https://www.mob.com/下载唯一js文件
              var linkObj = document.createElement("script");
              linkObj.setAttribute("src", "//bgzr.t4m.cn/applink.js");
              document.body.appendChild(linkObj);
              MobLink({
                el: '#openBtn',
                path: '',
                moblink_source_ios: '5ffd0e42fb0c7d193ccc77c5',       //iOS下载渠道配置字段
                moblink_source_android: '5ffbff51fb0c7d193ccc77c2',   //安卓下载渠道配置字段
                params: {
                  key: "h5"
                }
              })
            }
          } else {
            var iFrame;
            var url = "fmdisk://feemoo.app/openwith?type=0&id=720024"
            //非微信浏览器
            if (is_android) {
              //安卓终端使用iframe
              iFrame = document.createElement("iframe");
              iFrame.setAttribute("src", url);
              iFrame.setAttribute("style", "display:none;");
              document.body.appendChild(iFrame);
              // 发起请求后这个 iFrame 就没用了，所以把它从 dom 上移除掉
              iFrame.parentNode.removeChild(iFrame);
              iFrame = null;
              // 如果用户没有安装APP，则提示用户去安装APP
              setTimeout(() => {
                window.location.href = 'https://www.feimaoyun.com/#/softdown' // 这里可以自行写一个延时关闭的弹窗，也可以跳转至app下载地址
              }, 2000);
            } else if (is_ios) {
              //iOS终端直接页面跳转
              window.location.href = url;
              // 如果用户没有安装APP，则提示用户去安装APP
              setTimeout(() => {
                window.location.href = 'https://www.feimaoyun.com/#/softdown' // 这里可以自行写一个延时关闭的弹窗，也可以跳转至app下载地址
              }, 2000);
            } else {
              window.location.href = url;
            }
          }

        },
        getPng(str) {
          return 'http://192.168.3.12:8028/Public/web/img/fm2021/web/img/' + str + '.png';
        },
      }
    });
  </script>
</body>

</html>

h5在微信浏览器，引导打开App
完整功能实现：
记“在浏览器打开”动画
在微信打开的h5页面，如果想要跳转到app指定页面时，一般会提示在浏览器打开。“在浏览器打开"遮罩，可以加上渐变动...
vue h5在微信浏览器中首次打开加载缓慢或白屏几秒后才渲染解决
一、问题描述 vue h5 首次在电脑端浏览器打开，正常快速响应。vue h5 首次在手机微信浏览器中打开，会有3...
微信如何实现自动跳转到用其他浏览器打开指定页面下载APK
微信浏览器跳转浏览器下载app解决方案新版本微信浏览器中，已禁用下载APP应用，只支持打开微信合作商APP下载，...
微信如何实现自动跳转到用其他浏览器打开指定页面下载APK
微信浏览器跳转浏览器下载app解决方案新版本微信浏览器中，已禁用下载APP应用，只支持打开微信合作商APP下载，...
微信如何实现自动跳转到用其他浏览器打开指定页面下载APK
微信浏览器跳转浏览器下载app解决方案新版本微信浏览器中，已禁用下载APP应用，只支持打开微信合作商APP下载，...
微信如何实现自动跳转到用其他浏览器打开指定页面下载APP
微信浏览器跳转浏览器下载app解决方案新版本微信浏览器中，已禁用下载APP应用，只支持打开微信合作商APP下载，...
微信如何实现自动跳转到用其他浏览器打开指定页面下载APK
微信浏览器跳转浏览器下载app解决方案新版本微信浏览器中，已禁用下载APP应用，只支持打开微信合作商APP下载，...
移动端支付流程
微信微信浏览器在微信中打开h5页面付款时，使用JSAPI接口调起支付模块。微信浏览器提供了一个内置对象 Weix...
微信自动跳转浏览器打开APP（APK）下载链接
本文章向大家介绍微信自动跳转浏览器打开APP（APK）下载链接，主要包括微信自动跳转浏览器打开APP（APK）下载...