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

当内嵌在app内的h5页面出现错误时,无法像在电脑一样按f12调试,查看报错信息,这时候就可以用上vconsole

简单的用法是:
下载 vConsole 的最新版本或者使用 npm 安装:npm install vconsole

/*index.html */

   
<script src="static/vconsole.min.js">script>   
<script>
  // 初始化
  var vConsole = new VConsole();
  console.log('Hello world');
script>

但其实这样,会一直显示着,如果一不小心待到生产环境就不好了,这便需要触发时显示更友好,当这时候就要介绍下AlloyLever,用法是如下:

/*index.html */

<body>
   
    <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>

    
    <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的魔窗链接,这个魔窗功能是其他同事实现的,等有时间研究下,再写关于魔窗的用法

你可能感兴趣的:(vue)