国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

李昌杰 / 1337人閱讀

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

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

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

暫時(shí)遇到的坑

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

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

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

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

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

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

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

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

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

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

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

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

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

https://github.com/ftlabs/fastclick

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

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

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

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

1.4 暫未解決的坑

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

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

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

2.與客戶端交互

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

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

使用的工具是 webviewJavascriptBridge

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

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

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

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

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

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

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

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

例如

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

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

有確定 和 取消 兩個按鈕 然后根據(jù)用戶點(diǎn)擊哪個作出操作啊！

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

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

2.2 修改confirm彈窗

紅色為自己添加

因?yàn)檫@個重寫的confirm是在一個框架里面的 反應(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彈窗會先執(zhí)行

例如

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

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

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

很蛋疼對不對？！
解決方法如下！！！！
將alert彈出的語句放在setTimeout里面

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

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

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

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

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

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

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

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


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

解決方法！！！！

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

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

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

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

例如這樣

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

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

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

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/78514.html

相關(guān)文章

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

    摘要：具體的環(huán)境我也不太了解，但是經(jīng)過實(shí)際多臺安卓機(jī)型的測試，我采取的方案可以基本確保在安卓機(jī)中微信瀏覽器的成功上傳。 摘自個人博客：走啊走的記錄，歡迎點(diǎn)擊查看，效果更佳！ 微信瀏覽器上傳圖片bug的原因 微信在新版本中采用的是自己的X5內(nèi)核瀏覽器，而在較老的版本中還有可能是安卓的原生瀏覽器。具體的環(huán)境我也不太了解，但是經(jīng)過實(shí)際多臺安卓機(jī)型的測試，我采取的方案可以基本確保在安卓機(jī)中微信瀏覽器...

    ybak 評論0 收藏0

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

    摘要：簡介是由團(tuán)隊(duì)開發(fā)的一個簡單的以為主，為輔的現(xiàn)代文件上傳組件。采用大文件分片并發(fā)上傳，極大的提高了文件上傳效率。另外分片傳輸能夠更加實(shí)時(shí)的跟蹤上傳進(jìn)度。選擇文件的按鈕。 簡介：WebUploader是由Baidu WebFE(FEX)團(tuán)隊(duì)開發(fā)的一個簡單的以HTML5為主，F(xiàn)LASH為輔的現(xiàn)代文件上傳組件。在現(xiàn)代的瀏覽器里面能充分發(fā)揮HTML5的優(yōu)勢，同時(shí)又不摒棄主流IE瀏覽器，沿用原來的...

    mindwind 評論0 收藏0

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

    摘要：簡介是由團(tuán)隊(duì)開發(fā)的一個簡單的以為主，為輔的現(xiàn)代文件上傳組件。采用大文件分片并發(fā)上傳，極大的提高了文件上傳效率。另外分片傳輸能夠更加實(shí)時(shí)的跟蹤上傳進(jìn)度。選擇文件的按鈕。 簡介：WebUploader是由Baidu WebFE(FEX)團(tuán)隊(duì)開發(fā)的一個簡單的以HTML5為主，F(xiàn)LASH為輔的現(xiàn)代文件上傳組件。在現(xiàn)代的瀏覽器里面能充分發(fā)揮HTML5的優(yōu)勢，同時(shí)又不摒棄主流IE瀏覽器，沿用原來的...

    endiat 評論0 收藏0

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

    摘要：簡介是由團(tuán)隊(duì)開發(fā)的一個簡單的以為主，為輔的現(xiàn)代文件上傳組件。采用大文件分片并發(fā)上傳，極大的提高了文件上傳效率。另外分片傳輸能夠更加實(shí)時(shí)的跟蹤上傳進(jìn)度。選擇文件的按鈕。 簡介：WebUploader是由Baidu WebFE(FEX)團(tuán)隊(duì)開發(fā)的一個簡單的以HTML5為主，F(xiàn)LASH為輔的現(xiàn)代文件上傳組件。在現(xiàn)代的瀏覽器里面能充分發(fā)揮HTML5的優(yōu)勢，同時(shí)又不摒棄主流IE瀏覽器，沿用原來的...

    funnyZhang 評論0 收藏0

  • Web前端常用插件

    摘要：彈窗視頻嵌入插件幻燈片圖片切換手機(jī)端響應(yīng)式日期控件上傳圖片控件校驗(yàn)控件分頁靜態(tài)分頁動態(tài)分頁相冊效果控件多級下拉圖片延遲加載或響應(yīng)式管理模板插件庫大轉(zhuǎn)盤九宮格效果整屏滾動滾動效果用于移動項(xiàng)目的光滑菜單瀏覽器端格式化工具千手觀音 彈窗 1.blockUI2.overlay 3.sweetAlert 視頻 1.jwplayer2.video.js html53.swfobject Flas...

    quietin 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<