移動端開發（使用webuploader上傳圖片,客戶端交互,修改alert彈窗等）

之前實習做的一個移動端的頁面 需要的功能有圖片上傳 點擊客戶端的返回按鈕 有提示(即與客戶端有交互） 遇到不少的坑 總結一下問題

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

暫時遇到的坑

1.1  刪除圖片 實際上並沒有完全刪除 需要自己在源碼上添加

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

1.2 上傳的圖片 旋轉角度有問題 比如 在上傳頁面看的圖片縮略圖 是水平顯示的 但上傳到后台 顯示的是豎着的

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

文中作者有說到  這個需要和后台配合實現 因為如果在前端實現 會增加負擔

(遇到這情況 就多多拜托后台哥哥吧

1.3 使用fastclick后 如果點擊屏幕過快 會無法激活上傳功能

這個是我發現最大的坑 可能也不關這個插件的事 因為不用fastclick的情況 是可以正常使用的

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

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

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

問題就出現在 fastclick激活的區域是整個body 那么嘗試一下

不綁定webuploader的上傳按鈕 會如何呢？

https://github.com/ftlabs/fastclick

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

但我給嘗試了之后 發現並沒有作用

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

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

1.4 暫未解決的坑

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

ios 上 點擊上傳圖片按鈕 會有300ms延遲 （就算之前使用了fastclick激活整個body也會存在）

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

 

2.與客戶端交互

因為這個頁面是嵌在APP里面打開的

有個功能是 用戶輸入了內容的時候 點擊APP左上角的返回按鈕 跳出一個提示框來提示用戶是否返回

使用的工具是 webviewJavascriptBridge

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

寫好一個function 然后客戶端調用

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

到這里就會出現一個問題了

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

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

但頭頂的原生app按鈕 並不能阻擋 無奈使用系統的alert彈窗）

2.1 ios的彈窗 會出現網址

例如

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

好了 網址不顯示了 但是！ 我用的返回框是confirm彈窗啊！

有確定 和 取消 兩個按鈕 然后根據用戶點擊哪個作出操作啊！

但是這個方法的彈窗 是用iframe 點擊完之后就消失！ 根本不能判斷

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

2.2 修改confirm彈窗

紅色為自己添加

因為這個重寫的confirm是在一個框架里面的 反應后就立刻取消

所以不能通過它來判斷

需要在里面添加判斷

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彈窗 衍生而出的問題

項目中遇到 

在 ios中 alert彈窗會先執行

 

例如 

alert(1);

console.log(2);

alert(3);

 

ios會先彈出1 然后彈出3 最后才輸出2

 

所以就會遇到一些情況

在alert語句前 本來是想讓某些元素隱藏 或者 改變樣式

但實際上ios會先彈出alert窗 但想改變的元素並還沒有改變樣式

只會在點擊alert窗后才會執行

 

很蛋疼對不對？！

解決方法如下！！！！

將alert彈出的語句放在setTimeout里面

setTimeout(function(){

    alert(3);

},0)

 

原理是 setTimeout會在js空閑之后才會執行里面的函數

所以把彈窗放進里面 就能確保alert之前的語句都執行完畢了（不知道說得對不對 這是由我自己總結出來的 若錯誤 求輕噴）

4.安卓手機 軟鍵盤彈出 會造成頁面被壓縮

例如 做個整屏的頁面（就是高度是整個手機屏幕 沒有滾動的）

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

如果這時候 頁面有input輸入框 在部分手機上 軟鍵盤彈出來后

固定到底部的元素會突然冒上來

從網上隨便找的兩張圖片

     

造成的原因 我猜想是 軟鍵盤彈出來后 頁面的高度就瞬間被減去了軟鍵盤的高度 導致以body定位的元素 出現差錯

解決方法！！！！

進入頁面之后 設置body的高度為整個手機高度

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

5. 聯動選擇框

策划要求弄個可以上下滑動的選擇框

例如這樣

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

推薦一個 https://github.com/tianxiangbing/mobile-select-area

這個可能和很多人的實際開發有點出入 但是自己再修修改改還是能用的