vue如何sleep_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视频，所以能实现阻止浏览器进入睡眠状态，从而保持屏幕常亮

作者：yaoxfly