H5如何保持屏幕常亮—nosleep.js

前言

此教程是在vue中引入nosleep.js，并使用。

安装 nosleep.js

npm install nosleep.js

引入

在main.js中引入

import NoSleep from "nosleep.js/dist/NoSleep.min.js";
 Vue.prototype.$NoSleep = NoSleep;

使用

//屏幕常亮
  noSleep () {
    let noSleep = new this.$NoSleep();
    document.addEventListener('click',
      function enableNoSleep () {
        noSleep.enable();
        document.removeEventListener('click', enableNoSleep, false);
      },
      false);
  },
 //在mounted调用
  this.noSleep()

tips: 必须点击一下屏幕，代码才能执行，不能使用touchstart等触摸事件，必须是html元素的原生事件如click事件等

NoSleep.js为何能实现屏幕常亮

浏览器在播放视频的时候，是不会进入睡眠状态的。所以若是H5应用能实现此功能，就能够阻止手机屏幕进入睡眠状态了，NoSleep.js它的原理就是模拟持续播放一小段MP4视频，因此能实现阻止浏览器进入睡眠状态，从而保持屏幕常亮