Vue移動端開發問題紀要
UC瀏覽器兼容性問題
- 現象
在部分Android機型中的UC瀏覽器下訪問，出現白屏現象
- 解決
之前遇到過類似的問題，第一反應應該是babel-polyfill的問題，要么沒有引入要么是引入的方式不對。
看了一眼 main.js 中babel-polyfill的引入位置，之前并不是在最頂部的位置引入的，于是調整到最頂部的位置
import 'babel-polyfill'
import Vue from 'vue'
import ...
另外babel-polyfill還有另一種引入方式，在webpack的配置文件入口處，加入babel-polyfill
entry: {
// app: './src/main.js'
app: ['babel-polyfill','./src/main.js']
}
以上兩種方案嘗試過后，測試人員反饋問題依然存在。由于身邊沒有出錯的真機，無法獲取報錯信息，于是只好去搜索引擎和github上繼續根據現象尋找解決方式。
在這個名為“vue-cli創建的項目打包后在安卓手機qq瀏覽器和uc瀏覽器頁面空白”issue中，有人提出說鎖定webpack-dev-server的版本可以解決問題：
我這邊把webpack-dev-server鎖定到2.7.1版本就可以用了，你們可以試下
于是決定嘗試一下，測試環境更新代碼后，測試人員反饋白屏問題依然存在。意識到這種漫無目的的方式并不能快速解決問題，接下來便尋求于尋找真機測試獲取報錯信息，根據控制臺報錯信息定位并解決問題。
之前有用過百度和騰訊的幾款移動測試平臺可以遠程真機調試。百度的移動云真機測試倒是有對應的機型，但是收費策略調整后現在是完全收費了。騰訊的幾款，有的是沒有對應機型，有的需要VIP權限（變相收費）。
想到是否有類似全局的錯誤事件，如果有的話直接在事件中alert出錯誤信息，再讓測試人員截圖，不必真機調試就能獲取報錯信息了。window.onerror正好可以解決這個問題。等到測試環境代碼更新后，正好到了下班時間，打算第二天繼續測試，讓測試人員看是否有錯誤彈窗。
第二天測試人員告訴我，問題機型的UC瀏覽器可以正常訪問了。猜測可能是測試時上面的幾種改動由于緩存沒有及時生效，到了第二天才生效。
某些特殊css屬性打包后消失的問題
- 現象
-webkit-box-orient: vertical;這個css屬性在開發環境可以生效，卻在打包后的測試環境神奇的消失了！
- 解決
autoprefixer 的問題，在css屬性的前后加上如下的開啟和關閉autoprefixer 的注釋
/*! autoprefixer: off */
-webkit-box-orient: vertical; // 參考 https://github.com/postcss/autoprefixer/issues/776
/* autoprefixer: on */
FastClick與vue-video-player（video.js）沖突問題
- 現象
播放器在手機瀏覽器或者chrome開發者工具（手機模式）內，點擊播放按鈕，播放與暫停事件會被觸發多次。
- 原因
是FastClick.js的bug，大概原因要從FastClick.js的原理說起。FastClick是為專門為解決移動端瀏覽器300毫秒點擊延遲問題所開發的一個輕量級的庫。簡而言之，FastClick在檢測到touchend事件的時候，會通過DOM自定義事件立即觸發一個模擬click事件的click事件（自定義事件），并把瀏覽器在300毫秒之后真正觸發的click事件阻止掉。FastClick非常實際地解決300毫秒點擊延遲的問題。
那么bug發生的地方就是在阻止300毫秒之后真正觸發的click事件這個階段。如果阻止失敗的話，相當于再次觸發了點擊事件，就會產生播放與暫停相繼多次觸發的問題。
- 解決
解決方式粗暴了一些，參考了這個博客中作者的解決方式。通過修改FastClick.js的源碼，增加了vjs這個class的驗證。
<video>在微信瀏覽器自動播放問題
- 現象
需求是在視頻列表頁顯示視頻封面以及播放按鈕，為了提高頁面性能以及兼容某些手機瀏覽器廠商，避免一些用戶體驗問題，此時并未顯示video標簽，當點擊某個視頻的播放按鈕后，顯示一個全屏的視頻，并自動開始播放。問題就是當顯示全屏的視頻時，通過內部的狀態控制自動播放是不生效的，就會造成這樣的現象：在列表頁點擊視頻播放按鈕后，需要再點擊一次播放按鈕才能播放。
- 原因
autoplay的支持依賴內核和網絡狀況，比如iPhone在蜂窩網絡下明確禁用了autoplay；
經過試驗，在沒有明確的用戶操作的情況下，直接通過video.play()也是無法激活播放的；
- 解決
微信上播放視頻必須是用戶點擊實際的dom后再調用播放器的play屬性才可以實現自動播放，比如可以把加載好的播放器實例提前保存，當用戶點擊播放按鈕后在點擊的回調里觸發播放器的播放事件。
