「Taro」將微信小程序轉換為多端應用，助力你的小程序佈局！

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

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

• 微信小程序轉多端應用
• 字節跳動（頭條）小程序支持
• CSS Modules 支持
• MobX 支持

微信小程序轉多端應用

就像博客大戰時代博客服務商提供了「搬家」工具一樣，Taro 現在也提供了「搬家」工具讓你方便地入駐 Taro 社區。轉換原有微信小程序應用非常簡單，只需要安裝 Taro 命令行工具，定位到待轉項目根目錄，運行命令：

$ taro convert

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

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

• EastWorld/wechat-app-mall ★5000+ - 微信小程序商城
• tumobi/nideshop-mini-program ★3000+ - 基於 Node.js + MySQL 開發的開源微信小程序商城
• RebeccaHanjw/weapp-wechat-zhihu ★1000+ - 仿知乎
• jectychen/wechat-v2ex ★400+ - V2EX

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

更多詳情可以訪問文檔 https://nervjs.github.io/taro/docs/taroize.html 瞭解更多。

字節跳動（頭條）小程序支持

作為一個「多端統一開發框架」，Taro 當然也不會放過字節跳動小程序。在 Taro 1.2，你可以通過如下命令進行字節跳動小程序端的編譯預覽及打包：

# npm>$ npm run dev:tt
$ npm run build:tt
# 僅限全局安裝
$ taro build --type tt --watch
$ taro build --type tt
# npx 用戶也可以使用
$ npx taro build --type tt --watch

選擇字節跳動小程序模式，你需要下載並打開字節跳動小程序開發者工具，然後在項目編譯完後選擇項目根目錄下 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 命令創建一個全新的 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 都非常歡迎你來吐槽或觀光：

https://github.com/NervJS/taro

PS：如果本文對您有幫助，煩請點贊 或 分享轉發哦！

筆者將持續更新更多技術乾貨、技術知識及最新技術動態！