增加vConsole调试工具
This commit is contained in:
kk
@@ -1,7 +1,8 @@
|
||||
|
||||
|
||||
// #ifndef VUE3
|
||||
import Vue from 'vue'
|
||||
import App from './App'
|
||||
import { initVConsole } from '@/utils/vconsole'
|
||||
|
||||
Vue.config.productionTip = false
|
||||
|
||||
@@ -11,15 +12,19 @@ const app = new Vue({
|
||||
...App
|
||||
})
|
||||
app.$mount()
|
||||
// #endif
|
||||
|
||||
// #endif
|
||||
|
||||
// #ifdef VUE3
|
||||
import { createSSRApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
export function createApp() {
|
||||
const app = createSSRApp(App)
|
||||
return {
|
||||
app
|
||||
}
|
||||
import { createSSRApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
import { initVConsole } from '@/utils/vconsole'
|
||||
export function createApp() {
|
||||
const app = createSSRApp(App)
|
||||
return {
|
||||
app
|
||||
}
|
||||
}
|
||||
// #endif
|
||||
// #endif
|
||||
|
||||
// 初始化 vConsole（开发环境）
|
||||
initVConsole()
|
||||
Generated
+61
@@ -0,0 +1,61 @@
|
||||
{
|
||||
"name": "consumer-front",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"dependencies": {
|
||||
"vconsole": "^3.15.1"
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/runtime": {
|
||||
"version": "7.29.7",
|
||||
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.7.tgz",
|
||||
"integrity": "sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=6.9.0"
|
||||
}
|
||||
},
|
||||
"node_modules/copy-text-to-clipboard": {
|
||||
"version": "3.2.2",
|
||||
"resolved": "https://registry.npmjs.org/copy-text-to-clipboard/-/copy-text-to-clipboard-3.2.2.tgz",
|
||||
"integrity": "sha512-T6SqyLd1iLuqPA90J5N4cTalrtovCySh58iiZDGJ6FGznbclKh4UI+FGacQSgFzwKG77W7XT5gwbVEbd9cIH1A==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/core-js": {
|
||||
"version": "3.49.0",
|
||||
"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.49.0.tgz",
|
||||
"integrity": "sha512-es1U2+YTtzpwkxVLwAFdSpaIMyQaq0PBgm3YD1W3Qpsn1NAmO3KSgZfu+oGSWVu6NvLHoHCV/aYcsE5wiB7ALg==",
|
||||
"hasInstallScript": true,
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/core-js"
|
||||
}
|
||||
},
|
||||
"node_modules/mutation-observer": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/mutation-observer/-/mutation-observer-1.0.3.tgz",
|
||||
"integrity": "sha512-M/O/4rF2h776hV7qGMZUH3utZLO/jK7p8rnNgGkjKUw8zCGjRQPxB8z6+5l8+VjRUQ3dNYu4vjqXYLr+U8ZVNA=="
|
||||
},
|
||||
"node_modules/vconsole": {
|
||||
"version": "3.15.1",
|
||||
"resolved": "https://registry.npmjs.org/vconsole/-/vconsole-3.15.1.tgz",
|
||||
"integrity": "sha512-KH8XLdrq9T5YHJO/ixrjivHfmF2PC2CdVoK6RWZB4yftMykYIaXY1mxZYAic70vADM54kpMQF+dYmvl5NRNy1g==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.17.2",
|
||||
"copy-text-to-clipboard": "^3.0.1",
|
||||
"core-js": "^3.11.0",
|
||||
"mutation-observer": "^1.0.3"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"dependencies": {
|
||||
"vconsole": "^3.15.1"
|
||||
}
|
||||
}
|
||||
+36
-2
@@ -113,6 +113,15 @@
|
||||
<text class="menu-arrow">></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 开发调试工具（仅开发环境显示） -->
|
||||
<view v-if="isDev" class="dev-tools">
|
||||
<view class="dev-tools-title">开发工具</view>
|
||||
<view class="menu-item">
|
||||
<text class="menu-text">vConsole 调试</text>
|
||||
<switch :checked="vconsoleEnabled" color="#2979ff" @change="onVConsoleChange" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部左右箭头导航条 -->
|
||||
@@ -139,6 +148,7 @@
|
||||
<script>
|
||||
import PageNavBar from '@/components/page-nav-bar/page-nav-bar.vue';
|
||||
import config from '@/config/env.js';
|
||||
import { isVConsoleEnabled, showVConsole, hideVConsole } from '@/utils/vconsole';
|
||||
|
||||
export default {
|
||||
components: { PageNavBar },
|
||||
@@ -157,7 +167,9 @@ export default {
|
||||
{ title: '联系客服', action: 'call' },
|
||||
{ title: '公众号信息', action: 'qrcode' }
|
||||
],
|
||||
servicePhone: config.servicePhone
|
||||
servicePhone: config.servicePhone,
|
||||
isDev: process.env.NODE_ENV === 'development',
|
||||
vconsoleEnabled: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@@ -193,6 +205,13 @@ export default {
|
||||
// 无设备编号且非 tab 跳转，跳回扫码页
|
||||
uni.redirectTo({ url: '/pages/index/scan' });
|
||||
}
|
||||
|
||||
// 初始化 vConsole 状态
|
||||
this.vconsoleEnabled = isVConsoleEnabled();
|
||||
},
|
||||
onReady() {
|
||||
// 页面渲染完成后再次检查状态
|
||||
this.vconsoleEnabled = isVConsoleEnabled();
|
||||
},
|
||||
methods: {
|
||||
switchTab(tab) { this.currentTab = tab; },
|
||||
@@ -267,7 +286,16 @@ export default {
|
||||
}
|
||||
},
|
||||
handleNavPrev() { this.currentTab = 'home'; },
|
||||
handleNavNext() { uni.showToast({ title: '暂无下一页', icon: 'none' }); }
|
||||
handleNavNext() { uni.showToast({ title: '暂无下一页', icon: 'none' }); },
|
||||
onVConsoleChange(e) {
|
||||
const enabled = e.detail.value;
|
||||
if (enabled) {
|
||||
showVConsole();
|
||||
} else {
|
||||
hideVConsole();
|
||||
}
|
||||
this.vconsoleEnabled = enabled;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -403,6 +431,12 @@ page { height: 100%; background-color: #fff; }
|
||||
.menu-text { font-size: 30rpx; color: #333; }
|
||||
.menu-arrow { font-size: 28rpx; color: #ccc; }
|
||||
|
||||
/* 开发工具区域 */
|
||||
.dev-tools { margin-top: 20rpx; background-color: #fff; border-radius: 16rpx; overflow: hidden; }
|
||||
.dev-tools-title { padding: 20rpx 28rpx 10rpx; font-size: 24rpx; color: #999; }
|
||||
.dev-tools .menu-item { align-items: center; }
|
||||
.dev-tools switch { transform: scale(0.8); }
|
||||
|
||||
/* ====== 公众号二维码弹窗 ====== */
|
||||
.qrcode-popup-mask {
|
||||
position: fixed;
|
||||
|
||||
@@ -0,0 +1,118 @@
|
||||
/**
|
||||
* vConsole 调试工具管理
|
||||
*
|
||||
* 使用方式：
|
||||
* 1. URL 参数：?vconsole=1 开启，?vconsole=0 关闭
|
||||
* 2. localStorage：设置 'vconsole' 为 '1' 开启，'0' 关闭
|
||||
* 3. 代码调用：import { showVConsole, hideVConsole, toggleVConsole } from '@/utils/vconsole'
|
||||
*/
|
||||
|
||||
let vConsoleInstance = null;
|
||||
|
||||
// 检测是否为开发环境（兼容多种方式）
|
||||
const isDev = process.env.NODE_ENV !== 'production';
|
||||
|
||||
/**
|
||||
* 获取 vConsole 是否开启
|
||||
*/
|
||||
export function isVConsoleEnabled() {
|
||||
if (!isDev) return false;
|
||||
|
||||
// 优先从 URL 参数获取
|
||||
try {
|
||||
const pages = getCurrentPages();
|
||||
if (pages.length > 0) {
|
||||
const currentPage = pages[pages.length - 1];
|
||||
const options = currentPage.$page?.options || currentPage.options || {};
|
||||
if (options.vconsole !== undefined) {
|
||||
return options.vconsole === '1' || options.vconsole === 'true';
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
// ignore
|
||||
}
|
||||
|
||||
// 其次从 localStorage 获取
|
||||
try {
|
||||
return uni.getStorageSync('vconsole') === '1';
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 开启 vConsole
|
||||
*/
|
||||
export function showVConsole() {
|
||||
if (vConsoleInstance) return;
|
||||
|
||||
// 动态加载 vConsole
|
||||
import('vconsole').then((module) => {
|
||||
const VConsole = module.default || module;
|
||||
vConsoleInstance = new VConsole({
|
||||
theme: 'dark',
|
||||
disableLogScrolling: false,
|
||||
buttonSize: 48,
|
||||
});
|
||||
|
||||
// 增强 vConsole 按钮样式，确保不被遮挡
|
||||
setTimeout(() => {
|
||||
const btn = document.querySelector('#__vconsole');
|
||||
if (btn) {
|
||||
btn.style.zIndex = '999999';
|
||||
btn.style.position = 'fixed';
|
||||
btn.style.bottom = '80px';
|
||||
btn.style.right = '10px';
|
||||
}
|
||||
}, 500);
|
||||
|
||||
uni.setStorageSync('vconsole', '1');
|
||||
}).catch((err) => {
|
||||
console.error('[vConsole] 加载失败:', err);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 关闭 vConsole
|
||||
*/
|
||||
export function hideVConsole() {
|
||||
if (vConsoleInstance) {
|
||||
vConsoleInstance.destroy();
|
||||
vConsoleInstance = null;
|
||||
}
|
||||
try {
|
||||
uni.setStorageSync('vconsole', '0');
|
||||
} catch (e) {
|
||||
// ignore
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 切换 vConsole 状态
|
||||
*/
|
||||
export function toggleVConsole() {
|
||||
if (vConsoleInstance) {
|
||||
hideVConsole();
|
||||
} else {
|
||||
showVConsole();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据配置初始化 vConsole
|
||||
*/
|
||||
export function initVConsole() {
|
||||
if (!isDev) return;
|
||||
|
||||
if (isVConsoleEnabled()) {
|
||||
showVConsole();
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
isVConsoleEnabled,
|
||||
showVConsole,
|
||||
hideVConsole,
|
||||
toggleVConsole,
|
||||
initVConsole,
|
||||
};
|
||||
Reference in New Issue
Block a user