但貌似還有沒被眾多的程式設計師接受，我曾經也寫過一次，或許是沒有熟練地掌握，寫起來並不是那麼的順暢，坑太多，和後端對接起來很麻煩，不得不改用其它方法框架。

我們再來看看京東開發的Taro——一套遵循React語法規範的多端統一開發框架。

What's Taro？

Taro 是由京東 - 凹凸實驗室打造的一套遵循 React 語法規範的多端統一開發框架

Taro 一直也保持著高速的迭代更新，現在釋出了 Taro 2.0，從CLI開始入手改造，將維護困難，CLI的程式碼複雜，分支多，可擴充套件性偏低等等問題逐一進行了解決，這才誕生的Taro 2.0。

Taro 2.0的CLI將會變得非常輕量，只做編譯平臺，處理不同平臺編譯入參等操作，隨後再呼叫對應平臺的 runner 編譯器 做程式碼編譯操作，而原來大量的 AST 語法操作將會改造成 Webpack Plugin 以及 Loader，交給 Webpack 來處理。

那麼它也是一次編寫，多端執行

taro 和 uni-app 都是一套程式碼多端執行，但taro存在著明顯的優勢，taro 對CLI更友好，處理精細複雜需求的時候更簡單，更得心應手，有著更高的開發效率和良好體驗。

現在市面上端的形態多種多樣，Web、React-Native、微信小程式等各種端大行其道，當業務要求同時在不同的端都要求有所表現的時候，針對不同的端去編寫多套程式碼的成本顯然非常高，這時候只編寫一套程式碼就能夠適配到多端的能力就顯得極為需要。

使用 Taro，我們可以只書寫一套程式碼，再通過 Taro 的編譯工具，將原始碼分別編譯出可以在不同端（微信/百度/支付寶/位元組跳動/QQ小程式、快應用、H5、React-Native 等）執行的程式碼。

特性

React 語法風格

Taro 遵循 React 語法規範，它採用與 React 一致的元件化思想，元件生命週期與 React 保持一致，同時支援使用 JSX 語法，讓程式碼具有更豐富的表現力，使用 Taro 進行開發可以獲得和 React 一致的開發體驗。

程式碼示例：

import Taro, { Component } from '@tarojs/taro'import { View, Button } from '@tarojs/components'export default class Index extends Component {  constructor () {    super(...arguments)    this.state = {      title: '首頁',      list: [1, 2, 3]    }  }  componentWillMount () {}  componentDidMount () {}  componentWillUpdate (nextProps, nextState) {}  componentDidUpdate (prevProps, prevState) {}  shouldComponentUpdate (nextProps, nextState) {    return true  }  add = (e) => {    // dosth  }  render () {    return (      <View className='index'>        <View className='title'>{this.state.title}</View>        <View className='content'>          {this.state.list.map(item => {            return (              <View className='item'>{item}</View>            )          })}          <Button className='add' onClick={this.add}>新增</Button>        </View>      </View>    )  }}

由於微信小程式端的限制，有極少數 JSX 的優秀用法暫時不能得到很好地支援，同時，為了遵循 React 語法，Taro 在寫法上也有一些自己的規範，具體可以參考：Taro 開發最佳實踐 。官網地址：https://taro.aotu.io/

快速開發微信小程式

Taro 立足於微信小程式開發，眾所周知小程式的開發體驗並不是非常友好，比如小程式中無法使用 npm 來進行第三方庫的管理，無法使用一些比較新的 ES 規範等等，針對小程式端的開發弊端，Taro 具有以下的優秀特性。

支援使用 npm/yarn 安裝管理第三方依賴支援使用 ES7/ES8 甚至更新的 ES 規範，一切都可自行配置支援使用 CSS 預編譯器，例如 Sass 等支援使用 Redux 進行狀態管理支援使用 MobX 進行狀態管理小程式 API 優化，非同步 API Promise 化等等支援多端開發轉化

Taro 方案的初心就是為了打造一個多端開發的解決方案。目前 Taro 程式碼可以支援轉換到 微信/百度/支付寶/位元組跳動/QQ小程式 、快應用、 H5 端 以及 移動端（React Native）。

多端

微信小程式轉 Taro

Taro 可以將你的原生微信小程式應用轉換為 Taro 程式碼，進而你可以通過 taro build 的命令將 Taro 程式碼轉換為對應平臺的程式碼，或者對轉換後的 Taro 程式碼用 React 的方式進行二次開發。

微信原生小程式轉 Taro 的操作非常簡單，首先必須安裝使用 npm i -g @tarojs/cli 安裝 Taro 命令列工具，其次在命令列中定位到小程式專案的根目錄，根目錄中執行：

$ taro convert

即可完成轉換。轉換後的程式碼儲存在根目錄下的 taroConvert 資料夾下。你需要定位到 taroConvert 目錄執行 npm install 命令之後就可以使用 taro build 命令編譯到對應平臺的程式碼。

此外

此外還給大家推薦一款基於·Taro框架開發的多端UI元件庫

Taro UI

Taro UI 特性：

基於 Taro 開發 UI 元件一套元件可以在 微信小程式，支付寶小程式，百度小程式，H5 多端適配執行（ReactNative 端暫不支援）提供友好的 API，可靈活的使用元件遷移至Taro 2.0特性

官方文件表示並不難，也給出詳細的遷移文件，例如：

1、更新 Taro CLI 和依賴版本

你可以根據自己的實際情況選擇升級全域性的 Taro 版本或者僅為你的某一個專案升級。

2、全域性 CLI 升級

如果你的 Taro CLI 以全域性方式安裝，並且你希望升級到 Taro 2.0 需要執行以下命令：

# 使用 Taro 自己$ taro update self 2.0.0# 如果你使用 MPM$ npm update -g @tarojs/[email protected]# 如果你使用 Yarn$ yarn global upgrade @tarojs/[email protected]

之後在你的專案目錄裡執行以下命令來升級依賴：

$ taro update project 2.0.0

3、單獨為某一個專案升級

這樣做的好處是全域性的 Taro 版本還是 1.x 的，多個專案間的依賴不衝突，其餘專案依然可以用舊版本開發。 如果你的專案裡沒有安裝 Taro CLI，你需要先裝一個：

# 如果你使用 NPM$ npm install --save-dev @tarojs/[email protected]# 如果你使用 Yarn$ yarn add -D @tarojs/[email protected]

然後在你的專案目錄裡執行以下命令來升級依賴：

# 如果你使用 NPM$ node ./node_modules/.bin/taro update project 2.0.0# 如果你使用 Yarn$ yarn taro update project 2.0.0

4、安裝 @tarojs/mini-runner 依賴

Taro 2.0 新增了 @tarojs/mini-runner 作為小程式的編譯依賴，所以你需要將它安裝在你的專案裡，執行：

# 如果你使用 NPM$ npm install --save-dev @tarojs/[email protected]# 如果你使用 Yarn$ yarn add -D @tarojs/[email protected]

。。。

還有很多遷移至 Taro 2.0方案，大家可以到官方API檢視。

小結

Taro作為另一個多端統一開發解決方案，固然比uni-app優秀，到目前，還在一直髮展優化，Taro團隊也在一直努力大規模的擴充套件優化中，使用者必然會日益遞增，希望Taro可以走得更遠，發展更好，讓越來越多的程式設計師受益。