Taro UI 2.0 釋出：新增自定義主題功能，適配更多小程式

凹凸實驗室發表於2019-02-27
UI

前言

轉眼間，Taro UI 釋出已有半年，感謝大家的支援，讓我們收穫了 GitHub 1400+ star。在此期間，我們不斷完善元件庫的功能和特性，新增了許多元件和小工具，包括但不限於:

  • 新增日曆、索引選擇、區域選擇、圖片選擇等十一個元件
  • 適配支付寶小程式、百度小程式
  • 新增自定義主題功能
  • 新增主題生成器，以幫助開發者更好地使用自定義主題功能
  • 新增 Issue Helper，以幫助開發者更規範地填寫 Issue

新增元件

在 1.0 版本釋出之後，我們又陸續新增瞭如下十一個元件：

  • 檢視元件：頁面提示、 分隔符、倒數計時、 幕簾 、步驟條
  • 操作反饋：全域性資訊元件
  • 表單：圖片選擇器、區域選擇器、索引選擇器、日曆元件、搜尋欄

其中，在社群裡呼聲最高的元件，非日曆元件莫屬。由於日曆元件複雜度偏高，要適配多端環境難度偏大，縱觀市面上的小程式 UI 元件庫，包含日曆元件的寥寥無幾。儘管如此，我們團隊的大魚兄仍獨自挑起重擔，幾乎完美地實現了該元件，此處掌聲獻給大魚兄。

日曆元件功能預覽：

calender

適配支付寶小程式、百度小程式

在 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 主題色，可通過掃描以下二維碼檢視。

京東主題：

Taro UI 2.0 釋出：新增自定義主題功能，適配更多小程式

7Fresh 主題：

Taro UI 2.0 釋出：新增自定義主題功能，適配更多小程式

新增主題生成器

為了讓開發者更好地使用自定義主題功能，我們還新增了主題生成器。開發者可以使用該工具方便地定製 UI 主題。

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

效果預覽：

theme-preview

新增 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…

相關文章