Vue移動(dòng)端開發(fā)問題紀(jì)要

UC瀏覽器兼容性問題

• 現(xiàn)象

在部分Android機(jī)型中的UC瀏覽器下訪問，出現(xiàn)白屏現(xiàn)象

• 解決

之前遇到過類似的問題，第一反應(yīng)應(yīng)該是babel-polyfill的問題，要么沒有引入要么是引入的方式不對(duì)。

看了一眼 main.js 中babel-polyfill的引入位置，之前并不是在最頂部的位置引入的，于是調(diào)整到最頂部的位置

import 'babel-polyfill'

import Vue from 'vue'

import ...

另外babel-polyfill還有另一種引入方式，在webpack的配置文件入口處，加入babel-polyfill

entry: {

    // app: './src/main.js'

    app: ['babel-polyfill','./src/main.js']

}

以上兩種方案嘗試過后，測(cè)試人員反饋問題依然存在。由于身邊沒有出錯(cuò)的真機(jī)，無法獲取報(bào)錯(cuò)信息，于是只好去搜索引擎和github上繼續(xù)根據(jù)現(xiàn)象尋找解決方式。

在這個(gè)名為“vue-cli創(chuàng)建的項(xiàng)目打包后在安卓手機(jī)qq瀏覽器和uc瀏覽器頁面空白”issue中，有人提出說鎖定webpack-dev-server的版本可以解決問題：

我這邊把webpack-dev-server鎖定到2.7.1版本就可以用了，你們可以試下

于是決定嘗試一下，測(cè)試環(huán)境更新代碼后，測(cè)試人員反饋白屏問題依然存在。意識(shí)到這種漫無目的的方式并不能快速解決問題，接下來便尋求于尋找真機(jī)測(cè)試獲取報(bào)錯(cuò)信息，根據(jù)控制臺(tái)報(bào)錯(cuò)信息定位并解決問題。

之前有用過百度和騰訊的幾款移動(dòng)測(cè)試平臺(tái)可以遠(yuǎn)程真機(jī)調(diào)試。百度的移動(dòng)云真機(jī)測(cè)試倒是有對(duì)應(yīng)的機(jī)型，但是收費(fèi)策略調(diào)整后現(xiàn)在是完全收費(fèi)了。騰訊的幾款，有的是沒有對(duì)應(yīng)機(jī)型，有的需要VIP權(quán)限（變相收費(fèi)）。

想到是否有類似全局的錯(cuò)誤事件，如果有的話直接在事件中alert出錯(cuò)誤信息，再讓測(cè)試人員截圖，不必真機(jī)調(diào)試就能獲取報(bào)錯(cuò)信息了。window.onerror正好可以解決這個(gè)問題。等到測(cè)試環(huán)境代碼更新后，正好到了下班時(shí)間，打算第二天繼續(xù)測(cè)試，讓測(cè)試人員看是否有錯(cuò)誤彈窗。

第二天測(cè)試人員告訴我，問題機(jī)型的UC瀏覽器可以正常訪問了。猜測(cè)可能是測(cè)試時(shí)上面的幾種改動(dòng)由于緩存沒有及時(shí)生效，到了第二天才生效。

某些特殊css屬性打包后消失的問題

• 現(xiàn)象

-webkit-box-orient: vertical;這個(gè)css屬性在開發(fā)環(huán)境可以生效，卻在打包后的測(cè)試環(huán)境神奇的消失了！

• 解決

autoprefixer 的問題，在css屬性的前后加上如下的開啟和關(guān)閉autoprefixer 的注釋

/*! autoprefixer: off */

  -webkit-box-orient: vertical; // 參考 https://github.com/postcss/autoprefixer/issues/776

  /* autoprefixer: on */

FastClick與vue-video-player（video.js）沖突問題

• 現(xiàn)象

播放器在手機(jī)瀏覽器或者chrome開發(fā)者工具（手機(jī)模式）內(nèi)，點(diǎn)擊播放按鈕，播放與暫停事件會(huì)被觸發(fā)多次。

• 原因

是FastClick.js的bug，大概原因要從FastClick.js的原理說起。FastClick是為專門為解決移動(dòng)端瀏覽器300毫秒點(diǎn)擊延遲問題所開發(fā)的一個(gè)輕量級(jí)的庫。簡(jiǎn)而言之，F(xiàn)astClick在檢測(cè)到touchend事件的時(shí)候，會(huì)通過DOM自定義事件立即觸發(fā)一個(gè)模擬click事件的click事件（自定義事件），并把瀏覽器在300毫秒之后真正觸發(fā)的click事件阻止掉。FastClick非常實(shí)際地解決300毫秒點(diǎn)擊延遲的問題。

那么bug發(fā)生的地方就是在阻止300毫秒之后真正觸發(fā)的click事件這個(gè)階段。如果阻止失敗的話，相當(dāng)于再次觸發(fā)了點(diǎn)擊事件，就會(huì)產(chǎn)生播放與暫停相繼多次觸發(fā)的問題。

• 解決

解決方式粗暴了一些，參考了這個(gè)博客中作者的解決方式。通過修改FastClick.js的源碼，增加了vjs這個(gè)class的驗(yàn)證。

<video>在微信瀏覽器自動(dòng)播放問題

• 現(xiàn)象

需求是在視頻列表頁顯示視頻封面以及播放按鈕，為了提高頁面性能以及兼容某些手機(jī)瀏覽器廠商，避免一些用戶體驗(yàn)問題，此時(shí)并未顯示video標(biāo)簽，當(dāng)點(diǎn)擊某個(gè)視頻的播放按鈕后，顯示一個(gè)全屏的視頻，并自動(dòng)開始播放。問題就是當(dāng)顯示全屏的視頻時(shí)，通過內(nèi)部的狀態(tài)控制自動(dòng)播放是不生效的，就會(huì)造成這樣的現(xiàn)象：在列表頁點(diǎn)擊視頻播放按鈕后，需要再點(diǎn)擊一次播放按鈕才能播放。

• 原因

autoplay的支持依賴內(nèi)核和網(wǎng)絡(luò)狀況，比如iPhone在蜂窩網(wǎng)絡(luò)下明確禁用了autoplay；

經(jīng)過試驗(yàn)，在沒有明確的用戶操作的情況下，直接通過video.play()也是無法激活播放的；

• 解決

微信上播放視頻必須是用戶點(diǎn)擊實(shí)際的dom后再調(diào)用播放器的play屬性才可以實(shí)現(xiàn)自動(dòng)播放，比如可以把加載好的播放器實(shí)例提前保存，當(dāng)用戶點(diǎn)擊播放按鈕后在點(diǎn)擊的回調(diào)里觸發(fā)播放器的播放事件。