今天的问题是
主页有一个banner图片，点击就可以下载存放在服务器里面的apk文件
我用了a标签的download，这个对于Android和平板是友好的，但是对于iPhone和iPad就不行了，它把apk解析成了乱码的文件给我打开了，现在的想法是
让 iPad跳到Appstone但是飞机上没有无线网啊，跳不过去，所以准备就把那个链接变成一个二维码，让它判断如果是Android就直接下载，如果是iPad就提示用户保存二维码回去下载。
问题来了：那这个二维码怎么存，放在服务器还是本地呀
如果放在服务器上，那它怎么在数据库存啊？
这里点击图片还做了判断，根据resourceType判断是打开图片还是跳转注册还是下载app
解题思路：
直接判断有网就跳各自商店,没网就下载图片
判断是ipad的时候 直接把地址转成二维码 让他长按保存
找个二维码生成插件
<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');
}
}
我们在浏览网页的时候，你会看到一个网页下面漂浮着一个提示框“打开APP”或者“下载APP的字样”，如果你的手机已经安装过这个APP，那么网页会提示“打开APP”，如果没有安装，那就会提示“下载APP的字样” 这个从技术角度是如何去实现的呢？