uni-app 主题切换

1.前言

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

2.选择颜色组件

• 一般在设置页面进行操作，通过弹窗形式，展示待选择的颜色列表，供用户筛选

• 选中目标颜色后，进行存储，供其他模块读取

• 使用了uni-ui 的组件（uni-popup）进行弹窗，代码如下

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组件

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