前端學習---移動端vue開發踩坑記

前言：

大概兩個月前投身於一個項目中去，項目是一個移動端的項目，所選用的框架是時下比較流行的vue。這篇文章也是針對這個項目和之前本身學習時的一些總結，包括一些通用的移動端開發要注意的事項、vue開發遇到的一些問題。本文的目的是爲了在之後的開發中咱們能夠避免這些坑，提升咱們的開發效率。

 

1、移動端開發特有問題：

一、移動端樣式的兼容性：

在當前移動端的開發要面對各類不一樣的手機，不一樣的手機DPI也是不一樣的，好比Iphone 8的DPI就是2，Iphone 8P的DPI就是3。爲了讓頁面能夠兼容不一樣的手機，解決方案以下：

　　1）對手機的視口進行設置強行無視設備的真實分辨率，設置最大最小的縮放比例而且禁止用戶進行縮放，從而達到統一的分辨率的效果。

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0,use-scalable=no"

 　　2）針對不一樣的手機對2x和3x的圖片進行處理：我採用stylus本身定義了一個方法來解決。在須要的地方直接引入便可。

bg-image($url) background-image url($url + "@2x.png") @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3) background-image url($url + "@3x.png")

二、移動端點擊延時的問題：

這個問題我以前並無注意到，甚至不知道本身遇到過，我是經過論壇看到移動端開發會出現300ms的延時，每每會形成點擊延遲甚至是點擊失效的bug。形成這個問題的緣由是因爲移動端瀏覽器存在雙擊縮放的問題。解決這個問題能夠採用：

　　1）採用一個插件fastclick解決，代碼也十分簡潔，在入口 註冊後，直接採用下面代碼。其實也能夠本身實現fastclick的功能：自定義click阻止默認click事件的冒泡及默認行爲。

fastClick.attach(document.body);

　　2）如果項目的兼容性要求比較低的話，能夠加上一個meta標籤。

<meta name="viewport" content="width=device-width">

三、在IOS在英文輸入首字母大寫：

　　採用input的autocapitalize屬性對首字母大小寫進行設置：

<input type="text" autocapitalize="none" class="box">

四、長時間點擊頁面會發生閃退的問題：

　　在進行移動端項目調試的時候，可能出現的一個問題就是長時間按住會出現閃退，能夠經過如下代碼解決。

element {-webkit-touch-callout: none;}

五、在有輸入框時進行其餘操做不自動失焦：

　　本項目中有一個搜索界面，在搜索時對搜索結果進行下滑，輸入框不會自動失焦，手機鍵盤不會隱藏，因而能夠採用對元素進行手動blur。

六、移動端左右滑動會出現白條：

　　在項目開發以前能夠對項目進行CSSreset：設置html，body的width爲100%，overflow：hidden就能夠了。

 

 

2、Vue使用時遇到的一些問題：

這部分並非什麼高深的技術文章，而是記錄遇到的一些問題。

0、最重要的一點，也是放在最前面：Vue的生命週期真的很重要！很重要！重要！在使用vue進行開發的過程當中，項目越大、須要的時間類型越多、數據越多等就會愈來愈感受生命週期的重要性。在vue的官方文檔中對生命週期有着很詳細的說明，你們能夠自行閱讀。

一、文件路徑過於冗長或者相對路徑過於麻煩：

　　經過webpack自定義路徑別名，就能夠

// build/webpack.base.js
{ resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), '~': resolve('src/components') } } }

 

二、組件中的樣式會相互影響。

　　經過爲組件中的style標籤添加scoped屬性就會是組件的樣式不會外溢。Vue的scoped是經過爲組件添加惟一的屬性標識來實現樣式不會污染其餘組件同名元素的。

三、vue對輸入的文字時時響應：

　　用過vue的人都知道，vue有一個很是重要的功能就是實現了雙向數據綁定，這對於咱們開發來講有着很重要的用途。可是我在進行一個搜索組件開發的過程當中就發現了一個問題，因爲搜索的數據是經過線上抓取的，當在輸入框輸入要搜索的信息時，搜索列表會自動加載出來。每次按鍵都會發送一個請求，這樣就大大增長了流量的消耗。因而我採用了一個數據節流的方法，設置了一個延時函數，每0.3S對輸入的數據進行檢查，而不是同步數據綁定。

四、Vuex的使用：

　　Vuex對於vue，就至關於Redux對於react同樣。它是vue的狀態管理模式，在多個組件共享狀態的狀況下，採用vuex就顯得很是重要了。

　　由於組件一旦多了起來，不一樣組件之間數據的流動就會變得十分繁瑣而且難以維護，尤爲是在兄弟組件進行通訊時，就顯得格外麻煩。當兄弟組件進行通訊時，首先須要一個父組件，子組件經過$dispatch向父組件進行通訊，而後再由父組件進行廣播事件$broadcast傳遞給各個子組件。真個過程十分繁瑣而且難以調試。

　　在使用vuex遇到了這個問題：對vuex的使用時每次Store載入新的數據都會形成卡屏的現象，在瞭解vue的原理後知道這是因爲爲了獲得數據到試圖的響應式變化， 會對Store中的每一個對象添加setter和getter方法以實現對數據的監聽（髒檢查），可是有大量數據進入store的時候， 對每一個對象都進行這樣的操做會消耗大量的時間，所以形成卡屏的現象。我想採用的方法是是應用freeze方法凍結對象， 避免vue對每一個對象都進行操做，不直接訪問state裏的屬性，而是採用改變Index使vue的getter間接訪問。

五、父子元素同時綁定click事件：

　　在開發的過程當中，咱們常常會遇到父子元素都綁定一個事件，當點擊子元素的時候因爲事件的冒泡機制會形成對父元素事件的觸發。在原生JS中咱們能夠採用event.stopPropagation()阻止時間冒泡。那麼在vue中如何解決這個問題。咱們只須要在click後面加上一個.stop就能夠了。

 

以上就是最近一段時間針對移動端開發和vue使用所遇到的一些狀況。若是有不會的地方，能夠留言給我，或給我發郵件lml19960131@126.com。讓咱們共同進步！^_^

 若是文章對您來講有用的話能夠給我一個star嗎？https://github.com/lml19960131/music-ml