app混合開發之新增除錯控制檯vconsole
阿新 • • 發佈：2019-02-07
當內嵌在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' 但其實這樣，會一直顯示著，如果一不小心待到生產環境就不好了，這便需要觸發時顯示更友好，當這時候就要介紹下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>
<!-- 這是顯示的內容 --> 但為了防止使用者誤操作點選觸發了，便給了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)
// }
})
}
}