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