Egret之VConsole

一 前景 :

移動端能夠使用方案(index.html)中 ,

可是 , 有一些缺陷
① , 需使用egret.log/warn/error來顯示(能夠接受)
② , 在Debug版本中才有用 , 在release版本中是不會打印到屏幕上的(沒法接受)
③ , 沒法滑動打印的日誌信息 , 不少信息會由於日誌瞬時打印過多而被刪除(沒法接受)

二 需求

不少時候 , 咱們須要在release版本中進行測試 . 例如支付功能等.

三 方案

VConsole , 下載地址 : https://github.com/Tencent/vConsole / 或者使用 nom install vconsole

使用方法在index.html
<script src="js/vconsole.min.js"></script> (注意路徑 , 根據實際狀況寫)

<script>

var vConsole = new VConsole();
vConsole.showSwitch();
vConsole.show();

</script>
使用console類便可 如 : console.log('Hello world');
註冊後 , 將在頁面的右下角顯示綠色按鈕以下:

和微信小遊戲一下哈 ,
連日誌界面都同樣

============具體實踐===========

前言 , 測試平臺Egret遊戲引擎.測試方法
將vConsole相關文件製做成類庫供egret引入
編寫測試方案

①,簡單的類庫製做方案:
將從GitHub下載的資源包中的dist文件夾(

)
中的2個文件,放入到新建的文件夾(consoleLib)中.以下圖所示

將vconsole.min.d.ts文件改成vconsole.d.ts , 複製一份vconsole.min.js文件 , 將其改成vconsole.js , 結果以下

將文件夾consoleLib放入目標Egret工程的平級目錄, 以下:

在Reflect_Demo中引入類庫

命令egret build -e 掃描加入類庫

運用:

window["vConsole"] = new window["VConsole"]({
            defaultPlugins: ['system', 'network', 'element', 'storage'], // 能夠在此設定要默認加載的面板
            maxLogNumber: 1000,
            // disableLogScrolling: true,
            onReady: function() {
                console.log('vConsole is ready.');
            },
            onClearLog: function() {
                console.log('on clearLog');
            }
        });
        egret.log("eg 0k");

結果

查看Log日誌: