了解Taro
聽說Taro是從幾個星期前開始的，在一次飯桌上，一個小伙伴說：“Hey， 你聽說了Taro么，聽說只需要寫一套程序就可以生成H5，小程序以及RN的代碼模板，並且類似於React的語法。”“哦？還有這么好的事，趕緊研究一下。”
Taro初體驗
去官網，Github了解了一下，Taro是由京東·凹凸實驗室團隊開發的，在掘金上看到他們的發稿，大致歸(tu)納(cao)如下：
- 代碼組織與語法：微信小程序需要在js/wxss/wxml/json文件中來回切換
- 命名規范：微信文檔中的各種命名規范(駝峰、小寫中划線、小寫連寫)，慘不忍睹
- 開發方式：不能加載npm包，不能使用Sass/less等預處理器以及手動的文件處理
原文在這里：為何我們要用 React 來寫小程序 - Taro 誕生記
使用Taro
跑去官網，按照步驟，copy了demo運行了一下，大致如下：
npm install -g @tarojs/cli
taro init myApp
# H5端運行
$ npm run dev:h5
$ taro build --type h5 --watch
# 微信小程序端運行
$ npm run dev:weapp
$ taro build --type weapp --watch
起步在這里：Get Started，大致這樣就可以跑起來了，分別在瀏覽器和微信開發工具中運行了一下，都可以看到界面輸出，感覺還是不錯。
Taro語法
Taro的開發語法遵循React，基本上寫過React的都是很好上手。大致是這個樣子的：
import Taro, { Component } from '@tarojs/taro'
import Index from './pages/index'
import './app.scss'
class App extends Component {
// 項目配置
config = {
pages: [
'pages/index/index'
],
window: {
backgroundTextStyle: 'light',
navigationBarBackgroundColor: '#fff',
navigationBarTitleText: 'WeChat',
navigationBarTextStyle: 'black'
}
}
componentWillMount () {}
componentDidMount () {}
componentDidShow () {}
componentDidHide () {}
render () {
return (
<Index />
)
}
}
Taro感受
以下是我自己個人的感受，因為還沒有在項目中應用，可能有些地方說得不太妥當，還望指出。
一端開發，多端生成
正如Taro自己所說的，只需要寫一個版本的代碼，就可以編譯生成H5、微信小程序以及RN的代碼，在效率上確實會有所提升。
Non-Reacter的學習成本
如果作為一個'Reacter'，那么用Taro來開發項目的話肯定是沒什么上手難度的，但是如果是沒有寫過react項目的，那么可能最開始還是有學習成本。
文檔開發還有欠缺
對比了微信小程序官網和Taro的Gitbook文檔，大致上很多東西都是一一對應的，基本的許多場景都可以滿足，但是也有欠缺。比如：組件中的RichText在Taro中就介紹不足，在Taro中(可能_)和微信小程序中分別是這樣調用的：
// Taro
<RichText nodes={nodes} onTap={this.tap} />
// 微信小程序
<rich-text nodes="{{nodes}}" bindtap="tap"></rich-text>
文檔中缺乏了nodes以及onTap方法的說明，這可能需要開發者自己調試。但實際上我按照微信小程序的方法加上onTap之后，控制台是報方法未定義的錯誤，而實際上我是有寫的。【這點要是在實際開發中可能欲哭無淚，要么就是引入其他的庫或者自己手寫，無疑會增加開發成本以及風險】。
有人或許想說，我直接在生成的微信小程序代碼文件夾(dist)中加上不就可以了，但是你可能不是太好改，因為代碼是這樣的：
建議與總結
如果你的項目足夠下，並且沒有運用到特別復雜的組件，並且有開發多端代碼的需要，你可以嘗試使用Taro，因為即使你需要的組件沒有，也可以在有限的時間內方便地寫出來，而且京東商城小程序貌似也是用Taro寫的，以后應該會有更多的支持。除此之外，暫時可以先觀望觀望 O(∩_∩)O哈哈~