OKee Mobile 开源站点地址：okee.oceanengine.com/mobile/vue/…

前言

什么是 OKee？“OK”这个词的背后是 “All Correct” ，这正是要实现的目标——坚持做正确的事，并把事情做得更好，同时足够简单，容易记忆。

OKee Design 的口号是 “Make More OKee，让一切变得更好”，成就极致的商业体验，始终坚持追求极致，多元兼容，开放共赢的理念。

而今天，我要向大家介绍的就是 OKeeDesign 生态首个开源的移动端组件库 OKee Mobile。

欢迎大家使用和提出建议。

有人会问，市面上都有这么多移动组件库了，为什么还要再写一个移动组件库呢？下面容我细细道来。

当我们接到一个业务需求，并定下技术栈后，我们就会从众多的组件库中选择一个为我们服务。很多时候，在调研了众多的组件库后，我们依然举棋不定，因为没有一个组件库能够匹配自己的业务需求。如果勉强选择了一个不合适的“他”，会让我们在接下来的开发中产生大量的无用功，比如覆盖样式，或是引入第二个组件库。

为何会产生这样的问题呢？

因为不同的业务，甚至不同的项目都有独特的交互风格及 UI 样式。而组件库都是从业务中衍生的，如果组件库的定位与你的业务不切合，那总会有各种各样的问题。

而这次的主角 OKee Mobile 的定位是，不仅能服务于 ToC 业务，还覆盖了常见 ToB 的场景，并深耕于数据展示场景。组件库基于一套完整的设计概念，将组件拆解成一个个 design token，让你能够优雅地配置自己的产品。

现阶段，OKee Mobile 提供了 36 个组件，已覆盖大量业务，并在持续演进！

下面简单聊聊，它有什么不同？

换肤体验

我们提取了一套完整的全局 less 变量控制组件的整体风格。包括颜色、圆角、字体、动画等属性。截取部分样式展示如下：

@primary-color: @blue;
@primary-color-1: ~`colorPalette('@{primary-color}', 7) `; 
@primary-color-2: ~`colorPalette('@{primary-color}', 6) `; 
@primary-color-3: ~`colorPalette('@{primary-color}', 5) `;
@primary-color-4: ~`colorPalette('@{primary-color}', 3) `; 
@primary-color-5: ~`colorPalette('@{primary-color}', 1) `; 

@z-index-1: 1;
@z-index-2: 3;
@z-index-3: 5;
@z-index-4: 7;
@z-index-5: 10;

@border-radius-1: 2px;
@border-radius-2: 4px;
@border-radius-3: 8px;
@border-radius-4: 12px;
@border-radius-5: 16px;

@animation-duration-base: 0.3s;
@animation-duration-fast: 0.2s;

提取了单个组件的设计元素，扩展了单个组件的定制能力。以下展示按钮的设计元素：

一、编译时换肤

为了降低设计师与开发的沟通成本，减少因而产生的对组件的二次开发。

我们正在开发一套主题配置平台，让设计师有能力自行配置组件库主题，并在开发阶段前，导出一套符合产品风格的组件库皮肤。此平台后续会开放出来！

而这个配置平台的核心功能，已经在文档中内置了。

在配置界面中调整对应的色值，例如调整 Primary 的颜色，在右边即可实时预览展示效果。

色值变更后，使用到此色值的组件即会调整。

最后，点击“导出”，把配置好的变量导出为 var.json，并在项目的 less-loader 中覆盖，即可完成主题配置。

const vars = require('./config/theme/var.json');

module.exports = {
  rules: [
    {
      test: /.less$/,
      use: [
        {
          loader: 'less-loader',
          options: {
            javascriptEnabled: true,
            modifyVars: vars,
          },
        },
      ],
    },
  ],
};

二、运行时换肤

我们使用的是 less 变量转 css 变量的策略实现的在线换肤。

也就是说，在开发时，我们不需要手写 css 变量，只需在文件打包时，提供一个配置文件，标明哪些 less 变量是需要编译成 css 变量。我们的编译插件就会自动收集依赖于它们的 less 变量，全部替换成对应的 css 变量。具体过程如下，

在 less 编译阶段，将标记的 less 变量声明成 css 变量，挂在 :root 伪类下。
将使用到这些变量的属性值转换成对应的 css 变量。
在换肤时，更改 :root 下的 css 变量值，就能实现在运行时修改全局风格，及组件特定风格。

值得注意的是，需要限制 css 变量的数量，否则会对页面性能有明显的影响。

核心能力

上面所说的换肤体验，能够给业务提供优秀的适配性。

而仅仅有适配能力是远远不够的，我们还需要有完备的基础组件，并基于业务场景对组件进行一定程度地扩展，增强组件的交互能力，对组件进行不断地打磨，最终提升产品的使用体验。

下面简短介绍一个组件，它是数据类产品的支柱组件，却常在移动端被忽略，它就是 Table。

说到这里，大家往往会提起移动屏幕太小，原本想用 Table 展示的数据只能转换成其他形式来展示。我承认，在 ToC 场景下，展示信息是可以聚合在诸如列表之类的轻型组件上的。

但在 ToB 场景下，真实的需求往往就是展示许多聚合性不那么强的数据，而且列数很多。那 Table 无疑是有它的舞台的，问题的关键变成了交互是不是足够好。

下面，看一看 OKee Mobile 的 Table 展示

总结

OKee Design 体系涵盖所有主流技术栈下的 PC 及移动组件库、图表库、图标库、插画库，主题配置平台，后续惊喜不断，敬请期待！

想聊的点已经和大家聊完了，接下来贴上组件库的 GitHub 链接，欢迎大家参与开源，无论是共建还是提问题，都可以在 issue 中联系我们，感谢阅读。

同时也欢迎大家留言，我们会针对大家的问题，撰写后续的文章。

OKee Mobile 组件库的超能力

前言

换肤体验

一、编译时换肤

二、运行时换肤

核心能力

总结