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()
      }
    }

后记

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

附录

• 附录见原文末尾： 我的博客