DolphinWeex跨平台开发框架

# 前言

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

# 实例

# 安装

# 使用 npm 安装

注意

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

# 安装 @dolphinweex/weex-theme
npm install @dolphinweex/weex-theme --save
# 安装 @dolphinweex/weex-loader
npm install @dolphinweex/weex-loader --save
1
2
3
4

# 快速上手

# 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' // 默认使用的主题（可为空，为空即不使用主题）
    })
  ],
  ...
};
1
2
3
4
5
6
7
8
9
10
11
12

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

+0 additions-0 deletions

# 第一个例子

示例

<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>
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
52
53
54
55
56

# 开发

# 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>
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

# 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# getTheme 获取当前主题

getTheme()

示例

用法

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

# 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>
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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

# 组件

# 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 低版本接入

# 使用 npm 安装

注意

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

# 安装 @dolphinweex/weex-theme
npm install @dolphinweex/weex-theme --save
# 安装 @dolphinweex/weex-loader
npm install @dolphinweex/weex-loader --save
1
2
3
4

# Webpack 配置

# 对 webpack.config.js 进行配置

+0 additions-0 deletions

# 主题换肤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' // 指定默认主题的根主题
    })
  ],
  ...
};
1
2
3
4
5
6
7
8
9
10
11
12
13

# 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>
1
2
3
4
5
6
7
8
9
10

# 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>
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

# 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>
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

# 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>
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
Last Updated: 12/29/2023, 10:23:56 AM

←