H5唤起 uniapp 版的app 端

1. 在 uniapp 中的manifest.json中配置UrlSchemes（相当于给app 留下个 key，可以在别的地方访问这个 key 就实现打开 APP 功能）

参考文档：https://uniapp.dcloud.net.cn/tutorial/app-android-schemes.html

2. 在vue 开发的h5中访问 app

2.1 检查当前环境是都是微信环境，如果是微信环境 提示让他打开浏览器；

2.2 检查当前环境是安卓浏览器还是 ios 浏览器；

2.1 监测能直接打开 app 么 ，打不开就下载，能打开跳转到 app

<template>
  <div class="goods" :style="background">
    <div class="header">
      <h4>共力生态APP</h4>
      <h5>共商 | 共建 | 共享 | 共赢</h5>
    </div>
    <!-- 拼团商品 -->
    <div class="login">
      <div class="login-hint">
        <van-image
          width="80"
          height="80"
          radius="6"
          fit="cover"
          :src="goods.cover"
        />
        <div class="goods-info" v-if="goods.active">
          <h4>{{ goods.name }}</h4>
          <div class="has_pin">
            <div class="has_pined" v-if="goods.sales > 0">
              <van-icon
                name="fire"
                size="14"
                class="fire"
                color="#d81e06"
              />已拼{{ goods.sales }}件
            </div>
            <p>{{ goods.active.number }}人团</p>
          </div>
          <div class="money">{{ goods.active.price }}<span>DT积分</span></div>
        </div>
      </div>
    </div>
    <!-- 该团状态 -->
    <div class="active">
      <!-- 注册成功 -->
      <div class="active-top">
        <div class="title">一起拼团</div>
        <div class="des">拼单成功后返等额DT积分</div>
      </div>
      <div class="active-avatars">
        <van-image
          v-for="(item, index) in share.details"
          :key="index"
          class="avatar"
          width="40"
          height="40"
          round
          fit="cover"
          :src="item.cover"
        />
        <div class="plus">
          <van-icon name="plus" color="#666" />
        </div>
      </div>
      <button class="login-button" @click="openapp">参与拼团</button>
    </div>

    <!-- 底部公司信息 -->
    <div class="dowApp-flotter">共力生态 © 毗魅（海南）数字科技有限公司</div>

    <!-- 弹窗提示用浏览器打开 -->
    <van-popup v-model="show" class="popup-content" position="top" duration="0">
      <van-image
        class="popup-content-img"
        :src="require('@/assets/prompt-icon.png')"
      />
      <div>请使用手机浏览器打开并下载</div>
    </van-popup>
  </div>
</template>

<script>
export default {
  name: "dowApp",
  data() {
    return {
      show: false,
      isLogin: false,
      phone: "",
      invitation: "",
      code: "",
      codeText: "获取验证码",
      codeState: false,
      background: {
        backgroundImage: "url(" + require("@/assets/code_back.png") + ")",
        backgroundSize: "cover",
        backgroundPosition: "center",
      },
      goods: {},
      share: {},
    };
  },
  created() {
    //获取携带的邀请码
    if (this.$route.query.invitation_code)
      this.invitation = this.$route.query.invitation_code;
    //禁止微信浏览器改变字体大小
    let WeixinJSBridge;
    if (
      typeof WeixinJSBridge == "object" &&
      typeof WeixinJSBridge.invoke == "function"
    ) {
      handleFontSize();
    } else {
      document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);
    }

    function handleFontSize() {
      // 设置网页字体为默认大小
      WeixinJSBridge.invoke("setFontSizeCallback", {
        fontSize: 0,
      });
      // 重写设置网页字体大小的事件
      WeixinJSBridge.on("menu:setfont", function () {
        WeixinJSBridge.invoke("setFontSizeCallback", {
          fontSize: 0,
        });
      });
    }
  },
  mounted() {
    let that = this;
    document.addEventListener(
      "visibilitychange",
      function () {
        if (that.timer) {
          that.opening = false;
          clearTimeout(that.timer);
        }
      },
      false
    );
    that.getShareInfo();
  },
  methods: {
    // 获取当前页面数据
    getShareInfo() {
      let collage;
      if (this.$route.params.id && this.$route.params.id !== "") {
        collage = this.$route.params.id.split("invitation")[0];
        this.invitation = this.$route.params.id;
      }
      this.axios
        .get(
          "http://api.gl.****.cn/api/mall/collages/" +
            collage +
            "/repages"
        )
        .then((res) => {
          this.goods = res.data.data.goods;
          this.share = res.data.data.share;
        });
    },

    // 监测是否是微信环境及监测当前是否是安卓环境
    openapp() {
      // 检查是否为微信浏览器
      let ua = navigator.userAgent.toLowerCase();
      if (ua.match(/MicroMessenger/i) == "micromessenger") {
        this.show = true;
        return;
      }
      this.$copyText(this.$route.params.id);
      var u = navigator.userAgent;
      var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1;
      var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+ Mac OS X/);
      if (isAndroid) {
        this.android();
      }
      if (isIOS) {
        alert("IOS 系统努力开发中~耐心等待~");
      }
    },
    // 安卓环境 安装了 app  直接打开，未安装 app 直接跳转下载 app
    android() {
      var _clickTime = new Date().getTime();
      window.location.href = "gldao://pages/auth/auth?" + this.invitation;
      var _count = 0,
        intHandle;
      intHandle = setInterval(() => {
        _count++;
        var elsTime = new Date().getTime() - _clickTime;
        if (_count >= 100 || elsTime > 5000) {
          clearInterval(intHandle);
          if (document.hidden || document.webkitHidden) {
            window.location.href = "gldao://pages/auth/auth?" + this.invitation;
            window.close();
            // return;
          } else {
            // 安卓下载app
            this.$toast.loading("获取版本地址...");
            this.dowApp();
          }
        }
      }, 20);
    },
    //下载App
    dowApp() {
      //有邀请码和邀请码
      if (this.$route.query.invite && this.$route.query.invite !== "") {
        let code = this.$route.query.invite;
        this.$copyText(code);
      }
      this.axios
        .post("https://api.gongli.****/api/app/version/androidurl222", {})
        .then((res) => {
          if (res.data.data.url) {
            let appDowLink = document.createElement("a");
            appDowLink.style.display = "none";
            appDowLink.href = res.data.data.url;
            appDowLink.click();
            this.$toast.clear();
          } else {
            this.$toast("获取版本失败，请联系管理员");
          }
        });
    },
  },
};
</script>

<style scoped>
.goods {
  text-align: center;
  min-height: 100vh;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-box-pack: center;
  background: #0a045b;
  position: relative;
}

.header {
  text-align: center;
  color: white;
  font-size: 30px;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
  padding-bottom: 50px;
}
.header h5,
.header h4 {
  margin: 0;
}
.header h5 {
  font-size: 16px;
}

.login {
  z-index: 2;
  background: rgba(255, 255, 255, 0.9);
  width: 80vw;
  margin-left: 10vw;
  border-radius: 10px;
  padding: 20px 20px 30px;
  box-sizing: border-box;
}

.login-title {
  font-weight: bold;
  font-size: 18px;
  line-height: 40px;
  color: #1d2473;
}

.login-input {
  color: #1d2473;
  width: 100%;
  background: transparent;
  border: solid 2px #1d2473;
  height: 50px;
  border-radius: 25px;
  padding: 0 15px;
  box-sizing: border-box;
  font-size: 16px;
  margin-top: 15px;
}

.login-button {
  margin-top: 20px;
  width: 100%;
  height: 50px;
  border-radius: 25px;
  border: none;
  font-weight: bold;
  color: white;
  background: #1d2473;
}

.login-button.null {
  border: solid 2px #1d2473;
  background: transparent;
  box-sizing: border-box;
  color: #1d2473;
}

.login-code {
  position: relative;
  background: transparent;
  border: solid 2px #1d2473;
  height: 50px;
  border-radius: 25px;
  margin-top: 15px;
  padding-right: 150px;
  padding-left: 15px;
  box-sizing: border-box;
}

.login-code-btn {
  position: absolute;
  right: 3px;
  top: 3px;
  height: 40px;
  border-radius: 20px;
  border: none;
  width: 120px;
  font-size: 14px;
  color: white;
  background: #1d2473;
}
button.login-code-btn[disabled] {
  background: transparent;
  color: gray;
}
.login-code-input {
  width: 100%;
  height: 46px;
  padding: 0;
  border: none;
  background: transparent;
  font-size: 16px;
}
.active {
  margin-top: 15px;
  z-index: 2;
  background: rgba(255, 255, 255, 0.9);
  width: 80vw;
  margin-left: 10vw;
  border-radius: 10px;
  padding: 20px 20px 30px;
  box-sizing: border-box;
}
.active-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.active-top .title {
  font-size: 18px;
  font-weight: bold;
}
.active-top .des {
  color: gray;
  font-size: 12px;
  padding-top: 2px;
}

.active-avatars {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin-top: 15px;
}
.active-avatars .avatar {
  margin-right: 10px;
}

.active-avatars .plus {
  background-color: #b6b6b649;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
}
/*app下载*/
.login-hint {
  /* height: 200px; */
  display: flex;
  flex-direction: row;
  justify-content: center;
  box-sizing: border-box;
  align-items: center;
  /* padding-top: 20px;
  background: pink; */
}

.goods-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  flex: 1;
  margin-left: 10px;
}
.goods-info .has_pin {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
}
.has_pined {
  font-size: 10px;
  background-color: rgba(255, 0, 0, 0.1);
  padding: 2px 10px;
  border-radius: 10px;
  margin-top: 4px;
  color: #d81e06;
}
.has_pined .fire {
  padding-right: 4px;
}
.goods-info h4 {
  font-size: 16px;
  margin: 10px 0 0 0;
  text-align: left;
  font-weight: normal;
  overflow: hidden;
  width: 100%;
  max-width: 180px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.goods-info p {
  margin: 0;
  margin-left: 10px;
  padding: 4px 0 0;
  font-size: 13px;
  color: gray;
  text-align: left;
}
.goods-info .money {
  width: 100%;
  flex: row;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  padding: 10px 0 0;
  font-size: 18px;
  font-weight: bold;
  color: #d81e06;
}
.goods-info .money span {
  padding-left: 6px;
  font-size: 10px !important;
  font-weight: normal;
  padding-top: 2px;
}
.dowApp-flotter {
  text-align: center;
  padding-top: 40px;
  font-size: 14px;
  color: white;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
}

/* 微信提示 */
.popup-content {
  background: transparent;
  text-align: right;
  color: white;
  font-size: 14px;
  padding: 15px;
  box-sizing: border-box;
}

.popup-content-img {
  width: 100px;
  margin-bottom: 20px;
}
</style>