徐飞洋
3 months ago
4 changed files with 423 additions and 1 deletions
@ -0,0 +1,139 @@ |
|||||
|
// pages/test-tools/test-mode-switch.js
|
||||
|
Page({ |
||||
|
|
||||
|
/** |
||||
|
* 页面的初始数据 |
||||
|
*/ |
||||
|
data: { |
||||
|
isDarkMode: false, |
||||
|
isHighContrast: false |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 生命周期函数--监听页面加载 |
||||
|
*/ |
||||
|
onLoad(options) { |
||||
|
// 从本地存储获取当前模式设置
|
||||
|
const darkMode = wx.getStorageSync('isDarkMode') || false |
||||
|
const highContrast = wx.getStorageSync('isHighContrast') || false |
||||
|
this.setData({ |
||||
|
isDarkMode: darkMode, |
||||
|
isHighContrast: highContrast |
||||
|
}) |
||||
|
this.applyModeSettings() |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 切换深色/浅色模式 |
||||
|
*/ |
||||
|
toggleDarkMode(e) { |
||||
|
const isDarkMode = e.detail.value |
||||
|
this.setData({ isDarkMode }) |
||||
|
wx.setStorageSync('isDarkMode', isDarkMode) |
||||
|
this.applyModeSettings() |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 切换高对比度模式 |
||||
|
*/ |
||||
|
toggleHighContrast(e) { |
||||
|
const isHighContrast = e.detail.value |
||||
|
this.setData({ isHighContrast }) |
||||
|
wx.setStorageSync('isHighContrast', isHighContrast) |
||||
|
this.applyModeSettings() |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 应用模式设置 |
||||
|
*/ |
||||
|
applyModeSettings() { |
||||
|
const { isDarkMode, isHighContrast } = this.data |
||||
|
|
||||
|
// 创建或删除高对比度样式
|
||||
|
this.createOrRemoveHighContrastStyle(isHighContrast) |
||||
|
|
||||
|
// 更新窗口背景和导航栏样式
|
||||
|
this.updateWindowStyle(isDarkMode) |
||||
|
|
||||
|
console.log(`黑白测试模式设置: 深色模式=${isDarkMode}, 高对比度=${isHighContrast}`) |
||||
|
wx.showToast({ |
||||
|
title: '模式已更新', |
||||
|
icon: 'success' |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 创建或删除高对比度样式 |
||||
|
*/ |
||||
|
createOrRemoveHighContrastStyle(enable) { |
||||
|
// 移除旧的高对比度样式
|
||||
|
const oldStyle = wx.createSelectorQuery().select('#highContrastStyle') |
||||
|
oldStyle.context((res) => { |
||||
|
if (res.context) { |
||||
|
wx.removeStyleSheet('#highContrastStyle') |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
if (enable) { |
||||
|
// 创建高对比度样式
|
||||
|
const styleContent = ` |
||||
|
/* 高对比度样式 */ |
||||
|
* { |
||||
|
filter: grayscale(100%) contrast(120%) !important; |
||||
|
} |
||||
|
|
||||
|
/* 确保文字可读性 */ |
||||
|
text, span, div, p { |
||||
|
color: #000 !important; |
||||
|
background-color: #fff !important; |
||||
|
} |
||||
|
|
||||
|
/* 按钮和交互元素 */ |
||||
|
button, .btn { |
||||
|
border: 2px solid #000 !important; |
||||
|
color: #000 !important; |
||||
|
background-color: #fff !important; |
||||
|
} |
||||
|
` |
||||
|
|
||||
|
// 动态添加样式
|
||||
|
const styleSheet = document.createElement('style') |
||||
|
styleSheet.id = 'highContrastStyle' |
||||
|
styleSheet.textContent = styleContent |
||||
|
document.head.appendChild(styleSheet) |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 更新窗口样式 |
||||
|
*/ |
||||
|
updateWindowStyle(isDarkMode) { |
||||
|
wx.setNavigationBarColor({ |
||||
|
frontColor: isDarkMode ? '#ffffff' : '#000000', |
||||
|
backgroundColor: isDarkMode ? '#000000' : '#ffffff', |
||||
|
animation: { |
||||
|
duration: 400, |
||||
|
timingFunc: 'easeInOut' |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
wx.setBackgroundColor({ |
||||
|
backgroundColor: isDarkMode ? '#000000' : '#ffffff', |
||||
|
backgroundColorTop: isDarkMode ? '#000000' : '#ffffff', |
||||
|
backgroundColorBottom: isDarkMode ? '#000000' : '#ffffff' |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 重置所有设置 |
||||
|
*/ |
||||
|
resetAllSettings() { |
||||
|
this.setData({ |
||||
|
isDarkMode: false, |
||||
|
isHighContrast: false |
||||
|
}) |
||||
|
wx.setStorageSync('isDarkMode', false) |
||||
|
wx.setStorageSync('isHighContrast', false) |
||||
|
this.applyModeSettings() |
||||
|
} |
||||
|
}) |
||||
@ -0,0 +1,50 @@ |
|||||
|
<!--pages/test-tools/test-mode-switch.wxml--> |
||||
|
<view class="container"> |
||||
|
<view class="header"> |
||||
|
<text class="title">黑白测试设置</text> |
||||
|
<text class="subtitle">调整应用的显示模式以进行黑白测试</text> |
||||
|
</view> |
||||
|
|
||||
|
<view class="setting-item"> |
||||
|
<view class="setting-label"> |
||||
|
<text class="label-text">深色模式</text> |
||||
|
<text class="label-desc">切换应用的明/暗主题</text> |
||||
|
</view> |
||||
|
<switch |
||||
|
class="setting-switch" |
||||
|
checked="{{isDarkMode}}" |
||||
|
bindchange="toggleDarkMode" |
||||
|
color="#1AAD19" |
||||
|
/> |
||||
|
</view> |
||||
|
|
||||
|
<view class="setting-item"> |
||||
|
<view class="setting-label"> |
||||
|
<text class="label-text">高对比度模式</text> |
||||
|
<text class="label-desc">启用黑白高对比度显示</text> |
||||
|
</view> |
||||
|
<switch |
||||
|
class="setting-switch" |
||||
|
checked="{{isHighContrast}}" |
||||
|
bindchange="toggleHighContrast" |
||||
|
color="#1AAD19" |
||||
|
/> |
||||
|
</view> |
||||
|
|
||||
|
<view class="button-group"> |
||||
|
<button |
||||
|
class="reset-button" |
||||
|
bindtap="resetAllSettings" |
||||
|
type="default" |
||||
|
> |
||||
|
重置为默认设置 |
||||
|
</button> |
||||
|
</view> |
||||
|
|
||||
|
<view class="tips"> |
||||
|
<text class="tip-text">提示：</text> |
||||
|
<text class="tip-content">1. 深色模式会改变应用的整体色调</text> |
||||
|
<text class="tip-content">2. 高对比度模式会将所有元素转为黑白并提高对比度</text> |
||||
|
<text class="tip-content">3. 这些设置会保存在本地，下次打开应用时自动应用</text> |
||||
|
</view> |
||||
|
</view> |
||||
@ -0,0 +1,149 @@ |
|||||
|
/** pages/test-tools/test-mode-switch.wxss **/ |
||||
|
.container { |
||||
|
padding: 40rpx 30rpx; |
||||
|
background-color: #fff; |
||||
|
min-height: 100vh; |
||||
|
} |
||||
|
|
||||
|
.header { |
||||
|
text-align: center; |
||||
|
margin-bottom: 60rpx; |
||||
|
} |
||||
|
|
||||
|
.title { |
||||
|
font-size: 36rpx; |
||||
|
font-weight: bold; |
||||
|
color: #333; |
||||
|
display: block; |
||||
|
margin-bottom: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.subtitle { |
||||
|
font-size: 26rpx; |
||||
|
color: #666; |
||||
|
display: block; |
||||
|
line-height: 1.5; |
||||
|
} |
||||
|
|
||||
|
.setting-item { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
padding: 30rpx 0; |
||||
|
border-bottom: 1rpx solid #f0f0f0; |
||||
|
} |
||||
|
|
||||
|
.setting-label { |
||||
|
flex: 1; |
||||
|
margin-right: 30rpx; |
||||
|
} |
||||
|
|
||||
|
.label-text { |
||||
|
font-size: 30rpx; |
||||
|
color: #333; |
||||
|
display: block; |
||||
|
margin-bottom: 8rpx; |
||||
|
} |
||||
|
|
||||
|
.label-desc { |
||||
|
font-size: 24rpx; |
||||
|
color: #999; |
||||
|
display: block; |
||||
|
line-height: 1.4; |
||||
|
} |
||||
|
|
||||
|
.setting-switch { |
||||
|
transform: scale(1.2); |
||||
|
} |
||||
|
|
||||
|
.button-group { |
||||
|
margin-top: 60rpx; |
||||
|
padding: 0 20rpx; |
||||
|
} |
||||
|
|
||||
|
.reset-button { |
||||
|
width: 100%; |
||||
|
height: 90rpx; |
||||
|
line-height: 90rpx; |
||||
|
font-size: 30rpx; |
||||
|
border-radius: 15rpx; |
||||
|
border: 2rpx solid #1AAD19; |
||||
|
color: #1AAD19; |
||||
|
background-color: #fff; |
||||
|
} |
||||
|
|
||||
|
.reset-button:active { |
||||
|
background-color: #f0f0f0; |
||||
|
} |
||||
|
|
||||
|
.tips { |
||||
|
margin-top: 60rpx; |
||||
|
padding: 30rpx; |
||||
|
background-color: #f8f8f8; |
||||
|
border-radius: 15rpx; |
||||
|
border-left: 4rpx solid #1AAD19; |
||||
|
} |
||||
|
|
||||
|
.tip-text { |
||||
|
font-size: 28rpx; |
||||
|
font-weight: bold; |
||||
|
color: #333; |
||||
|
display: block; |
||||
|
margin-bottom: 15rpx; |
||||
|
} |
||||
|
|
||||
|
.tip-content { |
||||
|
font-size: 24rpx; |
||||
|
color: #666; |
||||
|
display: block; |
||||
|
margin-bottom: 10rpx; |
||||
|
line-height: 1.5; |
||||
|
} |
||||
|
|
||||
|
/* 深色模式适配 */ |
||||
|
.container.dark-mode { |
||||
|
background-color: #1a1a1a; |
||||
|
} |
||||
|
|
||||
|
.container.dark-mode .title { |
||||
|
color: #fff; |
||||
|
} |
||||
|
|
||||
|
.container.dark-mode .subtitle { |
||||
|
color: #ccc; |
||||
|
} |
||||
|
|
||||
|
.container.dark-mode .setting-item { |
||||
|
border-bottom-color: #333; |
||||
|
} |
||||
|
|
||||
|
.container.dark-mode .label-text { |
||||
|
color: #fff; |
||||
|
} |
||||
|
|
||||
|
.container.dark-mode .label-desc { |
||||
|
color: #999; |
||||
|
} |
||||
|
|
||||
|
.container.dark-mode .reset-button { |
||||
|
border-color: #4CAF50; |
||||
|
color: #4CAF50; |
||||
|
background-color: #1a1a1a; |
||||
|
} |
||||
|
|
||||
|
.container.dark-mode .reset-button:active { |
||||
|
background-color: #333; |
||||
|
} |
||||
|
|
||||
|
.container.dark-mode .tips { |
||||
|
background-color: #2a2a2a; |
||||
|
border-left-color: #4CAF50; |
||||
|
} |
||||
|
|
||||
|
.container.dark-mode .tip-text { |
||||
|
color: #fff; |
||||
|
} |
||||
|
|
||||
|
.container.dark-mode .tip-content { |
||||
|
color: #ccc; |
||||
|
} |
||||
Loading…
Reference in new issue