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…