微信公衆號之兼容性

如今主要負責移動端微信公衆號的開發。在開發過程當中遇到了許多兼容性問題。前端框架是vue全家桶。

問題1： 

          當點擊輸入框式會彈出系統鍵盤， 鍵盤會將整個窗口向上頂，致使整個窗口變短，從而引發樣式，元素定位異常，很是不美觀。在取消鍵盤後Android中會恢復窗口大小， ios不會「滾回來」。

Android和ios表現相似，但原理不一樣。Android 中鍵盤彈出直接改變了視窗大小，ios是將整個視窗往上頂滾動必定大小。

          解決方法：（1） 因爲ios中點擊鍵盤完成按鈕會觸發輸入框失去焦點事件， 那麼統一封裝input, textarea組件， 讓其在失去焦點事件讓瀏覽器重繪便可。具體可參考http://www.cocoachina.com/ios/20181225/25941.html

                               (2)  Android中會恢復窗口大小，那麼咱們須要注意的就是鍵盤顯示時的異常狀況。一方面咱們要儘可能避免使用高度100%，儘量給定元素固定高度，這樣看起來就像是鍵盤將超出窗口部分正常遮蓋，並沒有異常。特別須要注意的就是絕對定位，固定定位的元素。在一些特殊狀況下能夠特殊處理， 好比監測窗口高度，在高度變化時作某些特殊操做來提升用戶體驗。能夠參考 http://www.javashuo.com/article/p-vurledif-bh.html

 

問題2： 微信瀏覽器中滾動問題

              在微信瀏覽器中， 使用原生滾動在移動端體驗較差。 出現滾動條， 滾動不連貫， -webkit-overflow-scrolling:touch卡死， 不能下拉刷新。

             解決： 使用transfrom：translate(x,y)來模擬滾動。better-scroll（https://www.npmjs.com/package/better-scroll） 解決了這個問題。在項目中將better-scroll二次封裝使用。固然，better-scroll還有點小坑，踩踩更健康。

問題3：