You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
139 lines
3.3 KiB
139 lines
3.3 KiB
// 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()
|
|
}
|
|
})
|