在 2018.6.7 我們對外開源了 多端統一開發框架——Taro。

Taro 是一個多端統一開發框架，它支援使用 React 的開發方式來編寫可以同時在微信小程式、Web 、React Native 等多個平臺上執行的應用，幫助開發者提升開發效率，改善開發體驗，降低多端研發成本。

自開源以來，Taro 一直廣受業界關注，其原理與思想也得到了廣泛開發者的認可，這對於我們來說無疑是一件令人振奮的事。但是由於初期 Taro 測試與實現方式的不足，導致在開源期間 Bug 較多，受到了一些質疑。為此，我們痛定思痛，積極接受了開源社群的意見與幫助，並努力探索提升 Taro 穩定性與效能的方式。經過不斷地迭代完善，已經讓 Taro 浴火重生。

1.0.0 真的來了

Taro 開源到現在 3 個月時間，累計釋出 70 餘日常版本及 20 餘 Taro 1.0.0 的 beta 版本，經過近百個版本的迭代優化，我們親身體會到 Taro 的 BUG 反饋越來越少，Taro 越來越健壯且完善，因此，我們有信心推出 1.0.0 正式版。

Taro 1.0.0 正式版在延續了之前版本優秀特性的同時，增加了更加豐富的特性與功能，並進行了多項小程式端/H5端的轉換優化，同時帶來了對 React Native 的轉換支援。

全新的小程式元件化

開源之初，由於種種原因，Taro 的微信小程式端元件化採用的是小程式 <template /> 標籤來實現的，利用小程式 <template /> 標籤的特性，將元件 JS 檔案編譯成 JS + WXML 模板，在父元件（頁面）的模板中通過 <template /> 標籤引用子元件的 WXML 模板來進行拼接，從而達到元件化的目的。

實踐證明，Template 模板方案是一個失敗的元件化方案，Taro 開源初期的 Bug 主要來源於此。因為這一方案將 JS 邏輯與模板拆分開了，需要手工來保證 JS 與模板中資料一致，這樣在迴圈元件渲染、元件多重巢狀的情況下，要保證元件正確渲染與 props 正確傳遞的難度非常大，實現的成本也非常高。而且，囿於小程式 <template /> 標籤的缺陷，一些功能（例如自定義元件包含子元素，等）無法實現。

所以，在經過艱辛的探索與實踐之後，我們採用了小程式原生元件化來作為 Taro 的小程式端元件化方案，並且通過一些處理，繞開了小程式元件化的諸多限制，為 Taro 的穩定性打下了堅實基礎，並帶來了以下好處：

• 小程式端元件化更加健壯
• 儘可能減少由於框架帶來的效能問題
• 依託官方元件化，方便以後解鎖更多可能

全面支援小程式生態

為了更好地幫助開發者使用 Taro 開發小程式，在 1.0.0 版本中，我們加強了對小程式生態的支援，主要提現在以下幾個方面。

支援引用小程式端第三方元件庫

受益於小程式元件化重構，我們在 Taro 中支援了直接引用小程式端第三方元件庫，讓 Taro 可以融入到小程式生態中，為開發者提供更多便利。

目前實測已經支援瞭如下知名第三方元件庫

• echarts-for-weixin，ECharts 的微信小程式版本
• iview-weapp，iview 的微信小程式版本
• vant-weapp，輕量、可靠的小程式 UI 元件庫
• wxParse，微信小程式富文字解析自定義元件，支援HTML及markdown解析

當然，Taro 不僅僅只支援上述元件庫，只要是按原生小程式規範編寫的元件庫都能在 Taro 中正常使用。

支援 Taro 程式碼與原生小程式程式碼混寫

與此同時，Taro 支援原生小程式程式碼與 Taro 程式碼混寫，因此，可以使用 Taro 愉快地將舊的小程式專案慢慢地改造成 Taro 專案了。

支援小程式端分包載入以及外掛引用

我們在 Taro 中也加入對原生小程式分包載入功能的支援，配置的方式與原生小程式基本一致，只需要在 app.js 入口檔案中加入 subPackage 欄位即可。

import Taro, { Component } from '@tarojs/taro'
class App extends Component {
  config = {
    pages: [
      'pages/index',
      'pages/logs'
    ],
    subPackages: [
      {
        root: 'moduleA',
        pages: [
          'pages/rabbit',
          'pages/squirrel'
        ]
      }
    ]
  }
}
複製程式碼

同時，Taro 也支援了使用小程式的外掛功能，可以在 Taro 中直接引用第三方的外掛

import Taro, { Component } from '@tarojs/taro'
import { View } from '@tarojs/Components'
class PageA extends Component {
  config = {
    usingComponents: {
      'hello-component': 'plugin://myPlugin/hello-component'
    }
  }

  render () {
    return (
      <View>
        <hello-component></hello-component>
      </View>
    )
  }
}
複製程式碼

小程式 setState 效能優化

在最初的開源版本中，小程式端 setState 僅僅是對小程式 setData 做了一次非同步封裝，最終呼叫 setData 更新的時候還是傳入了完整資料。

但眾所周知，小程式的檢視層目前使用 WebView 作為渲染載體，而邏輯層是由獨立的 JavascriptCore 作為執行環境，在架構上，WebView 和 JavascriptCore 都是獨立的模組，並不具備資料直接共享的通道。在呼叫 setData 之後，會將資料使用 JSON.stringify 進行序列化，再拼接成指令碼，然後再傳給檢視層渲染，這樣的話，當資料量非常大的時候，小程式就會變得異常卡頓，效能很差。

Taro 在框架級別幫助開發者進行了優化，在 setData 之前進行了一次資料 Diff，找到資料的最小更新路徑，然後再使用此路徑來進行更新。例如

// 初始 state
this.state = {
  a: [0],
  b: {
    x: {
      y: 1
    }
  }
}

// 呼叫 this.setState

this.setState({
  a: [1, 2],
  b: {
    x: {
      y: 10
    }
  }
})
複製程式碼

在優化之前，會直接將 this.setState 的資料傳給 setData，即

this.$scope.setData({
  a: [1, 2],
  b: {
    x: {
      y: 10
    }
  }
})
複製程式碼

而在優化之後的資料更新則變成了

this.$scope.setData({
  'a[0]': 1,
  'a[1]': 2,
  'b.x.y': 10
})
複製程式碼

這樣的優化對於小程式來說意義非常重大，可以避免因為資料更新導致的效能問題。

更加豐富的 JSX 語法支援

前面已經提到 Taro 使用 React 語法規範來開發多端應用，這樣就必然是採用 JSX 來作為模板，所以 Taro 需要將 JSX 編譯成各個端支援的模板，其中以小程式端最為複雜，Taro 需要將 JSX 編譯成小程式的 WXML 模板。

在開源的過程中，Taro 支援的 JSX 寫法一直在不斷完善，力求讓開發體驗更加接近於 React，主要包括以下語法支援：

• 支援 Ref，提供了更加方便的元件和元素定位方式
• 支援 this.props.children 寫法，方便進行自定義元件傳入子元素
• 在迴圈體內執行函式和表示式
• 定義 JSX 作為變數使用
• 支援複雜的 if-else 語句
• 在 JSX 屬性中使用複雜表示式
• 在 style 屬性中使用物件
• 只有使用到的變數才會作為 state 加入到小程式 data，從而精簡小程式資料

目前，除了 Taro 官方 ESLint 外掛 eslint-plugin-taro 中限制的語法之外，其他 JSX 語法基本都支援，而在原生元件化的幫助下，未來將會把 ESLint 的限制也逐條取消。

React Native 端轉換支援

在 Taro 1.0.0 中，我們將正式推出 React Native 端的轉換支援，可以將現有 Taro 專案轉換成 RN 版本，但需要注意對樣式的處理，因為 RN 支援的樣式非常有限，它是屬於 CSS 的子集，具體請移步 RN 端轉換注意事項。

Taro 的 RN 端基於 Expo 來進行編譯構建 RN 程式，開發方式和編譯命令與其他端類似，程式碼目錄結構與現有 Taro 專案也基本一致

RN 編譯預覽模式

# npm script
$ npm run dev:rn
# 僅限全域性安裝
$ taro build --type rn --watch
# npx使用者也可以使用
$ npx taro build --type rn --watch
複製程式碼

執行完命令之後，Taro 將會開始編譯檔案，最終獲得 RN 端的編譯指引，並且啟動你的應用了

React Native 端完整開發流程請移步 React Native 開發流程介紹。

更加健全的 TypeScript 支援

隨著前端專案的複雜度和規模的增加，近年來越來越多的專案開始使用 TypeScript 進行開發。Taro 也注意到了這一趨勢，在開源之初就提供了對 TypeScript 的支援。在社群的幫助下，Taro 對 TypeScript 的支援也更加健全和完善：

• @tarojs/cli 可以直接建立 TypeScript 專案
• @tarojs/components 包含了所有元件的型別定義
• @tarojs/taro 的所有 API 也都包含了型別定義
• @tarojs/redux 和 taro-ui 也都全部內建了型別定義
• 構建系統的編譯器從 Babel 切換到原生 TypeScript 編譯器，支援所有 TypeScript 語法

H5 端轉換優化

同時，Taro 在 H5 端的轉換中，也進行諸多轉換優化，修復了之前版本 H5 下諸多 Bug，讓 H5 端路由系統更加健壯，同時開放了 Webpack 配置，可以讓開發者自由地進行相關配置。

最後，附上 Taro 完整的 迭代歷程。

重生之路

正如上文提到，Taro 1.0.0 帶來許多新的優秀特性，而同時，在社群內的 Bug 反饋已經愈來愈少，這也是開源期間不斷努力打磨的結果。

從 6.7 到行文截止，Taro 一共經歷了 1800 餘次提交，平均每天近 20 次，最多的一天達 30 次。每一次提交都是進步，每一次提交都讓 Taro 更加強大。經過這麼多次迭代之後，已經讓 Taro 獲得重生，尤其是小程式元件化重構完成之後，Taro 從舊版架構的泥潭中一躍而出，成為更加健壯的開發框架。

在我們自己不斷反思、優化的同時，也積極融入開源社群，依託社群的力量去建設 Taro。

GitHub ISSUES 是檢驗一個開源專案靠譜程度的標準之一，到目前為止，一共收到了 500 餘個 ISSUES，已關閉近 400 個，關閉率在 80% 左右，未關閉的也大部分是一些功能的迭代需求。在 Taro 開發團隊內部更是要求每一個 ISSUE 的響應時間不能超過 24 小時。正是因為這些 ISSUES ，讓我們不斷意識到 Taro 的不足，讓我們知道如何去進行迭代。

同時，我們也一直鼓勵社群的開發者積極提 PR，一個優秀的開源專案需要依靠整個社群的力量才能完善起來，到目前為止，一共收到了 120 餘個 PR，已幾近全部合入，這些 PR 為 Taro 注入了許多新鮮血液，讓 Taro 更加健壯，我們也期望能有更多的開發者可以加入進來，一起來讓 Taro 更加美好。

在 GitHub 上交流之餘，我們也為開發者們開通了官方微信群供大家一起討論 Taro 與技術，目前已有超過 1700 位開發者在關注、使用 Taro ，期待更多開發者的加入。

開發者生態完善

在開源之初，Taro 一直處於封閉的狀態，沒有適配的 UI 庫，也無法使用第三方元件庫，而這些對開發效率的桎梏非常嚴重，社群內對此反饋較多。

所以，在 1.0.0-beta 版本開發期間，Taro 團隊開發了多端 UI 庫打包功能，提供了 taro build --ui 命令來將按照一定規則組織的程式碼打包成可以在 Taro 中使用的多端 UI 庫。

並且，基於這一功能，我們推出了首個可以跨多端使用的多端 UI 庫 Taro UI，目前已經支援了微信小程式與 H5 端，不久之後將完成 React Native 端的適配，可以同步提供給 React Native 端使用。

目前，多端 UI 庫打包功能還處於內測階段，在 Taro 1.0.0 釋出之後，這一功能將同步釋出，這樣更多開發者就可以為 Taro 開發更豐富的多端元件庫和 UI 庫了。

未來規劃

Taro 將會繼續保持迭代，目前已經規劃瞭如下重要功能：

便捷測試

在編譯時與執行時提供程式碼診斷的功能，分析程式碼優劣，判定程式碼寫法是否規範，以便幫助開發者規避一些由於寫法帶來的問題。

同時將提供一套測試方案，方便開發者書寫並執行元件測試用例，提升程式碼質量。

多端同步除錯

目前 Taro 只能一次除錯一個端，這對於開發多端應用來說效率略低，所以，計劃提供微信小程式/ H5 / React Native 端同時除錯的功能，可以一鍵啟動多端同時編譯，從而獲得多端同步預覽。

微信小程式/H5 程式碼轉 Taro 程式碼

目前已支援 Taro 程式碼到小程式程式碼、 H5 程式碼的轉換，在未來，將提供逆向轉換功能，幫助開發者將原本就存在的小程式/H5 專案直接轉換成 Taro 專案，從而讓原本只能執行在一端的專案獲得多端執行的能力，降低開發者的重構成本。

與 React 新特性保持同步

Taro 是遵循 React 語法規範的，但是 React 一直在迭代在變化，Taro 作為 React 的追隨者也將會保持與 React 新特性同步，讓 Taro 最大程度接近 React 開發體驗。

快應用端支援

目前 Taro 已經完成了快應用端元件庫與 API 的適配，快應用端的檔案轉換與模板轉換也正在開發中，不久的將來就會發布支援快應用端轉換的版本。

支付寶小程式與百度智慧小程式支援

已預研支付寶小程式與百度智慧小程式轉換的可行性，即將進入開發。

多端視覺化拖拽搭建

目前 Taro 是依靠開發者手工編寫程式碼來獲得多端應用的，Taro 未來計劃提供一個多端視覺化拖拽搭建的功能，可以通過拖拽元件的方式來生成多端應用。

同時，Taro 將聯合各大公司小程式開發團隊，推出豐富的行業模板，為各行業應用視覺化搭建提供完整的解決方案。

使用案例

在開源期間，隨著 Taro 的逐步完善，越來越多的開發者加入到 Taro 的使用、開發中，產生了更多更優秀的使用案例。

特別鳴謝

Taro 的發展離不開廣大開源愛好者的幫助，在此特別鳴謝廣大 Taro 的使用者以及 Taro 主要貢獻者（排名不分先後）。

• aijiacy
• AlexStacker
• AsukaSong
• atzcl
• Boshen
• Bless-L
• beidan
• Chen-jj
• cuitianze
• dogbutcat
• finian
• frontlich
• guotie
• icodytan
• JerrySir
• js-newbee
• jas0ncn
• jinjinjin0731
• kdong007
• kenberkeley
• Lizhooh
• Littly
• lolipop99
• lijinke666
• looch
• ladjzero
• limichange
• leeenx
• luckyadam
• ly525
• Manjiz
• mclockw
• Mr-Prune
• missmimia
• mushan0x0
• Pines-Cheng
• rojer95
• ronffy
• Songkeys
• Simbachen
• smoothdvd
• soulhat
• thewei
• wowlusitong
• xunge0613
• YikaJ
• yuche
• zaaack
• zacksleo
• ZodiacSyndicate
• zuoge85
• zuorichongxian