BUG背景

触发环境

  1. MI 5 或 MI 6(三星没问题)
  2. 钉钉3.5.3(开发版没问题)Webview [WebKit 537.36 Chrome 57.0.2987.132](识别方法见文末)
  3. video.js 6.2.4 + vue-video-player 4.0.3

触发条件

  1. 进入video 页面,点击全屏按钮(屏幕无法自动横屏,视频在屏幕中间,上下都是黑屏)
  2. 再次点击全屏按钮(退出全屏)或者点击 mi5 的后退按钮(直接返回上一页)
  3. 退出全屏后页面上或者其他页面上有 input 框,点击 input 框,虚拟键盘无法弹出

BUG分析

机型

  • 暂时只测试 两台 MI5,一台 MI6,一台三星,只有小米有问题,iphone均无问题
  • 小米自带浏览器无问题、小米中微信 webview 无问题、小米中安装 Chrome 57.0.2987.132 也无问题(Chrome 各个版本下载见文末)

钉钉

  • 钉钉开发版 3.5.3 无问题,正式版 3.5.3 有问题

插件

  • 官方 repo 上的 issues 未找到相似问题
  • 未使用其他插件测试

BUG解决

解决思路

  • 由上面分析可知,该BUG 与小米相关度较大,与钉钉相关度较大,所以从小米手机和钉钉官方入手寻找解决方案
  • 小米论坛、MIUI论坛和阿里官方论坛未找到相关信息
  • 一个解决思路是:退出全屏后刷新当前页面,记录并设置视频播放位置,经实验退出全屏后直接刷新页面也无法触发软键盘(除非重新打开页面)
  • 一个方法可解决:当无法弹出软件盘时,呼出小米的任务管理,重新切换进钉钉,即可弹出软键盘

解决方案

  • 由于我们是基于钉钉开发的微应用,钉钉有相应的 JS-SDK 来调用原生功能,再加上上面呼出任务管理可以解决,所以打算从钉钉方面入手,看是否能达到与呼出小米任务管理相同的效果(如果是 android 工程师可能会考虑 activity 方面的问题吧)
  • 使用钉钉的 JS-API 中 prompt 弹窗发现可以解决
  • 顺着思路使用 showPreloader + hidePreloader 问题解决,界面上完全看不出来有加载中

相关代码

  • 最终的代码需要相关浏览器的 Fullscreen API ,详见文末,由于我们只用适配钉钉,所以使用的是 webkitfullscreenchange 监听是否全屏
    document.addEventListener('webkitfullscreenchange', handleFullScreen)
  • 而在 handleFullScreen 中,使用document.webkitIsFullScreen 来判断当前是否是全屏,同样也只支持 webkit 内核,其他内核 demo 可以看 文末MDN 上的例子
    function handleFullScreen (e) {
      if (document.webkitIsFullScreen) {
        console.log('fullscreen')
      } else {
        console.log('exit fullscreen')
        dd.device.notification.showPreloader()
        dd.device.notification.hidePreloader()
      }
    }

后记

  • 看来多学几种语言还是很有用的。。。

附录


savokiss
6.2k 声望4.5k 粉丝

You know nothing, SpongeBob.