当内嵌在app内的h5页面出现错误时，无法像在电脑一样按f12调试，查看报错信息，这时候就可以用上vconsole
简单的用法是：
下载 vConsole 的最新版本或者使用 npm 安装：npm install vconsole
/*index.html */
<!-- src是vconsole.min.js的文件位置 -->
<script src="static/vconsole.min.js"></script>
<script>
// 初始化
var vConsole = new VConsole();
console.log('Hello world');
</script>
但其实这样，会一直显示着，如果一不小心待到生产环境就不好了，这便需要触发时显示更友好，当这时候就要介绍下AlloyLever，用法是如下：
/*index.html */
<body>
<!-- id为entry是触发显示vconsole的div -->
<div id="entry" style="position: absolute;top: 0;right: 0;z-index:999;width: 30px;height: 40px;background: transparent"></div>
<!-- 这是显示的内容 -->
<div id="app-box"></div>
</body>
<!-- src是alloy-lever.js的文件位置 -->
<script src="static/alloy-lever.js"></script>
<script>
AlloyLever.config({
cdn:'//s.url.cn/qqun/qun/qqweb/m/qun/confession/js/vconsole.min.js', //vconsole CDN address
reportUrl: "//a.qq.com", //Error reporting address
reportPrefix: 'qun', //An error reporting msg prefix is generally used to differentiate business types
reportKey: 'msg', //Error reporting msg prefix key, user reporting system receives storage msg
otherReport: { //Other information to be reported
uin: 491862102
},
entry:"#entry" //请点击这个DOM元素召唤vConsole 6次。 您可以使用AlloyLever.entry(# entry2)添加更多的条目})
})
console.log('this is log content')
</script>
但为了防止用户误操作点击触发了，便给了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的魔窗链接，这个魔窗功能是其他同事实现的，等有时间研究下，再写关于魔窗的用法
网友评论