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…