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属性才可以实现自动播放,比如可以把加载好的播放器实例提前保存,当用户点击播放按钮后在点击的回调里触发播放器的播放事件。

你可能感兴趣的:(Vue移动端开发问题纪要)