前端webview開發中遇到的一些問題及其解決方法

最近作了一個webview中的兌換頁面，原本覺得很簡單，想不到遇到了遠遠超出預期數量的BUG，記下來，以備後患。

1 inline-block元素折行

  BUG描述：如今我有三個DIV，要在一列等寬排列，設定寬度爲33.33333%，想象中應該是正好充滿一列。

然而事實是，div折行了=。=，div之間還出現了一個縫隙。

這個問題很常見，出現的緣由是瀏覽器在解析html時認爲兩個div之間有空格，而一個空格的佔位是1/4em。

通常解決的辦法是設置父元素font-size=0,而後再給子元素設置字體。

這種方法在標準瀏覽器中不會出現錯位問題，可是在安卓2.3及如下的版本中，div仍然會折行！

最終解決方案是在html去掉全部的空格，like this

雖然這樣代碼看起來會很醜~

2 blur和tap事件觸發順序

　　這可能也是一個比較常見的問題。

      邏輯是這樣的：在輸入框blur的時候來驗證某個div是否能夠點擊。在tap這個div的時候給它添加樣式。需求上應該是先觸發blur，再觸發tap。

　　問題來了，js中是tap先觸發，而後blur纔會觸發，這樣就致使不管blur驗證是否經過，div都是能夠點擊的。

　　事件觸發的順序是這樣的：touchstart→→touchmove→→touchend→→tap→→焦點這個時候轉移→→blur→→activate(blur)→→200ms後click

      解決的方法犧牲了一些用戶體驗，用click來替代tap。

　　經頭兒的指點，瞭解到blur這個方法不經常使用的緣由，除了input檢查自身外不多用到blur。更好的方法是不要綁定blur事件，而是給body監聽tap事件，經過event.target和event.currentTarget來找到觸發事件的元素。

3 ajax傳data

　　在提交表單的時候，有時候須要自定義data裏的數據，若是咱們傳的數據中帶有字符串，要用雙引號來聲明。

　　這是由於在js中，聲明字符串用單雙引號都無所謂，可是在其餘oo語言中，字符類型的格式定義格外嚴格，必須使用雙引號。使用單引號會報錯。

　　正確的作法是將data由json轉換爲字符串：JSON.stringify(data)

4 剪切板

　　需求是點擊一個按鈕，而後將一串字符複製到系統的剪切板中。

　　之前chrome有個window.clipboard能夠調用，不知道爲何如今成undefined了。另外這個方法的話自己只有IE和firefox才支持。

　　而後找到一個名爲ZeroClipboard的插件，是用flash來實現的。若是是在pc端，這個插件卻是能夠一用。可是考慮到ios並不支持flash，這個需求最後放棄了。

 

5 sass編譯錯誤

　　這個問題其實很蠢，若是project絕對路徑包含中文，sass在編譯時就會報以下錯誤，切記切記~

      

6 a標籤延遲添加attr

 　　這個bug是webview在和客戶端進行交互時候出現的。

<a href="lock://back" class="back">返回</a>

和客戶端約定的是在頁面發生跳轉時，客戶端去捕獲這個連接，而後xxxx。如今這個頁面中有一個內頁，在內頁打開時a標籤綁定的事件是返回到外頁。

我一開始想的是在打開內頁以後移除a的href屬性，回到外頁後再添加上。而後問題也來了，我在回到外頁後加上href屬性，a標籤依然觸發了跳轉事件。

我嘗試用touchend事件來替代tap，無效。

最後是在回到外頁以後，給 a添加href的代碼加上setTimeout，這樣問題解決了，可是並不知道是否是最好的解決方法~歡迎指正。

更新一下，這裏出現問題的緣由是我先阻止了默認事件，而後再給a添加href，添加以後其實阻止默認事件已經無效了，因此href連接生效，跳轉。

這樣寫很容易解決了

$('.back').on('tap',function(e){
        $('.back').attr('href','lock://back');
        e.preventDefault();
      })

 

 

7. ajax返回json

   在ajax請求成功返回response後，js默認response是一個字符串。要將它解析爲json格式有兩種方法。

  (1)在請求時添加參數 dataType: JSON  //(jquery)

  (2) 使用JSON.parse方法

　　

var _response = JSON.parse(response);

 

8 popup 畫面模糊

   我用css3作了一個popup，彈窗有一個scale的transition。遇到了一個很痛苦的問題，困擾了本身好久。

　在小米手機中(不管二三紅不紅)，在動畫進行和結束時，彈窗會變的很模糊，能夠認爲瀏覽器是認爲scale以前(scale(0,0,0))的大小纔是元素的原始大小，而後在此基礎上進行縮放。

   查了好多文檔都沒有結果，最後仍是我頭兒英明，解決方法時候在動畫結束後須要手動移除scale的class,彈窗顯示就正常啦~

9 浮點運算

   這是js相傳已久的bug了，js在進行浮點運算時候會出很奇葩的bug.

　　

 alert(4.2+9.2)  // 13.399999999999999

解決方法有不少，根據需求，我這裏用了最簡單最省事的tofix().

---

10 回頭看本身的代碼

  (1)由於是靜態的，因此若是有複用的html只能笨拙的複製粘貼。若是時間足夠的話，我會嘗試用handlebars來模板化本身的代碼。

  (2)js也有不少地方是能夠複用的，若是用prototype來寫能夠節省一半的代碼。出現這問題是水平不夠。

  (3)耐心不夠。當測試給我返回一堆一堆bug的時候，我以爲浮躁，只想把bug趕忙解決了，不能跳出去看本身的代碼。下場是在解決一箇舊bug後又致使了一個新的bug，不管是對測試仍是本身，工做效率都大大下降了。

     不管何時，都要keep calm and carry on

目前就這麼多了~

 

ps：

協同開發感受是很難解決的問題。

此次項目後臺用的python，由於時間很緊，因此前端後臺同時開發。

形成的問題是我這裏每次修改一個地方，後臺都要跟着修改本身的template，若是修改的地方不少，後臺就要浪費不少時間在重寫模板上，也不知道有什麼比較好的方法。