uni-app 换肤实现-原生导航栏、tabbar和页面全部替换_uniapp 原生的导航栏怎么做换肤

通过全局缓存参数设置当前主题：

• 换肤代码如下

    setSkinme(theme) {
        uni.setStorageSync("theme", theme)
        uni.showModal({
            title: "系统提醒",
            content: '切换成功，是否重启生效？',
            confirmText: "是",
            cancelText: "否",
            success: res => {
                console.log(res.confirm)
                if (res.confirm) {
                    plus.runtime.restart();
                }
            }
        })
  
    },
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16

在main.js中全局混入主题相关函数

 import themeUtil from './common/ThemeUtil.js'
 Vue.mixin(themeUtil)
1
2

• ThemeUtil内容如下

    const styles = require('./theme-define.json') 
    const themeClass=uni.getStorageSync("theme") || 'theme-light' //默认是亮主题
    const getThemeStyles = function() {
        return styles[themeClass]?styles[themeClass]:styles['theme-light']
    }
    const themeStyle = getThemeStyles()
    const setThemeStyle=function(){
        //设置导航栏主题
        uni.setNavigationBarColor(themeStyle.navigationBarStyle);
        //设置tabbar主题
        uni.setTabBarStyle(themeStyle.tabBarStyle)
    }
    export default {
        data(){
            return{
                //将主题相关颜色加入所有组件的data中
                COLORS:themeStyle.COLORS,
            }
        },
        computed: {
            // css类 在页面组件的根节点绑定
            getTheme() {
                return themeClass
            }
        },
        onLoad(){
            //在加载时候设置主题的导航栏和tabbar
            setThemeStyle()
        },
    }
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30

• theme-define.json 内容如下

    {
        "theme-dark": {
            "navigationBarStyle": {
                "frontColor":"#ffffff",
                "backgroundColor":"#272D3B",
                "animation": {
                    "duration": 0,
                    "timingFunc": "easeIn"
                }
            },
            "tabBarStyle": {
                "color": " #797D86",
                "selectedColor": "#0c78e4",
                "backgroundColor": "#272D3B",
                "borderStyle": "#151b29"
            },
            "COLORS": {
                "background": "#363D50",
                "front": "#ffffff",
                "border": "#272d3b",
                "light": "#8799a3",
                "activated": "#11FF11",
                "ucharBg":"#363D50"
            }
        },
        "theme-light": {
            "navigationBarStyle": {
                "frontColor": "#ffffff",
                "backgroundColor": "#116bc5",
                "animation": {
                    "duration": 0,
                    "timingFunc": "easeIn"
                }
            },
            "tabBarStyle": {
                "color": "#363d50",
                "selectedColor": "#0c78e4",
                "backgroundColor": "#f1f1f1",
                "borderStyle": "#151b29"
            },
            "COLORS": {
                "background": "#FFFFFF",
                "front": "#666666",
                "border": "#f1f1f1",
                "light": "#666666",
                "activated": "#FF1111",
                "ucharBg":"#116bc5"
  
            }
        }
    }
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32
  33
  34
  35
  36
  37
  38
  39
  40
  41
  42
  43
  44
  45
  46
  47
  48
  49
  50
  51

定义全局css的主题相关类，用scss实现可以更好的划分层级

  .theme-dark {
      background-color:#272d3b;
      .bgSelected{
         background-color: #d94365;
      }
      .textSelected{
         color: #ffffff;
      }
      .bgNormal{
         background-color:#272d3b;
      }
      .textNormal{
         color: #88abda;
      }
     .pageBg{
         background-color: #272d3b;
     }

     .compenBg{
         background-color: #363D50;
     }
 }
  .theme-light {
     background-color:#ffffff;	
     .bgSelected{
         background-color: #d94365;
     }
     .textSelected{
         color: #ffffff;
     }
     .bgNormal{
         background-color:#cdcdcd;
     }
     .textNormal{
         color: #ffffff;
     }
     .pageBg{
         background-color: #ffffff;
     }

     .compenBg{
         background-color: #f1f1f1;
     }
 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

在页面组件中使用主题样式

• 的根节点绑定css类

    <template>
        <view class="page" :class="getTheme">
        </view>
    </template>
  1
  2
  3
  4

• 子组件中应用主题样式

    <template>
        <view class="page" :class="getTheme">
            <view class="compenBg">
    			<text class="textNormal" >主题文字颜色</text>
            </view>
        </view>
    </template>
  1
  2
  3
  4
  5
  6
  7

• 子组件中在绑定样式中使用主题颜色

    <view  :style="{backgroundColor:COLORS.background}"  >
  1

nvue使用注意

• 在nvue中需单独混入ThemeUtil

另外注意导航栏的frontColor只能是#FFFFFF和#000000