当内嵌在app内的h5页面出现错误时,无法像在电脑一样按f12调试,查看报错信息,这时候就可以用上vconsole
简单的用法是:
下载 vConsole 的最新版本或者使用 npm 安装:npm install vconsole
/*index.html */
但其实这样,会一直显示着,如果一不小心待到生产环境就不好了,这便需要触发时显示更友好,当这时候就要介绍下AlloyLever,用法是如下:
/*index.html */
但为了防止用户误操作点击触发了,便给了AlloyLever点击间隔时间,在文件alloy-lever.js找到AlloyLever.entry = function(selector){}
AlloyLever.entry = function(selector) {
// 自己加的
var firstTime = 0; //第一次点击时间
var secondTime = 0; //第二次点击时间
var timeBucket = 0; //两次点击时间差
var flag = true; //判断是第几次点击的状态
var count = 0,
entry = document.querySelector(selector)
if(entry) {
entry.addEventListener('click', function () {
var date = new Date(); //点击后首先获取当前时间
var seconds = date.getTime(); //获取毫秒数
if(flag){ //前次点击
firstTime = seconds; //前次点击时间
flag = false;
}else{
secondTime = seconds; //时间赋给后次点击
flag = true;
}
timeBucket = Math.abs(secondTime - firstTime); //时间差
// console.log(firstTime);
// console.log(secondTime);
if(secondTime == 0){ //如果是第一次点击,则执行以下代码
count++;
}else{
if(timeBucket > 1000){ //如果两次点击间隔大于5秒时;
count = 0; //正常有效执行加1
console.log("点太慢了,请重新点击!");
}else{ //如果两次点击间隔小于1秒,则执行以下代码
count++
if (count > 10) {
count = -10000
AlloyLever.vConsole(true)
}
console.log("已经点了" + count + '下' );
}
}
// count++
// if (count > 5) {
// count = -10000
// AlloyLever.vConsole(true)
// }
})
}
}
最后给一个在非app端打开h5页面时,需要跳到下载app的魔窗链接,这个魔窗功能是其他同事实现的,等有时间研究下,再写关于魔窗的用法