Vue移动端开发问题纪要

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标签，当点击某个视频的播放按钮后，显示一个全屏的视频，并自动开始播放。问题就是当显示全屏的视频时，通过内部的状态控制自动播放是不生效的，就会造成这样的现象：在列表页点击视频播放按钮后，需要再点击一次播放按钮才能播放。

• 原因

autoplay的支持依赖内核和网络状况，比如iPhone在蜂窝网络下明确禁用了autoplay；

经过试验，在没有明确的用户操作的情况下，直接通过video.play()也是无法激活播放的；

• 解决

微信上播放视频必须是用户点击实际的dom后再调用播放器的play属性才可以实现自动播放，比如可以把加载好的播放器实例提前保存，当用户点击播放按钮后在点击的回调里触发播放器的播放事件。