1. 程式人生 > >Taro 3 正式版釋出:開放式跨端跨框架解決方案

Taro 3 正式版釋出:開放式跨端跨框架解決方案

![](https://img2020.cnblogs.com/other/1992869/202007/1992869-20200701130712995-1539656443.png) 作者:凹凸曼 - yuche 從 Taro 第一個版本釋出到現在,Taro 已經接受了來自於開源社群兩年多的考驗。今天我們很高興地在黨的生日釋出 Taro 3(Taro Next)正式版,希望 Taro 未來的更多兩年能像一名共產主義戰士一樣經受住更多的考驗。以下是 Taro 3 的一些新增特性: ## 跨框架:React、Nerv、Vue 2、Vue 3、jQuery 在舊版本的 Taro,我們以微信小程式的開發規範為基準,使用 React/JSX 的方式來進行開發。而在 Taro 3,我們把這一思路量化為一個程式設計模型: 設微信小程式生命週期為一個 `interface`,不同的框架例項的生命週期雖然不盡相同,但我們可以根據框架生命週期分別新建一個 `class` 去 `implements` 小程式生命週期的 `interface`。相應地,小程式的元件/API/路由規範可以使用同樣的思路和模型讓不同框架的程式碼,執行在不同的端上: ![taro](https://img2020.cnblogs.com/other/1992869/202007/1992869-20200701130714335-1824348796.png) 在 Taro 3 中我們內建了 React、Nerv、Vue 2、Vue 3 四種框架的支援,開發者可以通過 `taro init` 命令建立對應的模板,並編寫與框架本身生命週期、呼叫方法合乎一致的程式碼(idiomatic code),在語法上也沒有任何的限制。 在四類框架之外,Taro 3 還提供 [jQuery-like API](https://github.com/NervJS/taro-rfcs/blob/jquery-like-api/rfcs/0000-jquery-like-api.md) 的支援,作為現代開發框架的補充和實現跨框架元件的方案。 ## 跨端:H5、微信、支付寶、百度、位元組跳動...小程式 和舊版本的 Taro 一樣,Taro 3 支援編譯到微信、京東、支付寶、百度、位元組跳動、QQ 等主流小程式平臺。 和小程式一樣,Taro 3 的 H5 端相較於之前版本的 Taro 是一次徹底的重寫:基礎元件現在全部使用 Web Components 構建,路由系統也完全與前端框架解耦,因此在 H5 端 Taro 也實現了跨框架。不管開發者使用的是 React、Vue 還是 Nerv,都可以同時執行在各種小程式和 H5 上。 ## 開放式外掛系統 Taro 3 在編譯時引入了基於 [Tapable](https://github.com/webpack/tapable) 的外掛系統,開發者可以通過編寫外掛的方式為 Taro 拓展更多功能或者為自身業務定製個性化功能。在執行時我們則從 [React Reconciler](https://github.com/facebook/react/tree/master/packages/react-reconciler) 中得到啟發,在 Taro 執行時也實現了一套修改執行時邏輯的 API。 也就是說,開發者可以在不修改甚至不瞭解 Taro 原始碼和實現的情況下通過 Taro 拓展更多端,拓展更多的框架。在下個 Minor 版本(`v3.1.0`)Taro 就會完成編譯時/執行時與端/框架的解耦,屆時開發者只要寫一個外掛就能拓展新的端或框架。未來 Taro 新增新的端或框架也會通過這樣的方式進行。 ## 開源治理與專案治理 為了與開發者更高效地交流,Taro 從 Vue.js 和 Ant Design 得到啟發,引入了 [Issue Helper 工具](https://nervjs.github.io/taro-issue-helper/)。為了讓 Taro 在重大特性更新和更改能穩步推進,我們又從 Rust、React 中學習,引入了 [RFC 流程機制](https://github.com/NervJS/taro-rfcs)。為了讓版本迭代更透明、更規範,Taro 在今後版本釋出也會遵守 [Milestone 機制](https://github.com/NervJS/taro/milestones?direction=asc&sort=due_date)。 文件是開發者最好的朋友。在 Taro 3 我們對文件也進行了改版和重新梳理,並推出了新的 [漸進式文件](),漸進式文件按照開發專案的順序介紹 Taro 的基礎概念和優化技巧,適合喜歡邊學邊做或對小程式開發沒有任何瞭解的開發者。 程式碼質量和穩定性對開源專案非常重要。Taro 也在嚴格貫徹 Code Review 機制,所有人的程式碼都要被稽核,沒有人例外。為了保證我們能更大膽地迭代新特性,在整個 Taro 3 開發期間我們總共添加了三萬行測試程式碼。 ## 微信小程式轉 React/Vue 早在 [Taro 1.2 釋出](https://aotu.io/notes/2018/12/17/taro-1-2/) 時,我們就提供微信小程式轉 Taro 的功能,轉換後的微信小程式應用會變成一個多端應用。現在這個功能也完全相容 Taro Next 的新架構,並且轉換後的程式碼提供 React 和 Vue 兩種選項。和以前一樣,只需要在微信小程式專案根目錄執行命令 `taro convert` : ```bash $ taro convert ``` 選擇想要轉換後的框架即可: ![convert](https://img2020.cnblogs.com/other/1992869/202007/1992869-20200701130714600-1265366112.jpg) ## 渲染 HTML 字串 在小程式中渲染 HTML 字串通常會使用 [wxparse](https://github.com/icindy/wxParse) 這樣的第三方庫,但 `wxparse` 的 API 複雜,拓展性弱,內部實現不準確,最重要的是現在已經停止了維護。比起 `wxparse`,Taro 3 的 HTML 字串渲染提供以下的特性: * API 與 Web 保持一致,可以直接通過 React 的 `dangerouslySetInnerHTML` 或 Vue 的 `v-html` 呼叫。 * 可以通過 CSS 直接控制標籤樣式 * 給已經渲染的 HTML 標籤繫結事件 * 在 HTML 解析和渲染都提供了鉤子函式滿足個性化渲染需求 你可以訪問文件[渲染 HTML](https://taro-docs.jd.com/taro/docs/html.html)瞭解更多資訊。 ## CSS-In-JS 在 React 社群有一個著名的 CSS-in-JS 解決方案: [styled-components](https://github.com/styled-components/styled-components)。但遺憾的是,`styled-components` 使用 `