Android就直接下载，如果是iPad就提示用户保存二维码回去下载

最新推荐文章于 2021-10-19 16:26:29 发布

宝儿的程序生涯

最新推荐文章于 2021-10-19 16:26:29 发布

阅读量1.2k

点赞数

本文链接：https://blog.csdn.net/fengtingyan/article/details/108530629

版权

今天的问题是
主页有一个banner图片，点击就可以下载存放在服务器里面的apk文件
我用了a标签的download，这个对于Android和平板是友好的，但是对于iPhone和iPad就不行了，它把apk解析成了乱码的文件给我打开了，现在的想法是
让 iPad跳到Appstone但是飞机上没有无线网啊，跳不过去，所以准备就把那个链接变成一个二维码，让它判断如果是Android就直接下载，如果是iPad点击图片就提示用户保存二维码回去下载。

问题来了：那这个二维码怎么存，放在服务器还是本地呀
如果放在服务器上，那它怎么在数据库存啊？

解题思路：
直接判断有网就跳各自链接,没网就下载图片
判断是Android的时候就点击直接下载apk
判断是ipad的时候直接把地址转成二维码，点图片弹出二维码，长按保存，点其他地方二维码隐藏

这里点击图片还做了判断，根据resourceType判断是打开图片还是跳转注册还是下载app

<cube-slide :speed="200"
                ref="slide"
                :data="items">
  <cube-slide-item v-for="(item, index) in items"
                   :key="index">
    <!-- 实现根据资源类型去跳转不同的页面 -->
    <!-- 4 资源下载 3 跳转注册 1,2大图察看-->
    <!-- 4 /cancrieasproxy/adv/hebei.apk -->
    <!-- 3 保证数据库src ：/cancrieasproxy/adv/registeredmeber.jpg 和 resourceType：3-->
    <a :href="item.resourceId"
       download="hebei_app.apk"
       v-if="item.resourceType == 4"
       class="main-bak-height" @click="openApp"
       :style="{'background': 'url('+item.src+') no-repeat', 'background-size': '100% 100%', 'background-position': 'center center' }">
      <img class="swipe-img"
           :src="item.src">
    </a>
    <a @click="router"
       v-else-if="item.resourceType == 3"
       class="main-bak-height"
       :style="{'background': 'url('+item.src+') no-repeat', 'background-size': '100% 100%', 'background-position': 'center center' }">
      <img class="swipe-img"
           :src="item.src">
    </a>
    <a :href="item.src"
       v-else
       class="main-bak-height"
       :style="{'background': 'url('+item.src+') no-repeat', 'background-size': '100% 100%', 'background-position': 'center center' }">
      <img class="swipe-img"
           :src="item.src">
    </a>
  </cube-slide-item>
</cube-slide>

openApp(i) {
  // 判断是Android还是iPhone, Android直接下载，iPhone跳出二维码
  // 通过iframe的方式试图打开APP，如果能正常打开，会直接切换到APP，并自动阻止a标签的默认行为
  // 否则打开a标签的href链接
  var u = navigator.userAgent, app = navigator.appVersion
  var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; // Android
  var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) // ios
  var link = document.getElementById('resource')
  if(this.online == true) {
    if (isAndroid) {
      link.href = i
      // link.download = hebei_app.apk
      link.click()
    }
    if (isIOS) {
      link.href = 'https://apps.apple.com/cn/app/%E6%B2%B3%E5%8C%97%E8%88%AA%E7%A9%BA/id1441284761'
      // link.download = hebei_app.apk
      link.click()
    }
  } else {
    // 离线状态
    if (isAndroid) {
        link.href = i
        link.click()
    }
    if (isIOS) {
      this.$createDialog({
        type: 'alert',
        confirmBtn: {
          text: '我知道了',
          active: true
        }
      }, (createElement) => {
        return [
          createElement('div', {
            'class': {
              'my-title': true
            },
            slot: 'title'
          }, [
            createElement('div', {
              'class': {
                'my-title-img': true
              }
            }),
            createElement('p', '截屏保存二维码')
          ])
        ]
      }).show()
    }
  }

$(function(){
	var u = navigator.userAgent, app = navigator.appVersion; 
	var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或者uc浏览器 
	var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 
	alert('是否是Android：'+isAndroid); 
	alert('是否是iOS：'+isiOS);
	if(isAndroid){
		$ ("#choose").attr('capture','camera');
	}
}