【VUE】app混合开发之添加手机端调试控制台vconsole

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