Taro，快速上手教程（一）

我的全部文章同步到：https://github.com/zhengzhuan...

前言

最近公司Boss準備開發幾款能夠在微信小程序端和H5端同時運行的一套商城，接着就是任務下發嘍，可是有一點，時間緊任務重，Boss直接說其餘的無論，反正幾個星期以內必須上線，~~~頭疼。那就只好想辦法嘍

機緣巧合在一個博客欄目看到了Taro的beta版本，研究下，內心小九九就像看一下，誰知道是啥呢，這不看不知道一看嚇一跳，先上個圖

這簡直是一個神器啊，基本上等於本身多了這麼多技能，感謝創做者們的激情付出

介紹

Taro是一套遵循 React 語法規範的多端統一開發框架

多端統一開發框架，支持用 React 的開發方式編寫一次代碼，生成能運行在微信小程序、H五、React Native 等的應用。

Taro 是一套遵循 React 語法規範的 多端開發 解決方案。現現在市面上端的形態多種多樣，Web、React-Native、微信小程序等各類端大行其道，當業務要求同時在不一樣的端都要求有所表現的時候，針對不一樣的端去編寫多套代碼的成本顯然很是高，這時候只編寫一套代碼就可以適配到多端的能力就顯得極爲須要。

使用 Taro，咱們能夠只書寫一套代碼，再經過 Taro 的編譯工具，將源代碼分別編譯出能夠在不一樣端（微信小程序、H五、RN 等）運行的代碼

官網：https://taro.aotu.io/

React 語法風格

Taro 遵循 React 語法規範，它採用與 React 一致的組件化思想，組件生命週期與 React 保持一致，同時支持使用 JSX 語法，讓代碼具備更豐富的表現力，使用 Taro 進行開發能夠得到和 React 一致的開發體驗。

其實說實話，就算不會React，跟着Taro學習，看幾遍也就會了，做者就這這樣學習的，嘻嘻

正言

廢話很少說，直接上，正所謂，算了忘了古詩詞了，接下來進入Taro的世界吧

安裝

先來安裝一下Taro吧

/** Quick Start With NPM Or Yarn **/
$ npm install -g @tarojs/cli
$ yarn global add @tarojs/cli

小夥伴們安裝成功了嗎，若是不出現什麼意外的狀況下，基本上安裝都能成功，不成功的小夥伴看一下本身的node哦，node沒錯的話，多是網絡的緣由，能夠嘗試一下cnpm吧

安裝成功後基本上能夠看到如下畫面

看到這裏證實你安裝成功了哦！下接下來輸入

taro -V

看一下版本哦，目前Taro可能處於初期開發階段，版本更新會比較快，不過沒關係，不會影響到你的項目哦，相反會更好

好了安裝成功後，Taro就能夠正常使用啦

建立項目

接下來建立項目就是嘍

Taro init demo

taro會以很是快速度建立完成

這裏做者不知道爲啥地下有點很差，但沒關係，無關大雅

當你看到這裏時，Taro項目就建立成功嘍，我感受做者仍是比較皮的，還有個可愛的小表情😊

Taro目錄

好了，看一下Taro目錄嘍

具體Taro使用命令看一下項目的package.json目錄哦

先來運行一下吧，輸入

npm run dev:h5

瀏覽器會自動打開一個10086端口的地址

Taro項目就建立成功啦，簡單吧，他的開發其實也挺簡單哦，快去上手吧

Taro介紹結尾，運行

微信小程序
選擇微信小程序模式，須要自行下載並打開微信開發者工具，而後選擇項目根目錄進行預覽。
微信小程序編譯預覽及打包

# npm script
$ npm run dev:weapp
$ npm run build:weapp

H5
H5 模式，無需特定的開發者工具，在執行完下述命令以後便可經過瀏覽器進行預覽
H5 編譯預覽及打包

# npm script
$ npm run dev:h5

React Native
React Native 端運行需執行以下命令，React Native 端相關的運行說明請參見 React Native 教程

# npm script
$ npm run dev:rn

百度小程序
選擇百度小程序模式，須要自行下載並打開百度開發者工具，而後在項目編譯完後選擇項目根目錄下 dist 目錄進行預覽。
百度小程序編譯預覽及打包

# npm script
$ npm run dev:swan
$ npm run build:swan

支付寶小程序
選擇支付寶小程序模式，須要自行下載並打開支付寶小程序開發者工具，而後在項目編譯完後選擇項目根目錄下 dist 目錄進行預覽。
支付寶小程序編譯預覽及打包

# npm script
$ npm run dev:alipay
$ npm run build:alipay

對了，Taro更新比較快，還要記得更新Taro項目哦

Taro 提供了更新命令來更新 CLI 工具自身和項目中 Taro 相關的依賴
更新 Taro CLI 工具

# taro
$ taro update self
# npm
npm i -g @tarojs/cli@latest
# yarn
yarn global add @tarojs/cli@latest

安裝成功嘍，看下一篇文章看Taro開的的第一個項目