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截圖

H5
H5
H5
H5


微信小程式截圖

Taro開發多端應用


支付寶小程式截圖

Taro開發多端應用


今日頭條小程式截圖

Taro開發多端應用

程式碼注意事項

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

GitHub應用地址


React-Native 篇

七分設計感的純React-Native專案Mung

一個完整小巧的Redux全家桶專案

react-native拖拽排序

多功能React-Native-Toast元件

相關文章