146 行
3.5 KiB
Plaintext
146 行
3.5 KiB
Plaintext
<template>
|
||
<view class="uni-padding-wrap">
|
||
<!-- #ifdef APP -->
|
||
<view class="uni-common-mt item-box">
|
||
<text>osTheme:</text>
|
||
<text id="theme">{{ data.osTheme }}</text>
|
||
</view>
|
||
<!-- #endif -->
|
||
<view class="uni-common-mt item-box">
|
||
<text>应用当前主题:</text>
|
||
<text id="theme">{{ data.appTheme }}</text>
|
||
</view>
|
||
|
||
<!-- #ifdef APP -->
|
||
<view>
|
||
<view class="uni-title uni-common-mt">
|
||
<text class="uni-title-text"> 修改appTheme主题（此处仅为演示API，本应用并未完整适配暗黑模式） </text>
|
||
</view>
|
||
</view>
|
||
<view class="uni-list uni-common-pl">
|
||
<radio-group @change="radioChange" class="radio-group">
|
||
<radio class="uni-list-cell uni-list-cell-pd radio" v-for="(item, index) in data.items" :key="item"
|
||
:class="index < data.items.length - 1 ? 'uni-list-cell-line' : ''" :value="item" :checked="index === data.current">
|
||
{{ item }}
|
||
</radio>
|
||
</radio-group>
|
||
</view>
|
||
<!-- #endif -->
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="uts">
|
||
type Data = {
|
||
osThemeChangeId: number;
|
||
appThemeChangeId: number;
|
||
osTheme: string;
|
||
appTheme: string;
|
||
originalTheme: string;
|
||
current: number;
|
||
items: string[];
|
||
}
|
||
|
||
const data = reactive({
|
||
osThemeChangeId: 0,
|
||
appThemeChangeId: 0,
|
||
osTheme: 'light',
|
||
appTheme: 'light',
|
||
originalTheme: 'light',
|
||
current: 0,
|
||
items: [
|
||
'light',
|
||
'dark',
|
||
'auto'
|
||
]
|
||
} as Data)
|
||
|
||
function bindOsThemeChange() : number {
|
||
return uni.onOsThemeChange((res : OsThemeChangeResult) => {
|
||
data.osTheme = res.osTheme
|
||
})
|
||
}
|
||
|
||
function bindAppThemeChange() : number {
|
||
// #ifdef APP
|
||
return uni.onAppThemeChange((res : AppThemeChangeResult) => {
|
||
data.appTheme = res.appTheme
|
||
})
|
||
// #endif
|
||
// #ifdef WEB || MP
|
||
return uni.onHostThemeChange((res : OnHostThemeChangeCallbackResult) => {
|
||
data.appTheme = res.hostTheme
|
||
})
|
||
// #endif
|
||
}
|
||
|
||
function setAppTheme(value : string) {
|
||
uni.setAppTheme({
|
||
theme: value as 'light' | 'dark' | 'auto',
|
||
success: function () {
|
||
console.log('设置appTheme为', value, '成功')
|
||
},
|
||
fail: function (e : IAppThemeFail) {
|
||
console.log('设置appTheme为', value, '失败,原因:', e.errMsg)
|
||
}
|
||
})
|
||
}
|
||
|
||
function radioChange(e : UniRadioGroupChangeEvent) {
|
||
const theme = e.detail.value
|
||
setAppTheme(theme)
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '当前选中:' + theme,
|
||
})
|
||
}
|
||
|
||
onReady(() => {
|
||
uni.getSystemInfo({
|
||
success: (res : GetSystemInfoResult) => {
|
||
// #ifdef APP
|
||
data.osTheme = res.osTheme!
|
||
data.originalTheme = res.appTheme!
|
||
data.appTheme = res.appTheme == 'auto' ? res.osTheme! : res.appTheme!
|
||
data.current = data.items.indexOf(res.appTheme!)
|
||
// #endif
|
||
// #ifdef WEB || MP
|
||
data.appTheme = res.hostTheme!
|
||
// #endif
|
||
}
|
||
})
|
||
// #ifdef APP
|
||
data.osThemeChangeId = bindOsThemeChange()
|
||
// #endif
|
||
data.appThemeChangeId = bindAppThemeChange()
|
||
})
|
||
|
||
onUnload(() => {
|
||
// #ifdef APP
|
||
uni.offAppThemeChange(data.appThemeChangeId)
|
||
uni.offOsThemeChange(data.osThemeChangeId)
|
||
// #endif
|
||
// #ifdef WEB || MP
|
||
uni.offHostThemeChange(data.appThemeChangeId)
|
||
// #endif
|
||
})
|
||
|
||
defineExpose({
|
||
data,
|
||
setAppTheme,
|
||
radioChange
|
||
})
|
||
</script>
|
||
|
||
<style>
|
||
.item-box {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.uni-list-cell {
|
||
justify-content: flex-start;
|
||
}
|
||
</style>
|