[转载]uni-app 换肤实现-原生导航栏、tabbar和页面全部替换

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

• 换肤代码如下

•   setSkinme(theme) {
        uni.setStorageSync("theme", theme)
        uni.showModal({
            title: "系统提醒",
            content: '切换成功，是否重启生效？',
            confirmText: "是",
            cancelText: "否",
            success: res => {
                console.log(res.confirm)
                if (res.confirm) {
                    plus.runtime.restart();
                }
            }
        })
  
    },
  

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

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

• 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()
        },
    }
  

  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"
  
            }
        }
    }
  

  定义全局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;
       }
   }
  

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

• 根节点绑定css类

•   <template>
        <view class="page" :class="getTheme">
        </view>
    </template>
  

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

•   <template>
        <view class="page" :class="getTheme">
            <view class="compenBg">
                <text class="textNormal" >主题文字颜色</text>
            </view>
        </view>
    </template>

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

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

• nvue使用注意

  • 在nvue中需单独混入ThemeUtil

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