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視頻，因此能實現阻止瀏覽器進入睡眠狀態，從而保持屏幕常亮