前言
此教程是在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