app混合开发之添加调试控制台vconsole

最新推荐文章于 2024-07-23 17:38:32 发布

北极星丶超帅的

最新推荐文章于 2024-07-23 17:38:32 发布

阅读量5.8k

点赞数

分类专栏： vue 文章标签： app混合开发

本文链接：https://blog.csdn.net/Ercyao/article/details/80883799

版权

vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

当内嵌在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)
                // }
            })
        }
    }