❶ Taro 3.3 alpha 發布：用 ant-design 開發小程序
小程序的設計並沒有完全遵循 Web 規范，導致小程序生態和傳統 Web 開發生態之間的割裂，海量優秀的 Web 物料並不能直接用於小程序開發。因而 Taro 在相當一段時間內生態都相對薄弱，UI 框架選擇不多的問題更是深深困擾著開發者。
另一方面，業界有著存量的 H5 應用，中短期內 H5 應用適配到小程序端的需要還會存在。我們希望能減少 H5 應用遷移到小程序端的成本，甚至能夠直接運行在小程序端。
Taro 團隊一直在思考如何最大限度地在小程序環境中復用 Web 生態，直到 Taro 3.0 誕生後，這種想法有了落地的可能。下文將介紹基於 Taro 3.0 實現 H5 同構的思路與問題，以及我們嘗試適配了三大移動端 UI 框架 WEUI 、 Ant Design Mobile 、 VantUI 的實驗結果。
Taro 3.0 是一款重運行時的跨端框架，它通過模擬實現瀏覽器的 BOM 和 DOM API 實現了對 React、Vue 等 Web 開發框架的兼容。
既然已經有了瀏覽器環境的 BOM 和 DOM API，Taro 應用和 Web 應用之間的鴻溝在於小程序組件和 HTML 標簽之間的差異。
Taro3 的渲染數據流如下：
前端框架 -> Taro DOM -> 小程序 data
HTML 標簽和小程序組件的標簽名、屬性、事件是有差異的，而前端框架無需感知這些差異。
因此前端框架適配層、Taro DOM 層不需要改動，只要在 Taro DOM 序列化為小程序 data 這一步作映射即可。
HTML 標簽相對小程序組件封裝程度更低、功能更簡單，可以看作是小程序組件的子集。因此可以按一定的規則，把 HTML 標簽映射為小程序組件，如：
完整的標簽名映射規則請看： RFC 附錄一
如果 HTML 標簽的屬性能在對應小程序組件的屬性上找到對應，則進行映射，如：
完整的屬性名映射規則請看： RFC 附錄二
把 HTML 特有的事件在小程序端找到相似的事件進行映射，如：
完整的事件映射規則請看： RFC 附錄三
前文介紹了我們會把 HTML 標簽映射為小程序組件，但是 H5 應用中使用到的 CSS 標簽選擇器就會失效。
因此 Taro 使用了類名去進行模擬：
Taro 提供兩種內置的瀏覽器默認樣式，可以直接引入生效：
理想很美好，但現實卻略顯骨感。即使 Taro 能實現 BOM、DOM API，支持使用 HTML 標簽等，同構方案還是存在著一些框架層面抹平不了的差異。以下列舉出若干主要限制：
在 H5 中我們可以調用 DOM API 同步獲取元素的尺寸：
但是在小程序中，獲取元素尺寸的 API 是非同步的：
因此不能兼容那些使用了同步 DOM API 去獲取元素尺寸的組件。
<canvas> 、 <video> 、 <audio> 等標簽在 H5 端可以直接調用 HTMLElement 上的方法：
但是在 Taro 中，要調用組件上的原生方法，必須先創建對應的 Context ：
部分樣式或 CSS 選擇器在小程序中不支持，如：
首先需要安裝 v3.3 的 CLI 工具：
然後進入項目，把 package.json 文件中 taro 相關依賴的版本修改為 ^3.3.0-alpha.2 ，再重新安裝依賴（建議先把 node_moles 文件夾刪除）。
為了節省項目空間，同構功能是可選的，以 Taro 插件的形式提供。
首先開發者需要安裝插件 @tarojs/plugin-html ：
然後配置使用此插件：
為了驗證同構功能的可用性和效果，我們對 CSS 樣式庫 WEUI 、React 組件庫 Antd Design Mobile 、Vue2 組件庫 VantUI 的所有組件進行了測試。
測試效果比較理想，甚至稍微超出我們的預期，配合各組件庫自身的按需載入能力，能以小巧的體積使用豐富的組件，相信各位開發者會喜歡這個功能。
倉庫地址： taro-weui
WEUI 是一個 CSS 的樣式庫，與框架無關，兼容性比較高，大部分組件能直接使用。
倉庫地址： taro-antd-mobile
能直接兼容使用的組件大概為 80%，主要問題在於：
倉庫地址： taro-vant
VantUI 的組件十分豐富，能直接兼容使用的組件大概為 70%。部分開發者會在 Taro 中配合使用 Vant Weapp，但 Vant Weapp 只能運行在微信小程序，因此對 VantUI 的直接適配是一個很好的補充。
適配過程主要遇到的問題有：
同構方案還在持續優化中，部分實現還沒有最終定稿。歡迎各位開發者到我們的論壇下留言，提出您的寶貴意見～： 同構方案 RFC 。
歡迎關注凹凸實驗室