Taro開發多端應用

mochixuan發表於2019-03-06

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

使用前

第一次看到Taro是在github搜尋React外掛時看到(個人習慣,有時候會去搜尋一個語言的外掛在GitHub再按照Star排名，看看各個外掛功能，後期開發時用到這功能有個印象)，感覺挺好的外掛，以後開發小程式和快應用應該用的到，因為它直接使用react可以開發多端，相比於去看各個廠家小程式開發文件，使用Taro幾乎沒有學習成本。

為什麼要了解它

這次使用它開發一個簡單的網頁南瓜棋，小時候玩的一個遊戲，邏輯還是比較簡單的，主要是去了解下Taro優缺點，以後開發公司簡單小程式、快應用等做好準備，主要是瞭解他的侷限性。

開發感受

具體看文件，我簡單說下感受，我的前端水平:簡單的HTML、CSS瞭解複雜的網頁不會(動畫啥的還得看文件)，React-Native水平應該還是不錯，主流的React-Native框架都會搭建，開發，原生除錯，編寫沒問題,ES6沒問題。React看了2周吧，入門。這個Taro，直接寫按照文件走，沒出現問題。

缺點

由於之前大段時間開發RN的所以開發時直接使用style={styles.你的}這種開發，開發完H5時，打算執行在小程式上發現尷尬了，樣式全亂了，後面給尺寸加px。
用Mobx在store裡面有個方法我命名onChessGo，H5執行沒問題，小程式不行，排查了一段時間發現微信小程式裡的Mobx->store方法不能已on開頭，這個要注意。
好像暫時是不能引用三方UI庫的和UI元件庫的，這和Taro功能有關，可能一個小程式的庫肯定不能用在React-Native，這個缺陷會加大開發複雜頁面的時間，可能對於原生(各個小程式新功能)新功能支援可能也不會太及時，由於頁面簡單，瞭解時間端更多的缺陷也沒有看到。
return tsx時在非render裡面是不能執行的在微信小程式裡，H5沒問題。

優點

快速開發各端的應用，不需要任何學習成本(我這前端小白都直接開寫)，還提供各個應用的原生功能的介面方便使用者呼叫。
確實可以多端打包，親測有效，但演示和一些細節要注意了。
Taro自己開發了一個UI庫(Taro-ui)滿足了大部分的元件需求,最後最重要的一點是個人認為大多數小程式、H5、快應用都是用於引流或者簡單功能開發，這些功能開發Taro應該都可以滿足，還有就是時間和人力成本Taro也是有優勢。

應用南瓜棋

H5截圖

微信小程式截圖

支付寶小程式截圖

今日頭條小程式截圖

程式碼注意事項

1. 由於之前以為在H5上執行，其他地方樣式就一樣，可是後面發現不行，所以樣式用的內聯樣式，建議大家用css、less、scss這樣H5和其他端樣式應該一樣。
1. 有些命名不能用例如Mobx裡store裡的方法@action不能以on開發，微信小程式就調不懂。
1. 今日頭條小程式打包後有問題確實了project.config.json,反正我這邊編譯後匯入不了，我新建了一個project.config.json複製過去，可能是這個原因導致下面的UI不見了。
1. 我這邊測試來了正常: H5、微信小程式、支付寶小程式,編譯後缺少東西但可以執行：今日頭條小程式，其他的沒測試太耗時。