更新记录

1.1.7（2021-05-06）

1. 新增 ’isH5Mode‘ 模式设置， 主动控制采用哪种主题加载方式，当然对应其配置方式

// 是否H5模式， 默认false， 即采用适配所有通用模式
isH5Mode: false

2. I18N国际化，语种文件命名符合js命名规范即可

1.1.6（2021-03-29）

条件编译修改--适配app版

PS：app打包会有 “App平台 v3 模式暂不支持在 js 文件中引用‘xxx.css’请改在 style 内引用” 这里统一改成小程序的方式， 主题定制在js文件中， 注意环境，app打包时，即可忽略 “App平台 v3 模式暂不支持在 js 文件中引用‘xxx.css’请改在 style 内引用”此提示

理论上， 小程序切换主题的方式可通用， 暂时没有做覆盖测试

另外， 感谢大家提出宝贵意见

1.1.5（2021-03-19）

多了个引用【额】

平台兼容性

v587-theme 一键换肤、 I18N国际化

为了更好的用户体验， 更多的情景模式， 更多的产品需求

需求

• 替换颜色（包括主体色调、组件色调）
• logo、背景等图片
• 其他
• I18N国际化（由于原理比较简单，所以和一键换肤放在一起）
• 小程序适配

分析

• 基本上只有html、css、静态资源层面的东西有改动
• 后续主体皮肤增加
• js文件替换不同于静态资源（如何动态管理？require 直接覆盖）
• I18N国际化：不同语言放置在不通js目录，后面覆盖前面（而不是全部都加载管理）
• 小程序拥有诸多限制，采用js处理

一套代码基本足以

一键换肤开发

1. 首先定义一个目录存储主题（固定如此）： /static/theme/

/static/theme/目录结构
│  theme_dark.css  // 只用于H5
│  theme_light.css // 只用于H5
│  theme_dark.js  // 通用（包括小程序，H5等）
│  theme_light.js // 通用（包括小程序，H5等）
│
├─dark
│      bg_sidebar.jpg
│
└─light
        bg_sidebar.jpg

theme_dark.css，theme_light.css 分别对应预设的两个主题包， 对应dark、light资源目录 文件中定义一些变量， 使用的地方引用即可

:root{
  --primaryColor: #616161;
    --sidebarBg: url(/static/theme/dark/bg_sidebar.jpg)
}

theme_dark.js，theme_light.js 分别对应预设的两个主题包， 对应dark、light资源目录

export default {
    '--primaryColor': '#616161',
    '--sidebarBg': 'url(/static/theme/dark/bg_sidebar.jpg)',
    'color': 'red'
}

其中以‘_’开头表示需要转义 ‘--’开头变量, 反之。
【变更】： 为了命名上统一， theme_dark.js，theme_light.js中参数命名统一使用 英文字符“ ' ”包裹

额外

• 颜色处理： css中使用 primaryColor: #616161;

• 图片处理(背景、img)：

  css中使用 background: var(--sidebarBg) no-repeat 0 0;

  html中使用 <image :src="`../../static/theme/${theme}/bg_sidebar.jpg`" ></image>

  属性中使用 background-color="var(--color-primary)"

  【注意】 小程序背景图： 网络加载 或 base64

2. 再定义一个变量存储当前主题, 此处使用vuex管理这个状态

export default {
    state: {
        // 当前主题
        theme: uni.getStorageSync(KEY_THEME),
        // 支持主题列表， 读取/static/theme/theme_*.css 或 /static/theme/theme_*.js
        themeList: [], // 方便管理， 动态读取主题目录的下的主题文件， 方便后续扩展
        // 主题字典
        themeMap: {},
        // 是否H5模式， 默认false， 即采用适配所有通用模式
        isH5Mode: false
    }
}

3. 监听主题变化，加载对应主题【变更】

computed: {
        ...mapState('theme', ['theme', 'themeList', 'locale', 'localeList', 'isH5Mode'])
    },

methods: {
    onThemeChange(newVal, oldVal) {
            if (this.isH5Mode) {
                // 修改顺序， 防止切换过程中 当前主题 -> 默认主题（异常过程） -> 目标主题 （貌似第一次加载仍然存在）
                if (this.themeList.includes(newVal)) {
                    loadCss(`/static/theme/theme_${newVal}.css`)
                }
                if (oldVal && this.themeList.includes(oldVal)) {
                    removeCss(`/static/theme/theme_${oldVal}.css`)
                }
            } else {
                if (this.themeList.includes(newVal)) {
                    this.$store.commit('theme/SET_THEME_MAP', require(`@/static/theme/theme_${newVal}.js`).default)
                }
            }

        }
}

【变更】此处新增 isH5Mode ,主动设置采用 '仅限H5' 和 ‘ 通用’ 两种模式， 此处保留只为兼容， 调用

store.commit('theme/SET_H5_MODE', !!isH5Mode)

4.使用

• 步骤一、main.js 文件中引入

import V587Theme from '@/uni_modules/v587-theme/plugin.js'
// 传入store 实例， 指定默认主题：theme: 'light'
Vue.use(V587Theme, {store, theme: 'light', isH5Mode: false })

• 步骤二、App.vue 或任意使用的地方引入

import themeMixin from '@/uni_modules/v587-theme/mixins/index.js'
export default {
    mixins:[themeMixin]
}

• 步骤三 引入样式（可通用）

computed: {
    ...mapGetters('theme',['themeMap']),
    }

// 使用的地方root 节点添加style
<view class="container" :style="themeMap"></view>

5.默认主题

默认主题： store.theme.theme 不设置 或 设置为空

如何扩展？

可以在app.vue 中 配置扩展主题样式， 如

<style>
    :root {
        --sidebarBg: url(/static/my_theme/bg_sidebar.jpg);
    }
</style>

受限

对sass/scss 支持上

scss 函数上（如rgba）无法识别var(--arg)传参 ：SassError: argument $color of rgba($color, $alpha) must be a color

I18N国际化开发【变更】

1. 首先定义一个目录存储语言资源（固定如此）： /static/i18n/

│
├─i18n
│      en-US.js //en_US.js '_'改为 ‘-’， 符合js命名规范即可
│      ja.js
│      zh-CN.js //zh_CN.js '_'改为 ‘-’， 符合js命名规范即可

【注意】** 语言文件命名需要符合js命名规范，代码中会当做变量名使用（不限制‘ - ’）

文件格式如下：

export default {
    hi : '你好 V587 phenix',
    settings: '设置',
    theme: '换肤',
    language: '语言',
    home_desc: `内容主体，可自定义内容及样式<text style="color: #666; font-size: 15px;">（ uniCloud admin 当前版本号 {{adminVersion}},
                运行到浏览器可在控制台打印信息中查看当前的版本，也可在代码 package.json 中查看）</text>`,
    search: '搜索',
    fullscreen: '全屏',
    change_password: '修改密码',
    logout: '退出'
}

2. 再定义一个变量存储当前主题, 此处使用vuex管理这个状态

export default {
    state: {
        // 当前语音
        locale: uni.getStorageSync(KEY_LOCALE),
        // 支持语言列表， 读取/static/i18n/*.js 
        localeList: [],
        // 语言字典
        localesMap: {}
    }
}

3. 监听主题变化，加载对应主题

onLocaleChange(newVal) {
        if (this.localeList.includes(newVal)) {
            this.$store.commit('theme/SET_LOCALES_MAP', require(`@/static/i18n/${newVal}.js`).default)
        }
    }

4.使用

• 步骤一、main.js 文件中引入

import V587Theme from '@/uni_modules/v587-theme/plugin.js'
// 传入store 实例， 指定默认主题：theme: 'light'
Vue.use(V587Theme, {store, theme: 'light', locale: 'zh-CN'})

• 步骤二、App.vue 或任意使用的地方引入

import themeMixin from '@/uni_modules/v587-theme/mixins/index.js'
export default {
    mixins:[themeMixin]
}

// 使用
<view>sayHi: {{$t('hi')}}</view>

对于需要格式化文本， 如

home_desc: `内容主体，可自定义内容及样式<text style="color: #666; font-size: 15px;">（ uniCloud admin 当前版本号 {adminVersion},
                运行到浏览器可在控制台打印信息中查看当前的版本，也可在代码 package.json 中查看）</text>`

<view v-html="$t('home_desc', {adminVersion})"></view>

作品展示

关注订阅号

关注订阅号，回复“v587体验账号” 获取体验账号

附录