diff --git a/miniprogram/app.ts b/miniprogram/app.ts index a769922..eb3c646 100644 --- a/miniprogram/app.ts +++ b/miniprogram/app.ts @@ -1,6 +1,5 @@ -import { Logger } from "./logger/Logger"; -import { LevelLogLabel } from "./logger/LevelLogLabel"; -import { LifeCycleLogLabel } from "./logger/LifeCycleLogLabel"; +import { Logger } from "./core/Logger"; +import { LevelLogLabel, LifeCycleLogLabel } from "./core/PresetLogLabel"; App({ diff --git a/miniprogram/core/Config.ts b/miniprogram/core/Config.ts index 823c874..d019c94 100644 --- a/miniprogram/core/Config.ts +++ b/miniprogram/core/Config.ts @@ -10,6 +10,13 @@ */ export const LOGGER_CONSOLE:boolean = true; +/** + * 是否在控制台输出时启用标签样式 + * 如果在手机上调试可以关闭此选项 + * 因为手机上的控制台无法正确显示样式 + */ +export const LOGGER_STYLE:boolean = true; + /** * 调试过滤器 * 按照 LogLabel 进行过滤 diff --git a/miniprogram/core/Logger.ts b/miniprogram/core/Logger.ts index de64257..c1c5b0a 100644 --- a/miniprogram/core/Logger.ts +++ b/miniprogram/core/Logger.ts @@ -1,4 +1,4 @@ -import { LOGGER_FILTER, LOGGER_CONSOLE } from "./Config"; +import { LOGGER_FILTER, LOGGER_CONSOLE, LOGGER_STYLE } from "./Config"; import { StackLogLabel } from "./PresetLogLabel"; import { LogLabel } from "./LogLabel"; @@ -82,30 +82,41 @@ class Logger { */ public static calcStyle(...labels:LogLabel[]):[string[], string[]] { - // 过滤出需要显示的 Labels - let labelsNeedRender:LogLabel[] = labels.filter((label:LogLabel)=>{ - return label.display - }); - let consoleLabels:string[] = []; let consoleStyles:string[] = []; // 放置标签 - for(let i = 0; i < labelsNeedRender.length; i++) { + for(let i = 0; i < labels.length; i++) { consoleLabels.push(labels[i].getLoggerOutput()); - if (i !== ( labelsNeedRender.length - 1)) + if (i !== ( labels.length - 1)) consoleLabels.push("%c "); - consoleStyles.push(labelsNeedRender[i].getStyleOutput()); + consoleStyles.push(labels[i].getStyleOutput()); - if (i !== ( labelsNeedRender.length - 1)) + if (i !== ( labels.length - 1)) consoleStyles.push(""); } return [consoleLabels, consoleStyles]; } + /** + * 收集计算标签没有样式 + * @param labels 标签 + */ + public static calcLabel(...labels:LogLabel[]):string[] { + + let consoleLabels:string[] = []; + + // 放置标签 + for(let i = 0; i < labels.length; i++) { + consoleLabels.push(labels[i].getTextOutput()); + } + + return consoleLabels + } + /** * 基础调试输出 * 其他的 Log 函数都是基于此封装 @@ -122,11 +133,30 @@ class Logger { if(!Logger.testLog(...labels, ...attachLabel, StackLogLabel.filterUrlLabel)) return content.getContent(); - // 计算收集样式 - let [consoleLabels, consoleStyles]= Logger.calcStyle(...labels, ...attachLabel); + // 过滤出需要渲染的 Labels + let labelsNeedRender:LogLabel[] = [...labels, ...attachLabel].filter((label:LogLabel)=>{ + return true + }); - // 调试输出 - console.log(consoleLabels.join(""), ...consoleStyles, ...content.getContent()); + // 使用样式输出 + if(LOGGER_STYLE) { + + // 计算收集样式 + let [consoleLabels, consoleStyles]= Logger.calcStyle(...labelsNeedRender); + + // 调试输出 + console.log(consoleLabels.join(""), ...consoleStyles, ...content.getContent()); + + } else { + + // 计算收集标签 + let consoleLabels= Logger.calcLabel(...labelsNeedRender); + + // 输出 + console.log(consoleLabels.join(" "), ...content.getContent()); + } + + return content.getContent(); } diff --git a/miniprogram/core/Module.ts b/miniprogram/core/Module.ts index 802563f..6fdf8c2 100644 --- a/miniprogram/core/Module.ts +++ b/miniprogram/core/Module.ts @@ -400,7 +400,7 @@ class Manager { if(this.modules[i].data !== void 0) { this.context.data[`${ this.modules[i].nameSpace }$${ key }`] = ( this.modules[i].data as IAnyTypeObject )[key]; - // this.modules[i] + this.modules[i].paramList.add(key); } } } @@ -425,7 +425,7 @@ class Manager { func.push(`[${ key }]`); } - let log:string = `模块 [${ this.modules[i].nameSpace }] 加载完成...\n`; + let log:string = `模块 [${ this.modules[i].nameSpace }] 完成绑定...\n`; if(data.length > 0) log += `Using Props: ${ data.join(", ") }\n`; if(func.length > 0) log += `Using Function: ${ func.join(", ") }\n`; diff --git a/miniprogram/core/PresetLogLabel.ts b/miniprogram/core/PresetLogLabel.ts index f456418..b2c5cd7 100644 --- a/miniprogram/core/PresetLogLabel.ts +++ b/miniprogram/core/PresetLogLabel.ts @@ -99,7 +99,7 @@ class StackInfo { /** * 排除的 */ - public static readonly excludeFile:RegExp = /^.*(\\|\/)logger(\\|\/).+\.js:\d+:\d+/; + public static readonly excludeFile:RegExp = /^.*(\\|\/)core(\\|\/)(.*Log.*).js:\d+:\d+/; /** * 获取第一个调用栈 @@ -179,7 +179,7 @@ class StackLogLabel { /** * 生成圆角颜色标签样式 */ - const normalLevelStyleGen = (color:string):LogStyle => { +const normalLevelStyleGen = (color:string):LogStyle => { return new LogStyle().setBorder("4px", `1px solid ${color}`) .setColor(color).setBlank("0 5px"); } @@ -235,7 +235,7 @@ class LevelLogLabel { /** * 生成圆角颜色标签样式 */ - const normalLifeStyleGen = (r:number, g:number, b:number):LogStyle => { +const normalLifeStyleGen = (r:number, g:number, b:number):LogStyle => { return new LogStyle().setBorder("4px", `1px solid rgb(${ r }, ${ g }, ${ b })`) .setColor(`rgb(${ r }, ${ g }, ${ b })`, `rgba(${ r }, ${ g }, ${ b }, .1)`) .setBlank("0 5px"); @@ -310,4 +310,4 @@ class LifeCycleLogLabel { ); } -export { StackInfo, StackLogLabel, LevelLogLabel, LifeCycleLogLabel }; \ No newline at end of file +export { StackInfo, StackLogLabel, LevelLogLabel, LifeCycleLogLabel, normalLifeStyleGen as colorRadio }; \ No newline at end of file diff --git a/miniprogram/pages/Timetable/StatusBar.ts b/miniprogram/pages/Timetable/StatusBar.ts new file mode 100644 index 0000000..a0f2b96 --- /dev/null +++ b/miniprogram/pages/Timetable/StatusBar.ts @@ -0,0 +1,78 @@ +import { Modular, Manager, ILifetime } from "../../core/Module"; +import { LevelLogLabel, LifeCycleLogLabel, colorRadio } from "../../core/PresetLogLabel"; +import { LogLabel } from "../../core/LogLabel"; +import { Logger } from "../../core/Logger"; + +/** + * 顶部状态栏 + */ +class StatusBar extends Modular +implements Partial { + + /** + * 页面日志输出标签 + */ + public static readonly StatusBarLabel = new LogLabel( + "StatusBar", colorRadio(255, 230, 222) + ); + + data = { + + // 状态栏高度 + barHeight: 65, + } + + /** + * 设置顶部状态栏高度 + */ + public setHeight() { + + let systemInfo = wx.getSystemInfoSync(); + let headerPos = wx.getMenuButtonBoundingClientRect(); + + //状态栏高度 + let statusBarHeight = Number(systemInfo.statusBarHeight); + + // 胶囊实际位置，坐标信息不是左上角原点 + let btnPosI = { + + // 胶囊实际高度 + height: headerPos.height, + width: headerPos.width, + + // 胶囊top - 状态栏高度 + top: headerPos.top - statusBarHeight, + + // 胶囊bottom - 胶囊height - 状态栏height （胶囊实际bottom 为距离导航栏底部的长度） + bottom: headerPos.bottom - headerPos.height - statusBarHeight, + + // 这里不能获取 屏幕宽度，PC端打开小程序会有BUG，要获取窗口高度 - 胶囊right + right: systemInfo.windowWidth - headerPos.right + } + + // 计算顶部导航栏高度 + let barHeight = btnPosI.height + btnPosI.top + statusBarHeight + btnPosI.bottom + + this.setData({ + + // 不知道为什么总是差 4px 距离 + // 别问为什么 加上就对了 + barHeight: barHeight + 4 + }); + + Logger.log(`计算并设置 StatusBar 的高度为: ${ barHeight + 4 }px`, + LevelLogLabel.DebugLabel, StatusBar.StatusBarLabel); + + } + + public onLoad() { + Logger.log("StatusBar模块加载...", + LevelLogLabel.TraceLabel, LifeCycleLogLabel.OnLoadLabel, StatusBar.StatusBarLabel); + + this.setHeight(); + } + +} + +export default StatusBar; +export { StatusBar }; \ No newline at end of file diff --git a/miniprogram/pages/Timetable/Timetable.scss b/miniprogram/pages/Timetable/Timetable.scss index ba845f6..b47f370 100644 --- a/miniprogram/pages/Timetable/Timetable.scss +++ b/miniprogram/pages/Timetable/Timetable.scss @@ -1,3 +1,9 @@ -// view.status-bar { -// // background-color: antiquewhite; -// } +view.status-bar { + background-color: #F8F8F8; +} + +@media (prefers-color-scheme: dark){ + view.status-bar { + background-color: #191919; + } +} diff --git a/miniprogram/pages/Timetable/Timetable.ts b/miniprogram/pages/Timetable/Timetable.ts index d39adb2..82a4874 100644 --- a/miniprogram/pages/Timetable/Timetable.ts +++ b/miniprogram/pages/Timetable/Timetable.ts @@ -1,85 +1,10 @@ -import { Logger } from "../../core/Logger"; -import { LevelLogLabel, LifeCycleLogLabel } from "../../core/PresetLogLabel"; -import { Manager, Modular, AnyWXContext, ILifetime } from "../../core/Module"; - -let manager; - -// Page({ - -// /** -// * 课程表页面加载 -// */ -// onLoad: async function (query) { - -// manager = new Manager(this); -// console.log(manager); - - -// // this.setData; - -// // Logger.log("课程表 (Timetable) 页面加载...", -// // LevelLogLabel.TraceLabel, LifeCycleLogLabel.OnLoadLabel); - -// // let systemInfo = wx.getSystemInfoSync(); - -// // //状态栏高度 -// // let statusBarHeight = Number(systemInfo.statusBarHeight); - -// // let menu = wx.getMenuButtonBoundingClientRect() - -// // //导航栏高度 -// // let navBarHeight = menu.height + (menu.top - statusBarHeight) * 2 - -// // //状态栏加导航栏高度 -// // let navStatusBarHeight = statusBarHeight + menu.height + (menu.top - statusBarHeight) * 2 - -// // console.log('状态栏高度',statusBarHeight) - -// // console.log('导航栏高度',navBarHeight) - -// // console.log('状态栏加导航栏高度',navStatusBarHeight) - -// // this.setData({barh: navStatusBarHeight}); - -// } - -// }) - +import { Manager} from "../../core/Module"; +import { StatusBar } from "./StatusBar"; +/** + * 此页面使用 Manager 进行模块化管理 + * 若要添加先功能请先定义 Modular 并添加至 Manager + */ Manager.Page((manager)=>{ - let m1 = manager.addModule(M1, "m1"); - let m2 = manager.addModule(M2, "m2", {m1}); -}) - - -class M1 extends Modular implements Partial { - - data = { - a:1, - b:{} - } - - public onLoad(){ - - } - - public onReady() { - console.log(this); - this.emit("lll", {a:1}) - } -} - -class M2 extends Modular}> { - - data = { - a: 1 - } - - public onLoad() { - this.setData({a:1}); - this.depends?.m1.on("lll", (e)=>{ - console.log(e) - }) - console.log(this); - } -} \ No newline at end of file + manager.addModule(StatusBar, "statusBar"); +}) \ No newline at end of file diff --git a/miniprogram/pages/Timetable/Timetable.wxml b/miniprogram/pages/Timetable/Timetable.wxml index 94c4bb7..72d1bdf 100644 --- a/miniprogram/pages/Timetable/Timetable.wxml +++ b/miniprogram/pages/Timetable/Timetable.wxml @@ -1,3 +1,5 @@ - -pages/Timetable/Timetable.wxml{{m1$a}} + + + +afdff \ No newline at end of file diff --git a/miniprogram/theme.json b/miniprogram/theme.json index 0a12255..f7a1521 100644 --- a/miniprogram/theme.json +++ b/miniprogram/theme.json @@ -1,6 +1,6 @@ { "light": { - "navigationBarBackgroundColor": "#f6f6f6", + "navigationBarBackgroundColor": "#f8f8f8", "navigationBarTextStyle": "black", "backgroundColor": "#f4f0f1",