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

時間 2019-12-02

標籤移動開發使用 webuploader 上傳圖片客戶端交互修改 alert 欄目無線简体版

原文原文鏈接

以前實習作的一個移動端的頁面須要的功能有圖片上傳點擊客戶端的返回按鈕有提示(即與客戶端有交互）遇到很多的坑總結一下問題html

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

暫時遇到的坑前端

1.1 刪除圖片實際上並無徹底刪除須要本身在源碼上添加

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

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

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

文中做者有說到這個須要和後臺配合實現由於若是在前端實現會增長負擔github

(遇到這狀況就多多拜託後臺哥哥吧web

1.3 使用fastclick後若是點擊屏幕過快會沒法激活上傳功能

這個是我發現最大的坑可能也不關這個插件的事由於不用fastclick的狀況是能夠正常使用的app

但在網上找了不少文章都沒有找到解決方法最後只能使用最蠢的方式來解決框架

正常狀況激活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);
    }
}