Taro UI 2.0 发布：新增自定义主题功能，适配更多小程序

前言

转眼间，Taro UI 发布已有半年，感谢你们的支持，让咱们收获了 GitHub 1400+ star。在此期间，咱们不断完善组件库的功能和特性，新增了许多组件和小工具，包括但不限于:

• 新增日历、索引选择、区域选择、图片选择等十一个组件
• 适配支付宝小程序、百度小程序
• 新增自定义主题功能
• 新增主题生成器，以帮助开发者更好地使用自定义主题功能
• 新增 Issue Helper，以帮助开发者更规范地填写 Issue

新增组件

在 1.0 版本发布以后，咱们又陆续新增了以下十一个组件：

• 视图组件：页面提示、 分隔符、倒计时、 幕帘 、步骤条
• 操做反馈：全局信息组件
• 表单：图片选择器、区域选择器、索引选择器、日历组件、搜索栏

其中，在社区里呼声最高的组件，非日历组件莫属。因为日历组件复杂度偏高，要适配多端环境难度偏大，纵观市面上的小程序 UI 组件库，包含日历组件的寥寥无几。尽管如此，咱们团队的大鱼兄仍独自挑起重担，几乎完美地实现了该组件，此处掌声献给大鱼兄。

日历组件功能预览：

适配支付宝小程序、百度小程序

在 1.0 版本适配微信小程序时，咱们遇到了不少困难。好比：

• 微信小程序自定义组件使用 Shadow DOM 进行渲染，引发了如下几种问题：

  • 组件之间没法使用相邻选择器，如组件间加 border 的需求，最终只能经过新增 props 给开发者自行控制
  • 没法自定义 flex 布局组件，最终只能提供样式给开发者自行使用

• Component 组件对应 wxss 文件的样式，只对组件 wxml 内的节点生效。通过不断探索，才发现 addGlobalClass 这一属性，需在自定义组件内激活 addGlobalClass 选项，才能使自定义组件被 app.wxss 或页面的 wxss 中的全部的样式定义影响。。

• 原生组件的使用限制。因为原生组件脱离在 WebView 渲染流程外，原生组件的层级是最高的，因此页面中的其余组件不管设置 z-index 为多少，都没法盖在原生组件上。由此致使模态框等组件没法遮挡 input、textarea等原生组件，形成穿透效果。 可喜的是，微信官方团队已经在改善该问题，对小程序原生组件引入了同层渲染模式。经过同层渲染，小程序原生组件可与其余内置组件处于相同层级，再也不有特殊的使用限制。详见。

• 小程序不支持 requestAnimationFrame，没法很好地实现 js 动画。

克服完上述微信小程序的困难后，支付宝小程序和百度小程序的适配工做大可能是解决样式和某些API的差别。得益于 Taro 良好的支持，Taro UI 的适配工做暂时告一段落。

新增自定义主题功能

Taro UI 1.0 发布时只有一套默认的主题配色，为知足业务和品牌上多样化的视觉需求，UI 库支持必定程度的样式定制。

Taro UI 的组件样式是使用 SCSS 编写的，若是你的项目中也使用了 SCSS，那么能够直接在项目中改变 Taro UI 的样式变量。

新建一个主题样式文件（例如 custom-variables.scss）并覆盖默认主题变量：

/* 改变主题变量，具体变量名可查看 taro-ui/dist/style/variables/default.scss 文件 */
$color-brand: #6190E8;
/* 引入 Taro UI 默认样式 */
@import "~taro-ui/dist/style/index.scss";
复制代码

以后在项目的入口文件中引入以上的样式文件便可（无需重复引入组件的默认样式）。

目前，咱们额外定制了京东主题和 7Fresh 主题色，可经过扫描如下二维码查看。

京东主题：

7Fresh 主题：

新增主题生成器

为了让开发者更好地使用自定义主题功能，咱们还新增了主题生成器。开发者可使用该工具方便地定制 UI 主题。

主题生成器地址： nervjs.github.io/taro-ui-the…

效果预览：

新增 Issue Helper

虽然咱们配置了 Issue Template，但仍有部分开发者没有根据规范填写 Issue。咱们排查问题时常常须要再次询问版本号信息、复现代码等等，这不只消耗咱们维护项目的精力，还下降了 Issue 处理效率。所以咱们参考了 Ant 和 iView 团队的作法，制做了 Issue Helper 页面，帮助开发者更规范地填写 Issue。

Taro UI Issue Helper 地址： nervjs.github.io/taro-ui-iss…

此外，咱们发现重复制做 Issue Helper 页面是一件很浪费劳动力的事情，因而将 Issue Helper 封装成一个命令行工具，开发者能够经过简单配置 config.js，执行命令 issue-helper build 就能够生成所须要的页面。

Issue Helper 工具仓库地址： github.com/jimczj/issu…

将来计划

• 适配字节跳动小程序
• 国际化 i18n

致谢

感谢你们对 Taro UI 的使用与反馈，咱们会致力于将 Taro UI 打形成高质量组件库，不断丰富组件功能与特性，紧跟 Taro 的步伐适配更多平台。

最后，欢迎关注并使用咱们的组件库：

github.com/NervJS/taro…