uni-app 主题切换

1.前言

• 功能介绍：提供个性化的展示方案给用户，用户可以选择喜欢的主题色，让App使用该主题色进行渲染
• 功能实现：主要分为2个模块，一，选择主题色并存储，二，读取选择的主题色，使用该颜色对部分内容进行渲染（导航栏，卡片边框，表格边框，按钮等）

2.选择颜色组件

• 一般在设置页面进行操作，通过弹窗形式，展示待选择的颜色列表，供用户筛选
• 选中目标颜色后，进行存储，供其他模块读取
• 使用了uni-ui 的组件（uni-popup）进行弹窗，代码如下

<template>
	<uni-popup ref="popup" type="bottom" class="zy-popup" background-color="#fff">
		<view class="modal-wrap">
			<!-- 选中区域 -->
			<view class="flex-box">
				<!-- 颜色盒 -->
				<view class="activeColorBox" :style="{backgroundColor: activeColor}"></view>
				<!-- 颜色值 -->
				<view class="activeColorText">颜色值：{{activeColor}}</view>
				<!-- 确认按钮 -->
				<view style="width: 140rpx;">
					<zy-button size="mini" @click="handleClickConfirm">确认</zy-button>
				</view>
			</view>
			<!-- 颜色列表 -->
			<view class="color-picker-wrap">
				<view class="color-picker-item" v-for="item in colorList" :key="item" :style="{backgroundColor: item}" @click="handleClickColor(item)"></view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	export default{
		data(){
			return {
				activeColor: "",//当前颜色
				
				colorList: [
					'#33cccc',"#009688","#5FB878","#393D49","#1E9FFF","#FFB800","#FF5722","#01AAED","#2F4056",'#ff0033',
					'#F56C6C','#ff9966','#ff9999','#ff3399','#ff33cc','#cc00ff','#9900ff','#cc66ff','#cc6600','#ff9933',
					'#663300','#a58800','#996633','#cccc00','#336600','#669900','#00cc00','#339933','#66ff66','#003366',
					'#336699','#3366cc','#000099','#0000cc','#660066','#993366','#800000','#666666','#303133','#000000',
				],//可选的颜色列表
			}
		},
		methods: {
			//开启弹窗选择（供外部调用）
			open(){
				//初始化当前颜色
				this.activeColor = uni.getStorageSync("baseColor") || "#33cccc"
				//打开弹窗
				this.$refs.popup.open()
			},
			//点击颜色
			handleClickColor(color){
				//选中该颜色
				this.activeColor = color
			},
			//点击确认
			handleClickConfirm(color){
				//弹窗确认框
				uni.showModal({
					title: "提示",
					content: "换肤要重新登录",
					success: (res)=>{
						//确认
						if(res.confirm){
							//保存该颜色
							uni.setStorageSync("baseColor", this.activeColor)
							//关闭弹窗
							this.$refs.popup.close()
							//跳到到登录页面
							uni.reLaunch({
								url: '/pages/login/index'
							})
						}
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.modal-wrap{
		padding: 16rpx;
		/* #ifdef H5 */
		padding-bottom: calc(50px + 12rpx);
		/* #endif */
		.activeColorBox{
			width: 140rpx;
			height: 36px;
			background-color: #fff;
		}
		.activeColorText{
			font-size: 16px;
			color: #333;
			text-align: center;
			flex-grow: 1;
		}
		.color-picker-wrap{
			margin-top: 16rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-wrap: wrap;
			.color-picker-item{
				width: 68rpx;
				height: 68rpx;
				border-radius: 6rpx;
				margin-bottom: 4rpx;
				// margin-right: 13rpx;
				// &:nth-child(10n){
				// 	margin-right: 0;
				// }
			}
		}
	}
</style>

3.导航栏

• 因为框架限制，无法全局修改导航栏主题色，只能每个页面加载的时候单独进行修改，建议将逻辑放入公共模块中（例如mixins），然后让页面引入执行

export default{
	data(){
		return {
			baseColor: "#33cccc",//默认主题色
		}
	},
	onLoad(){
		//初始化主题色
		this.initBaseColor()
	},
	onReady(){
		//设置导航栏颜色，包括字体颜色
		this.initNavigationBar()
	},
	methods: {
		//初始化主题色
		initBaseColor(){
			//读取颜色
			this.baseColor = uni.getStorageSync("baseColor") || "#33cccc"
		},
		//设置导航栏颜色，包括字体颜色
		initNavigationBar(){
			//字体颜色，默认白色
			var fontColor = "#ffffff"
			//浅色系背景，需要匹配黑色字体
			var lightBgColors = []
			if(lightBgColors.includes(this.baseColor)){
				fontColor = "#000000"
			}
			//设置导航背景色和字体颜色
			uni.setNavigationBarColor({
				frontColor: fontColor,
				backgroundColor: this.baseColor
			})
		}
	}
}

4.其他UI组件

• 按钮组件：适配背景色
• 卡片组件：适配边框色
• 表格组件：适配边框色
• 开关组件：适配背景色
• 多选组件：适配背景色
• 选项卡组件：适配背景色