一键换肤

前言

自从2019年苹果发布会推出了深色模式后，越来越多的APP开始更新了深色模式。美的美居适配深色模式也逐步成为需求，故提供 Weex 一键换肤规范。

#实例

#安装

#使用 npm 安装

注意

[ ! ] 推荐使用 npm 的官方源进行安装

# 安装 @dolphinweex/weex-theme
npm install @dolphinweex/weex-theme --save
# 安装 @dolphinweex/weex-loader
npm install @dolphinweex/weex-loader --save

#快速上手

#Webpack 配置

#WeexThemePlugin(OBJECT)

一键换肤 webpack 配置项

OBJECT 参数说明

参数名	类型	必填	说明
themes	Array	是	可使用的主题数组。例如：['light', 'dark', 'colmo']
default	String	否	默认使用的主题（可为空，为空即不使用主题）

示例

const WeexThemePlugin = require('@dolphinweex/weex-theme/lib/plugin')

module.exports = {
  ...
  plugins: [
    new WeexThemePlugin({
      themes: ['light', 'dark', 'colmo'], // 可使用的主题数组
      default: 'light' // 默认使用的主题（可为空，为空即不使用主题）
    })
  ],
  ...
};

#对 webpack.common.conf.js 进行配置

webpack.common.conf.js+9 additions-1 deletions

>	⋯
6	6	* Description: Adds a banner to the top of each generated chunk.
7	7	* See: https://webpack.js.org/plugins/banner-plugin/
8	8	*/
9	9	new webpack.BannerPlugin({
10	10	banner: '// { "framework": "Vue"}',
11	11	raw: true,
12	12	exclude: 'Vue'
13	13	}),
14	14	// 文件拷贝插件,将图片和字体拷贝到dist目录 new copy([{ from: `./src/widgets/${project_category_name}/assets`, to: './assets' }])]
15	15
	16	// 引入 WeexThemePlugin
	17	const WeexThemePlugin = require('@dolphinweex/weex-theme/lib/plugin')
	18	plugins.push(
	19	new WeexThemePlugin({
	20	themes: ['light', 'dark', 'colmo'], // 可使用的主题数组
	21	default: 'light' // 默认使用的主题（可为空，为空即不使用主题）
	22	})
	23	)
	24
16	25	/**
17	26	*copy 自定义的配置文件
18	27	* @param {*} target_file
19	28	*/
20	29	const diyFileCheck = target_file => {
21	30	target_file = target_file \|\| 'setting.json' let dir = `./src/widgets/${project_category_name}/${target_file}` const files = glob.sync(dir, { nodir: true })
22	31	if (files.length === 1) { plugins.push(new copy([{ from: `./src/widgets/${project_category_name}/${target_file}`, to: './' }])) }
23	32	}
24	33	diyFileCheck('plugin.json')
25	34
26	35	......
27	36
28	37	// Config for compile jsbundle for native.
29	38	const weexConfig = getBaseConfig()
30	39	weexConfig.entry = weexEntry
31	40	weexConfig.output.filename = '[name].js'
32	41	weexConfig.module.rules[1].use.push({
33		loader: 'weex-loader',
	42	loader: '@dolphinweex/weex-loader', // 将 weex-loader 替换成 @dolphinweex/weex-loader
34	43	options: Object.assign(vueLoaderConfig({ useVue: false }), {
35	44	postcss: [
36	45	//让weex支持css的简写，如border,padding
37	46	require('postcss-weex')({ env: 'weex' })
38	47	]
39	48	})
40	49	})
41	50	weexConfig.node = config.nodeConfiguration
42	51
43	52	module.exports = [webConfig, weexConfig]

#第一个例子

示例

<template>
  <div class="wrapper">
    <text class="title">Hello!</text>
  </div>
</template>

<style>
.wrapper {
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.title {
  font-size: 180px;
  color: #267aff;
}

/* 浅色风格 */
@media screen and (weex-theme: light) {
  .title {
    color: #267aff;
  }
}

/* 深色风格 */
@media screen and (weex-theme: dark) {
  .title {
    color: #000000;
  }
}

/* colmo模式 */
@media screen and (weex-theme: colmo) {
  .title {
    color: #b35336;
  }
}
</style>

<script>
export default {
  created() {
    var count = 0
    setInterval(() => {
      count++
      if (count % 3 == 1) {
        this.$theme.setTheme('dark')
      } else if (count % 3 == 2) {
        this.$theme.setTheme('colmo')
      } else {
        this.$theme.setTheme('light')
      }
    }, 1500)
  }
}
</script>

#开发

#CSS

@media screen and (weex-theme: THEME)

允许在 style 中使用 @media 规则开发指定的主题样式

参数说明

参数名	类型	必填	说明
THEME	String	是	主题名称。注：仅对 WeexThemePlugin 配置的主题生效

示例

<style>
...

/* 浅色风格 */
@media screen and (weex-theme: light) {
  .title {
    color: #267aff;
  }
}

/* 深色风格 */
@media screen and (weex-theme: dark) {
  .title {
    color: #000000;
  }
}

/* colmo风格 */
@media screen and (weex-theme: colmo) {
  .title {
    color: #b35336;
  }
}

...
</style>

#API

#setTheme 更改主题

setTheme(THEME)

参数说明

参数名	类型	必填	说明
THEME	String	是	主题名称。注：仅对 WeexThemePlugin 配置的主题生效

示例

用法

<script>
export default {
  async created() {
    // 注意：安卓端在 created 中调用 setTheme 需要加上 async/await

    // 切换到 light 主题
    await this.$theme.setTheme('light')

    // 切换到 dark 主题
    await this.$theme.setTheme('dark')

    // 不使用主题
    await this.$theme.setTheme('')
  }
}
</script>

#getTheme 获取当前主题

getTheme()

示例

用法

<script>
export default {
  created() {
    // 获取当前主题
    const value = this.$theme.getTheme()
    console.log(value) // 输出 WeexThemePlugin 配置的主题（light 或 dark 或 colmo）或 ''
  }
}
</script>

#watchTheme 根据当前主题获取指定配置

watchTheme(OBJECT)

监听当前页面主题，返回配置项对应值。

OBJECT 参数说明

参数名	类型	必填	说明
[KEY]	Any	是	WeexThemePlugin 配置的主题值枚举
default	Any	是	默认配置

示例

用法

<template>
  <div class="wrapper" @viewappear="handleViewappear">
    <image :src="logoSrc"></image>
    <text :style="titleStyle">Hello!</text>
  </div>
</template>

<script>
export default {
  computed: {
    // 运用在 :src 上
    logoSrc() {
      let tmp = this.$theme.watchTheme({
        light: 'https://image.midea.com/logo/light.png', // 浅色风格 的 src 图片链接
        dark: 'https://image.midea.com/logo/dark.png', // 深色风格 的 src 图片链接
        colmo: 'https://image.midea.com/logo/colmo.png', // colmo模式 的 src 图片链接
        default: 'https://image.midea.com/logo/default.png' 
      })
      /*****
       * 根据设置的当前主题返回对应的配置
       * 例如：当前主题为 light， 则 tmp = 'https://image.midea.com/logo/light.png'
       * 例如：当前主题为 dark， 则 tmp = 'https://image.midea.com/logo/dark.png'
       * 例如：当前主题为 colmo， 则 tmp = 'https://image.midea.com/logo/colmo.png'
       * 例如：当前主题为空（没有设置主题）， 则 tmp = 'https://image.midea.com/logo/default.png' 
       */
      return tmp
    },

    // 运用在 :style 上
    titleStyle() {
      let tmp = this.$theme.watchTheme({
        light: { color: '267aff' }, // 浅色风格 的 style
        dark: { color: '000000' }, // 深色风格 的 style
        colmo: { color: 'b35336' }, // colmo模式 的 style
        default: { color: '333333' }
      })
      /*****
       * 根据设置的当前主题返回对应的配置
       * 例如：当前主题为 light， 则 tmp = { color: '267aff' }
       * 例如：当前主题为 dark， 则 tmp = { color: '000000' }
       * 例如：当前主题为 colmo， 则 tmp = { color: 'b35336' }
       * 例如：当前主题为空（没有设置主题）， 则 tmp = { color: '333333' }
       */
      return tmp
    }
  },
  methods: {
    // 运用在 @ 事件上
    handleViewappear() {
      let tmp = this.$theme.watchTheme({
        light: function handleViewappear_light() {...},  // 浅色风格 的 事件
        dark: function handleViewappear_dark() {...},  // 深色风格 的 事件
        colmo: function handleViewappear_colmo() {...},  // colmo模式 的 事件
        default: function handleViewappear_default() {...}
      })
      /*****
       * 根据设置的当前主题返回对应的配置
       * 例如：当前主题为 light， 则 tmp = function handleViewappear_light()
       * 例如：当前主题为 dark， 则 tmp = function handleViewappear_dark()
       * 例如：当前主题为 colmo， 则 tmp = function handleViewappear_colmo()
       * 例如：当前主题为空（没有设置主题）， 则 tmp = function handleViewappear_default()
       */
      return tmp
    }
  }
}
</script>

#组件

#WeexThemeView 包裹组件

可用于修复伪类 :active 在安卓端出现显示异常情况

示例

<template>
  <div class="wrapper">
    <WeexThemeView>
      <text class="title">Hello!</text>
    </WeexThemeView>
  </div>
</template>

<script>
import { WeexThemeView } from '@dolphinweex/weex-theme'
export default {
  components:{
    WeexThemeView  
  }
}
</script>

#低版本接入

#使用 npm 安装

注意

[ ! ] 推荐使用 npm 的官方源进行安装

# 安装 @dolphinweex/weex-theme
npm install @dolphinweex/weex-theme --save
# 安装 @dolphinweex/weex-loader
npm install @dolphinweex/weex-loader --save

#Webpack 配置

#对 webpack.config.js 进行配置

webpack.config.js+9 additions-1 deletions

>	⋯
198	198	},
199	199	sourceMap: false
200	200	}),
201	201	new webpack.BannerPlugin({
202	202	banner: '//
203	203	',
204	204	raw: true
205	205	})
206	206	)
207	207
	208	// 引入 WeexThemePlugin
	209	const WeexThemePlugin = require('@dolphinweex/weex-theme/lib/plugin')
	210	plugins.push(
	211	new WeexThemePlugin({
	212	themes: ['colmo'], // 可使用的主题数组
	213	default: '' // 默认使用的主题（可为空，为空即不使用主题）
	214	})
	215	)
	216
208	217	const getBaseConfig = () => ({
209	218	//devtool: '#source-map',
210	219	context: __dirname,
211	220	output: {
212	221	path: path.join(__dirname, 'dist')
213	222	/* publicPath: '/',
214	223	filename: 'aa/[name].js'
215	224	libraryTarget: 'umd',
216	225	library: `npm/${pkg.name}/[name]`,
217	226	umdNamedDefine: false*/
>	⋯
303	312	}
304	313	}
305	314	]
306	315	}
307	316	})
308	317
309	318	const nativeCfg = getBaseConfig()
310	319	console.log(weexEntry)
311	320	nativeCfg.entry = weexEntry
312	321	nativeCfg.output.filename = '[name].js'
313		nativeCfg.module.rules[1].use.push('weex-loader')
	322	nativeCfg.module.rules[1].use.push('@dolphinweex/weex-loader') // 将 weex-loader 替换成 @dolphinweex/weex-loader
314	323
315	324	const exportConfig = [
316	325	// webCfg,
317	326	nativeCfg
318	327	]
319	328
320	329	module.exports = exportConfig
321	330

#主题换肤CSS代码检索生成快捷工具

主题换肤CSS代码检索生成快捷工具

#根主题

由于UI组件库支持的主题是默认和colmo 当期望UI组件库采用colmo风格，且WeexThemePlugin配置的主题不仅限于colmo时，切换主题需要指定下根主题。

#Webpack 配置

#WeexThemePlugin(OBJECT)

一键换肤 webpack 配置项

OBJECT 参数说明

参数名	类型	必填	说明
themes	Array	是	可使用的主题数组。例如：['light', 'dark', 'colmo']
default	String	否	默认使用的主题（可为空，为空即不使用主题）
root	String	否	指定默认主题的根主题（可选：light

示例

const WeexThemePlugin = require('@dolphinweex/weex-theme/lib/plugin')

module.exports = {
  ...
  plugins: [
    new WeexThemePlugin({
      themes: ['light', 'dark', 'colmo-2.0'], // 可使用的主题数组
      default: 'colmo-2.0', // 默认使用的主题（可为空，为空即不使用主题）
      root: 'colmo' // 指定默认主题的根主题
    })
  ],
  ...
};

#API

#setTheme 更改主题

setTheme(THEME, [OBJECT])

参数说明

参数名	类型	必填	说明
THEME	String	是	主题名称。注：仅对 WeexThemePlugin 配置的主题生效
OBJECT	Object	否	配置项

OBJECT 参数说明

参数名	类型	必填	说明
root	String	否	指定当前主题属于哪个根主题（可选：light、dark、colmo）

用法

<script>
export default {
  async created() {
    // 注意：安卓端在 created 中调用 setTheme 需要加上 async/await

    // 切换到 colmo-2.0 主题，且指定根主题
    await this.$theme.setTheme('colmo-2.0', { root: 'colmo' })
  }
}
</script>

#getRootTheme 获取根主题

getRootTheme()

用法

<script>
export default {
  created() {
    // 组件库获取根主题
    const value = this.$theme.getRootTheme()
    console.log(value) // 输出 light 或 dark 或 colmo 或 ''

    // 例子1
    // 切换到 colmo-2.0 主题，且指定根主题
    await this.$theme.setTheme('colmo-2.0', { root: 'colmo' })

    // 组件库获取主题
    const value = this.$theme.getRootTheme()
    console.log(value) // 输出 colmo

    // 例子2
    // 切换到 colmo-2.0 主题
    await this.$theme.setTheme('colmo-2.0')

    // 组件库获取主题
    const value = this.$theme.getRootTheme()
    console.log(value) // 输出 ''

    // 例子3
    // 切换到 colmo 主题
    await this.$theme.setTheme('colmo')

    // 组件库获取主题
    const value = this.$theme.getRootTheme()
    console.log(value) // 输出 'colmo'

    // 例子4
    // 切换到 colmo 主题，且指定根主题
    await this.$theme.setTheme('colmo', { root: 'colmo' })

    // 组件库获取主题
    const value = this.$theme.getRootTheme()
    console.log(value) // 输出 colmo
  }
}
</script>

#getFullTheme 获取完整主题（含业务主题和根主题）

getFullTheme()

用法

<script>
export default {
  created() {
    // 组件库获取完整主题
    const value = this.$theme.getFullTheme()
    console.log(value) // `{根主题}.{业务主题}`

    // 例子1
    // 切换到 colmo-2.0 主题，且指定根主题
    await this.$theme.setTheme('colmo-2.0', { root: 'colmo' })

    // 组件库获取主题
    const value = this.$theme.getFullTheme()
    console.log(value) // 输出 colmo.colmo-2.0

    // 例子2
    // 切换到 colmo-2.0 主题
    await this.$theme.setTheme('colmo-2.0')

    // 组件库获取主题
    const value = this.$theme.getFullTheme()
    console.log(value) // 输出 'colmo-2.0'
  }
}
</script>

#watchTheme 根据当前主题获取指定配置

watchTheme(OBJECT)

兼容根主题：优先返回业务主题匹配的值，再返回根主题匹配的值

OBJECT 参数说明

参数名	类型	必填	说明
[KEY]	Any	是	WeexThemePlugin 配置的主题值枚举
default	Any	是	默认配置

用法

<template>
  <div class="wrapper">
    <image :src="logoSrc"></image>
  </div>
</template>
 
<script>
export default {
  computed: {
    // 运用在 :src 上
    logoSrc() {
      let tmp = this.$theme.watchTheme({
        dark1: 'https://image.midea.com/logo/dark1.png', // dark1 风格 的 src 图片链接
        light: 'https://image.midea.com/logo/light.png', // 浅色风格 的 src 图片链接
        dark: 'https://image.midea.com/logo/dark.png', // 深色风格 的 src 图片链接
        colmo: 'https://image.midea.com/logo/colmo.png', // colmo模式 的 src 图片链接
        default: 'https://image.midea.com/logo/default.png'
      })
      /*****
       * 根据设置的当前主题返回对应的配置
       * 例如：this.$theme.setTheme('dark1', { root: 'dark' })， 则 tmp = 'https://image.midea.com/logo/dark1.png'
       * 例如：this.$theme.setTheme('light1', { root: 'light' })， 则 tmp = 'https://image.midea.com/logo/light.png'
       * 例如：this.$theme.setTheme('colmo')， 则 tmp = 'https://image.midea.com/logo/colmo.png'
       * 例如：当前主题为空（没有设置主题）， 则 tmp = 'https://image.midea.com/logo/default.png'
       */
      return tmp
    }
  }
}
</script>

posted on 2024-12-13 09:20 AtlasLapetos 阅读(70) 评论(0) 收藏举报