微信小程序項目開發實戰：用WePY、mpvue、Taro打造高效的小程序》（筆記4）支持React.js語法的Taro框架

Taro自己實現的狀況相似於mpvue，mpvue的將來展望中也包含了支付寶小程序，如今的版本中，也可使用不一樣的構建命令來構建出百度小程序的支持，如第10章所示，可是如今Taro先於mpvue實現了更多更好的「一端開發，多端編譯」開發方式。

Taro的編寫代碼方式和mpvue、WePY框架最大的一個差異就是，Taro並非基於Vue.js的語法規範，而是遵循React語法規範，它採用與React一致的組件化思想，組件生命週期與React保持一致，同時支持JSX語法，讓代碼具備更豐富的表現力，使用Taro進行開發能夠得到和React一致的開發體驗。

採用Taro開發小程序具備如下的優秀特效：

1. 支持使用npm/yarn安裝管理第三方依賴
2. 支持使用ES7/ES8甚至更新的ES規範，一切均可自行配置
3. 支持使用CSS預編譯器，例如Sass等
4. 支持使用Redux進行狀態管理
5. 支持使用Mobx進行狀態管理
6. 小程序API優化，異步API Promise化等等

和mpvue、WePY項目一致，使用Taro開發項目，首先也要安裝合適的npm和Node.js環境。

（1）Taro項目的開發須要安裝專用的Taro開發工具@tarojs/cli，可使用以下命令全局安裝，安裝效果如圖11-2所示。

npm install -g @tarojs/cli

圖11-2 安裝Taro

（2）安裝成功後，可使用taro -v測試安裝是否成功，效果如圖11-3所示，此時能夠進行taro項目的開發。

圖11-3 安裝成功

（3）在項目文件夾中使用以下命令建立Taro小程序，效果如圖11-4所示。

taro init myApp

圖11-4 使用taro建立項目

項目建立過程當中會自動建立git環境而且使用cnpm install命令安裝依賴，因此在建立項目成功後不須要手動在該項目程序中使用npm install或者是cnpm install安裝依賴，便可直接使用。

注意：npm 5.2以上也可在不全局安裝的狀況下使用npx建立模板項目，使用「npx @tarojs/cli init myApp」建立項目。

在項目文件夾中自動生成的文件結構，如圖11-5所示。由於已經使用了npm安裝，因此直接能夠運行。

圖11-5 文件結構

（4）建立新的項目後，可使用以下命令運行微信小程序，若是更改文件中的代碼，會自動從新加載，效果如圖11-6所示。

# npm script

$ npm run dev:weapp

$ npm run build:weapp

# 僅限全局安裝

$ taro build --type weapp --watch

$ taro build --type weapp

圖11-6 自動監聽改動，而且從新加載

微信小程序的結構化開發方法，少走彎路，高效開發，一塊兒來學習《微信小程序項目開發實戰：用WePY、mpvue、Taro打造高效的小程序》吧。