移動(dòng)端開發(fā)（使用webuploader上傳圖片,客戶端交互,修改alert彈窗等）

李昌杰發(fā)布于2019-08-19 17:26 / 1473人閱讀

摘要：之前實(shí)習(xí)做的一個(gè)移動(dòng)端的頁(yè)面需要的功能有圖片上傳點(diǎn)擊客戶端的返回按鈕有提示即與客戶端有交互遇到不少的坑總結(jié)一下問題圖片上傳功能使用工具百度的暫時(shí)遇到的坑刪除圖片實(shí)際上并沒有完全刪除需要自己在源碼上添加詳情看的提問上傳的圖片旋轉(zhuǎn)角度有問題比

之前實(shí)習(xí)做的一個(gè)移動(dòng)端的頁(yè)面需要的功能有圖片上傳點(diǎn)擊客戶端的返回按鈕有提示(即與客戶端有交互）遇到不少的坑總結(jié)一下問題

1.圖片上傳功能使用工具百度的webuploader

暫時(shí)遇到的坑

1.1 刪除圖片實(shí)際上并沒有完全刪除需要自己在源碼上添加

詳情看github的提問 https://github.com/fex-team/webuploader/issues/594

1.2 上傳的圖片旋轉(zhuǎn)角度有問題比如在上傳頁(yè)面看的圖片縮略圖是水平顯示的但上傳到后臺(tái) 顯示的是豎著的

詳情可看 https://github.com/fex-team/webuploader/issues/476

文中作者有說到這個(gè)需要和后臺(tái)配合實(shí)現(xiàn) 因?yàn)槿绻谇岸藢?shí)現(xiàn) 會(huì)增加負(fù)擔(dān)

(遇到這情況就多多拜托后臺(tái)哥哥吧

1.3 使用fastclick后如果點(diǎn)擊屏幕過快會(huì)無法激活上傳功能

這個(gè)是我發(fā)現(xiàn)最大的坑可能也不關(guān)這個(gè)插件的事因?yàn)椴挥胒astclick的情況是可以正常使用的

但在網(wǎng)上找了很多文章都沒有找到解決方法最后只能使用最蠢的方式來解決

正常情況激活fastclick最直接粗暴的方式是

window.addEventListener("load", function() {
  FastClick.attach(document.body);
}, false);

問題就出現(xiàn)在 fastclick激活的區(qū)域是整個(gè)body 那么嘗試一下

不綁定webuploader的上傳按鈕會(huì)如何呢？

https://github.com/ftlabs/fastclick

fastclick的github上有一處是忽略激活的

但我給嘗試了之后發(fā)現(xiàn)并沒有作用

最后用最蠢的方式是獲取各個(gè)需要清除300ms的元素然后再一一激活fastclick

（這實(shí)在是太蠢了但目前我是想不出好方法只能這樣將就用著了

1.4 暫未解決的坑

webuploader 在安卓機(jī)子上使用上傳圖片的時(shí)候不能一次性選擇多張圖片（可能需要安卓客戶端那邊幫忙暫未找到解決方法

ios 上點(diǎn)擊上傳圖片按鈕會(huì)有300ms延遲（就算之前使用了fastclick激活整個(gè)body也會(huì)存在）

PS：其實(shí)最可怕的情況是 webuploader的git 好久沒更新了（好可怕。。

2.與客戶端交互

因?yàn)檫@個(gè)頁(yè)面是嵌在APP里面打開的

有個(gè)功能是用戶輸入了內(nèi)容的時(shí)候點(diǎn)擊APP左上角的返回按鈕跳出一個(gè)提示框來提示用戶是否返回

使用的工具是 webviewJavascriptBridge

附上github地址 https://github.com/marcuswestin/WebViewJavascriptBridge

寫好一個(gè)function 然后客戶端調(diào)用

然后與客戶端交互的方式是通過修改 document.location 來告知客戶端然后客戶端來進(jìn)行判斷（這方法有點(diǎn)蠢求大神告知更好的方法

到這里就會(huì)出現(xiàn)一個(gè)問題了

（彈窗用的是系統(tǒng)自帶的alert和confirm彈窗原因是如果用div模擬的彈窗能控制的范圍只有在頁(yè)面部位

例如 div的模擬彈窗后面再用一個(gè)遮罩層阻擋用戶的其他操作能阻擋的只有頁(yè)面范圍內(nèi)

但頭頂?shù)脑鷄pp按鈕并不能阻擋無奈使用系統(tǒng)的alert彈窗）

2.1 ios的彈窗會(huì)出現(xiàn)網(wǎng)址

例如

解決方法（去除移動(dòng)端alert confirm的網(wǎng)址(url)）http://blog.5ibc.net/p/21287.html

好了網(wǎng)址不顯示了但是！我用的返回框是confirm彈窗??！

有確定和取消兩個(gè)按鈕然后根據(jù)用戶點(diǎn)擊哪個(gè)作出操作?。?/p>

但是這個(gè)方法的彈窗是用iframe 點(diǎn)擊完之后就消失！根本不能判斷

所以我又自己修改了一下confirm的寫法

2.2 修改confirm彈窗

紅色為自己添加

因?yàn)檫@個(gè)重寫的confirm是在一個(gè)框架里面的反應(yīng)后就立刻取消

所以不能通過它來判斷

需要在里面添加判斷

var wConfirm = window.confirm;
window.confirm = function (message,trueFn,flaseFn) {
    try {
        var iframe = document.createElement("IFRAME");
        iframe.style.display = "none";
        iframe.setAttribute("src", "data:text/plain,");
        document.documentElement.appendChild(iframe);
        var alertFrame = window.frames[0];
        var iwindow = alertFrame.window;
        if (iwindow == undefined) {
            iwindow = alertFrame.contentWindow;
        }
        var result = iwindow.confirm(message);
　　　　if(result){
　　　　　　trueFn();
        } else{
          flaseFn();
        }
        iframe.parentNode.removeChild(iframe);
    }
    catch (exc) {
        return wConfirm(message);
    }
}

3.由上面的alert彈窗衍生而出的問題

項(xiàng)目中遇到
在 ios中 alert彈窗會(huì)先執(zhí)行

例如

alert(1);
console.log(2);
alert(3);

ios會(huì)先彈出1 然后彈出3 最后才輸出2

所以就會(huì)遇到一些情況
在alert語(yǔ)句前本來是想讓某些元素隱藏或者改變樣式
但實(shí)際上ios會(huì)先彈出alert窗但想改變的元素并還沒有改變樣式
只會(huì)在點(diǎn)擊alert窗后才會(huì)執(zhí)行

很蛋疼對(duì)不對(duì)？！
解決方法如下?。。。?br>將alert彈出的語(yǔ)句放在setTimeout里面

setTimeout(function(){
    alert(3);
},0)

原理是 setTimeout會(huì)在js空閑之后才會(huì)執(zhí)行里面的函數(shù)
所以把彈窗放進(jìn)里面就能確保alert之前的語(yǔ)句都執(zhí)行完畢了（不知道說得對(duì)不對(duì) 這是由我自己總結(jié)出來的若錯(cuò)誤求輕噴）

4.安卓手機(jī) 軟鍵盤彈出會(huì)造成頁(yè)面被壓縮

例如做個(gè)整屏的頁(yè)面（就是高度是整個(gè)手機(jī)屏幕沒有滾動(dòng)的）

底部有一系列的工具欄（一般的做法是用絕對(duì)定位固定到底部）

如果這時(shí)候頁(yè)面有input輸入框在部分手機(jī)上軟鍵盤彈出來后

固定到底部的元素會(huì)突然冒上來

從網(wǎng)上隨便找的兩張圖片

造成的原因我猜想是軟鍵盤彈出來后頁(yè)面的高度就瞬間被減去了軟鍵盤的高度導(dǎo)致以body定位的元素出現(xiàn)差錯(cuò)

解決方法?。。。?/p>

進(jìn)入頁(yè)面之后設(shè)置body的高度為整個(gè)手機(jī)高度

那么彈出軟鍵盤后也不會(huì)被減去高度了

5.聯(lián)動(dòng)選擇框

策劃要求弄個(gè)可以上下滑動(dòng)的選擇框

例如這樣

單純select肯定是滿足不了的要臨時(shí)自己寫一個(gè)？但是又太難寫不出來？

推薦一個(gè) https://github.com/tianxiangbing/mobile-select-area

這個(gè)可能和很多人的實(shí)際開發(fā)有點(diǎn)出入但是自己再修修改改還是能用的

GPU云服務(wù)器云服務(wù)器 H5移動(dòng)端上傳圖片移動(dòng)端開發(fā) 手機(jī)端上傳圖片安卓端上傳圖片

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/78514.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

李昌杰

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

RAKsmart：美國(guó)獨(dú)立服務(wù)器秒殺$30/月，云服務(wù)器全場(chǎng)7折，站群服務(wù)器/大帶寬服務(wù)器持續(xù)熱賣

閱讀 2144·2021-11-15 17:57
使用IoT Studio搭建氣象監(jiān)測(cè)屏

閱讀 839·2021-11-11 16:54
Pacificrack：美國(guó)多IP便宜VPS，站群VPS，1核2G 30G SSD，5-253個(gè)IP

閱讀 2685·2021-09-27 13:58
U8g2圖形庫(kù)使用技巧記錄（1）

閱讀 4520·2021-09-06 15:00
2021-09-03-接口自動(dòng)化-python+requests+pytest+csv+yaml+a

閱讀 1042·2021-09-04 16:45
開發(fā)一個(gè)psotcss插件

閱讀 3574·2019-08-30 15:56
iKcamp出品｜全網(wǎng)最新｜微信小程序｜基于最新版1.0開發(fā)者工具之初中級(jí)培訓(xùn)教程分享

閱讀 1838·2019-08-30 15:53
在vue中使用jointjs

閱讀 1764·2019-08-30 14:12

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

移動(dòng)端開發(fā)（使用webuploader上傳圖片,客戶端交互,修改alert彈窗等）

相關(guān)文章

**使用WebUploader解決安卓微信瀏覽器上傳圖片中遇到的bug**

**在Vue項(xiàng)目中使用WebUploader實(shí)現(xiàn)文件上傳**

**在Vue項(xiàng)目中使用WebUploader實(shí)現(xiàn)文件上傳**

**在Vue項(xiàng)目中使用WebUploader實(shí)現(xiàn)文件上傳**

Web前端常用插件

發(fā)表評(píng)論

0條評(píng)論

李昌杰

男|高級(jí)講師

TA的文章

RAKsmart：美國(guó)獨(dú)立服務(wù)器秒殺$30/月，云服務(wù)器全場(chǎng)7折，站群服務(wù)器/大帶寬服務(wù)器持續(xù)熱賣

使用IoT Studio搭建氣象監(jiān)測(cè)屏

Pacificrack：美國(guó)多IP便宜VPS，站群VPS，1核2G 30G SSD，5-253個(gè)IP

U8g2圖形庫(kù)使用技巧記錄（1）

2021-09-03-接口自動(dòng)化-python+requests+pytest+csv+yaml+a

開發(fā)一個(gè)psotcss插件

iKcamp出品｜全網(wǎng)最新｜微信小程序｜基于最新版1.0開發(fā)者工具之初中級(jí)培訓(xùn)教程分享

在vue中使用jointjs

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

移動(dòng)端開發(fā)（使用webuploader上傳圖片,客戶端交互,修改alert彈窗等）

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！