今天的問題是
主頁有一個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的字樣」 這個從技術角度是如何去實現的呢？