1. 首页
  2. 文章中心
  3. H5移动端

关于h5与app的交互（有App直接打开没有App跳转下载商城）

68 阅读 0 评论
我是靠谱客的博主 无私大碗，最近开发中收集的这篇文章主要介绍关于h5与app的交互（有App直接打开没有App跳转下载商城），觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

话不多说 ，直接看代码，主要看JoinTogether方法

<template>

  <div class="share-page">

    <div>

      <div class="share-row1">

        <div class="share-img">

          <img

            :src="shareList.banners[0].imageUrl"

            alt=""

            width="100%"

            height="100%"

          />

        </div>

        <div class="share-price">活动价<span>￥69</span></div>

        <div class="share-yprice">原价<span>￥99</span></div>

        <div>商品描述:{{ shareList.description }}</div>

      </div>

      <div class="share-row1">

        <div class="share-title">拼团流程</div>

        <div class="grid">

          <div class="line-row">

            <div class="share-tuan">

              <div class="share-row1-img"></div>

              <div class="share-row1-title">发起拼团</div>

            </div>

            <div class="row1-line-img">

               <img src="../../../img/share-tuan.png" width="100%" height="100%" alt="">

            </div>

            <div class="share-tuan">

              <div class="share-row1-img"></div>

              <div class="share-row1-title">邀请好友</div>

            </div>

            <div class="row1-line-img">

              <img src="../../../img/share-tuan.png" width="100%" height="100%" alt="">

            </div>

            <div class="share-tuan">

              <div class="share-row1-img"></div>

              <div class="share-row1-title">拼团成功</div>

            </div>

          </div>

        </div>

      </div>

      <div class="share-row1">

        <div class="grid2">

          <div class="share-title">参团人员</div>

          <div class="share-title1">还差3人成团</div>

        </div>

        <div class="grid3">

          <div class="share-row2-img"></div>

          <div class="share-title1">135*******</div>

          <div class="share-title1">2022-08-24</div>

        </div>

        <div class="grid3">

          <div class="share-row2-img"></div>

          <div class="share-title1">135*******</div>

          <div class="share-title1">2022-08-24</div>

        </div>

      </div>

      <div class="share-row1">

        <div class="share-title">活动规则</div>

        <div class="share-text">

          活动规则文案活动规则文案活动规则

          文案活动规则文案活动规则文案活动规则文案活动规则

          文案活动规则文案活动规则文案活动规则文案活动规则

          文案活动规则文案活动规则文案活动规则文案活动规则

          文案活动规则文案活动规则文案活动规则文案活动规则

          文案活动规则文案活动规则文案活动规则文案活动规则

          文案活动规则文案活动规则文案活动规则文案活动规则

          文案活动规则文案活动规则文案活动规则文案活动规则 文案活动规则文案

        </div>

      </div>

      <div class="share-row1">

        <div class="share-title">活动详情</div>

      </div>

      <div class="page-top">

        <el-button type="primary" @click="JoinTogether()" class="share-button"

          >我要加入</el-button

        >

      </div>

    </div>

  </div>

</template>

<script>

export default {

  data() {

    return {

      shareList: {},

      spu: 962735,

      shareIcon:'../../../img/share-tuan.png'

    }

  },

  async mounted() {

    const data = {

      currentPage: 1,

      pageSize: 12,

      saleStatusList: 3, // 销售中

      saleStatus: 99

    }

    // const res = await this.$api.GET_SPU_LIST(data)

    const res = await this.$api.GET_SPU_DETAIL(this.spu)

    this.shareList = res

    console.log(res, 9090)

  },

  methods: {

    JoinTogether() {

      var u = navigator.userAgent,

        app = navigator.appVersion

      var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1

      var isIOS = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/)

      if (isAndroid) {

        alert('我是安卓')

        this.android()

      }

      if (isIOS) {

        alert('我是苹果')

        // this.OpentProduct = true

        // this.isShowCard = true

        this.appStore()

      }

    },

    android() {

      var _clickTime = new Date().getTime()

      window.location.href = 'zhihu://' /***打开app的协议，有安卓同事提供***/

      var _count = 0,

        intHandle

      intHandle = setInterval(function() {

        _count++

        var elsTime = new Date().getTime() - _clickTime

        if (_count >= 100 || elsTime > 5000) {

          clearInterval(intHandle)

          //检查app是否打开

          if (document.hidden || document.webkitHidden) {

            window.location.href = 'zhihu://'

            alert('打开了')

            window.close()

            // return;

          } else {

            window.location.href =

              'https://a.app.qq.com/o/simple.jsp?pkgname=cn.ch.neighbour' //下载链接

          }

        }

      }, 20)

    },

    //IOS

    appStore() {

      var clickTime = +new Date()

      var ifr = document.createElement('iframe')

      ifr.src = '' //ios协议

      ifr.style.display = 'none'

      document.body.appendChild(ifr)

      //启动间隔20ms 运行定时器

      var count = 0

      var intHandle = ''

      intHandle = setInterval(function() {

        count++

        var elsTime = +new Date() - clickTime

        if (count >= 100 || elsTime > 300) {

          clearInterval(intHandle)

          document.body.removeChild(ifr)

          // 检查App是否打开

          if (document.hidden || document.webkitHidden) {

            //打开了

            ifr.src = '' //ios协议

            window.close()

          } else {

            //没打开

            alert('没有APP')

            window.open('https://8ec4cbe.umindex.com')

            // window.location.href = 'itms-apps://8ec4cbe.umindex.com'

          }

        }

      }, 20)

    },

    clickSet() {

      this.isShowCard = false

      this.$router.push('XXX') //跳转到指定页面

    },

    closeCard() {

      this.isShowCard = false

    }

  }

}

</script>

<style lang="scss">

.iframe {

  position: absolute;

  left: 0;

  right: 0;

  top: 0;

  bottom: 0;

  width: 100%;

  height: 100%;

  background: #fff;

  overflow-y: hidden;

}

.page-top {

  z-index: 2;

  width: 100%;

  display: flex;

  justify-content: center;

  align-items: center;

  margin-bottom: 60px;

}

.share-button {

  width: 100%;

}

.share-page {

  width: 100%;

  height: 100%;

  margin: auto;

  background: rgb(238, 237, 237);

}

.share-img {

  width: 98%;

  height: 200px;

  margin: auto;

}

.share-price {

  font-size: 0.8rem;

  span {

    color: red;

    font-display: 500;

    font-size: 1.2rem;

  }

}

.share-yprice {

  font-size: 0.8rem;

  color: #666;

  span {

    color: red;

  }

}

.share-row1 {

  background: #fff;

  margin: auto;

  padding: 8px;

  border-radius: 3px;

  margin-bottom: 5px;

}

.share-tuan {

  width: 80px;

}

.share-row1-img {

  width: 3.5rem;

  height: 3.5rem;

  border-radius: 3rem;

  background: rgb(194, 192, 192);

  margin: auto;

}

.share-row2-img {

  width: 3.5rem;

  height: 3.5rem;

  border-radius: 3rem;

  background: rgb(194, 192, 192);

}

.share-row1-title {

  margin-left: 5px;

}

.share-title {

  font-size: 1.2rem;

  font-display: 500;

  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

  line-height: 40px;

}

.share-title1 {

  font-size: 0.9rem;

  line-height: 40px;

}

.grid {

  display: grid;

  grid-template-columns: repeat(5, 1fr);

}

.line-row {

  display: grid;

  grid-template-columns: repeat(5, 1fr);

  width: 300px;

}

.row1-line-img {

  width: 3.5rem;

  height: 3rem;

}

.grid2 {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

}

.grid3 {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  margin-bottom: 10px;

}

.mask {

  background: rgba(0, 0, 0, 0.5);

  position: fixed;

  margin: 0, 0, 0, 0;

  z-index: 10;

}

.advertise {

  position: fixed;

  width: 5.2rem;

  height: 7rem;

  top: 3.31rem;

  left: 50%;

  transform: translate(-50%, 0%); // 控制居中显示

  z-index: 20;

}

.img_set {

  position: absolute;

  width: 2.4rem;

  height: 0.64rem;

  top: 5rem;

  left: 50%;

  z-index: 40;

  transform: translate(-50%, 0%);

}

.shut {

  position: absolute;

  width: 0.42rem;

  height: 0.42rem;

  bottom: 0;

  left: 50%;

  transform: translateX(-50%);

  background: rgb(195, 32, 32);

  background-size: 42px 42px;

}

</style>

最后

以上就是无私大碗为你收集整理的关于h5与app的交互（有App直接打开没有App跳转下载商城）的全部内容，希望文章能够帮你解决关于h5与app的交互（有App直接打开没有App跳转下载商城）所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
点赞(45)

相关文章

webView不能跳转appstore的问题
webView不能跳转appstore的问题
html调用app store,iOS 获取appStore的链接地址，从app中跳转 appStore中应用
html调用app store,iOS 获取appStore的链接地址，从app中跳转 appStore中应用
vue h5点击跳转主流手机应用商店app下载页
vue h5点击跳转主流手机应用商店app下载页
Nginx插件之openresty反向代理和日志滚动配置案例
Nginx插件之openresty反向代理和日志滚动配置案例
关于h5与app的交互（有App直接打开没有App跳转下载商城）
关于h5与app的交互（有App直接打开没有App跳转下载商城）
html 链接到 appstore,怎么解决无法连接到appstore
html 链接到 appstore,怎么解决无法连接到appstore
Android应用更新（一）
Android应用更新（一）
js 检测移动设备APP应用安装打开应用，未安装跳转到下载页面直接上代码！！
js 检测移动设备APP应用安装打开应用，未安装跳转到下载页面直接上代码！！

评论列表共有 0 条评论

立即
投稿
返回
顶部