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 嵌套。

更多詳情能夠訪問文檔 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