Taro開發多端應用

時間 2019-12-04

標籤 taro 開發多端應用简体版

原文原文鏈接

官方解釋: 使用 Taro，咱們能夠只書寫一套代碼，再經過 Taro 的編譯工具，將源代碼分別編譯出能夠在不一樣端（微信/百度/支付寶/字節跳動小程序、H五、React-Native 等）運行的代碼。css

使用前

第一次看到Taro是在github搜索React插件時看到(我的習慣,有時候會去搜索一個語言的插件在GitHub再按照Star排名，看看各個插件功能，後期開發時用到這功能有個印象)，感受挺好的插件，之後開發小程序和快應用應該用的到，由於它直接使用react能夠開發多端，相比於去看各個廠家小程序開發文檔，使用Taro幾乎沒有學習成本。前端

爲何要了解它

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

開發感覺

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

缺點

因爲以前大段時間開發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)知足了大部分的組件需求,最後最重要的一點是我的認爲大多數小程序、H五、快應用都是用於引流或者簡單功能開發，這些功能開發Taro應該均可以知足，還有就是時間和人力成本Taro也是有優點。

應用南瓜棋

H5截圖

微信小程序截圖

支付寶小程序截圖

今日頭條小程序截圖

代碼注意事項

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