Taro：將已有微信小程式轉換為多端應用

凹凸實驗室發表於2018-12-18
微信小程式

在距離 Taro 1.1 釋出 之後一個月，經歷了 500 多次提交和 17 個預覽版本的迭代之後，我們有信心在今天釋出 Taro 1.2 正式版。

Taro 1.2 比起 Taro 1.1 和其它的小程式開發框架，增加了許多首次在小程式框架上實現的功能，這些功能包括但不限於：

微信小程式轉多端應用

就像部落格大戰時代部落格服務商提供了「搬家」工具一樣，Taro 現在也提供了「搬家」工具讓你方便地入駐 Taro 社群。轉換原有微信小程式應用非常簡單，只需要安裝 Taro 命令列工具，定位到待轉專案根目錄，執行命令： 
$ taro convert
複製程式碼

Taro 就會把轉換好的程式碼生成在根目錄下的 taroConvert 資料夾。轉換後的程式碼是高可讀性的 JSX 程式碼，沒有額外的龐大元件庫開銷。你可以輕易地進行二次開發，或者直接將這些程式碼通過 taro build 命令生成任意 Taro 已經支援平臺的應用。

我們已經嘗試使用 taro convert 成功轉換了四個 GitHub 上最熱門的開源微信小程式應用，它們轉換之後都表現良好：

taro convert 不僅僅能支援轉換微信小程式應用，它還能轉換微信小程式第三方元件。例如 wxParse 經過 taro convert 編譯之後還能突破原有隻能解析 11 層 HTML 巢狀的限制，理論上可以解析無限層 HTML 巢狀。

更多詳情可以訪問文件 nervjs.github.io/taro/docs/t… 瞭解更多。

位元組跳動（頭條）小程式支援

作為一個「多端統一開發框架」，Taro 當然也不會放過位元組跳動小程式。在 Taro 1.2，你可以通過如下命令進行位元組跳動小程式端的編譯預覽及打包： 
# npm script
$ npm run dev:tt
$ npm run build:tt
# 僅限全域性安裝
$ taro build --type tt --watch
$ taro build --type tt
# npx 使用者也可以使用
$ npx taro build --type tt --watch
$ npx taro build --type tt
複製程式碼

選擇位元組跳動小程式模式，你需要下載並開啟位元組跳動小程式開發者工具，然後在專案編譯完後選擇專案根目錄下 dist 目錄進行預覽。

相應地，Taro 的平臺標識（process.env.TARO_ENV）也增加了新成員tt，代表位元組跳動小程式。

CSS Modules 支援

在 Taro 最早開源的時候我們就支援了 SCSS 、 LESS 和 Stylus，而在 Taro 1.2 中我們百尺竿頭更進一步，給社群帶來了 JSX 的好夥伴：CSS Modules。

對於 Taro 而言支援 CSS Modules 有著重要的意義。Taro 在 1.0 的時候已經支援元件的 style 傳入 JavaScript 物件，支援了 CSS Modules 之後元件的 className 也能做這點——這意味著 Taro 完全可以做到 JSX 的一項特性：「Everything in JavaScript」。同時，通過編輯器的自動補全和校驗功能，開發者再也不用擔心 CSS 類誤輸入和 CSS 類的命名問題。

你可以查閱文件 CSS Modules 的使用 找到 CSS Modules 的開啟方法。

CSS Modules 的支援主要由 Taro 社群的個人開發者 @MrKou47 (MrKou47) 開發，感謝他的貢獻。

MobX 支援

在小程式應用變得日趨複雜的今天，越來越多的開發者選擇使用獨立的狀態管理工具。在 Taro 1.1 你可以選擇 Redux 的體系的 redux-thunk 、dva-core、redux-saga 等工具。在 Taro 1.2 我們又帶來了 taro-mobx。

在 Taro 中使用 MobX 非常簡單，你可以通過 taro init <your app> 命令建立一個全新的 MobX 模板專案。也可以查閱 使用 MobX 文件將 taro-mobx 接入已有專案。

MobX 的支援主要由 Taro 社群的個人開發者 @nanjingboy (Tom Huang) 開發，感謝他的貢獻。

更多特性

面對社群裡給力的個人貢獻者，Taro 官方團隊也沒有閒著。在 Taro 1.2 開發期間通過 commit 關閉了 169 個 issue 的同時，我們還披星戴月帶來了更多特性。其中值得一提的是：

  • H5 路由系統徹底重構
  • 小程式元件的 props 支援傳入 JSX 元素
  • 支援 JSX 元素寫在 switch-case 中，並支援 if-else 和 switch-case 的多重巢狀
  • 支援引用別名（alias）
  • 與百度小程式和位元組跳動小程式官方通力合作，抹平了一大波和微信小程式的差異

你可以通過 CHANGELOG 查閱完整的功能迭代紀錄。

寫在最後

Taro 1.2 最為激動人心的功能顯然是「微信小程式轉 Taro」 功能，通過這個功能已有的微信小程式應用能轉化更好維護的 Taro（類 React） 程式碼，也能把 Taro 程式碼轉化為多端應用。

但更重要的是，本次 Taro 1.2 更新的兩個核心功能點均由個人開發者貢獻——這完全體現了 Taro 社群的活躍、強大和開放。我們也會長期地維護與社群開發者們的關係，與開發者們一同成長，互利互贏。這也是 Taro 選擇開源的意義所在。

如果你有任何想法，或者沒有想法，Taro 都非常歡迎你來吐槽或觀光：

github.com/NervJS/taro

相關文章