Taro開發多端應用

官方解釋: 使用 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
H5
H5
H5


微信小程序截圖


支付寶小程序截圖


今日頭條小程序截圖

代碼注意事項

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

GitHub應用地址

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章