Taro 安裝及使用

安裝

Taro 項(xiàng)目基于 node，請(qǐng)確保已具備較新的 node 環(huán)境（?>=8.0.0?），推薦使用 node 版本管理工具 nvm 來管理 node，這樣不僅可以很方便地切換 node 版本，而且全局安裝時(shí)候也不用加 sudo 了。

CLI 工具安裝

首先，你需要使用 npm 或者 yarn 全局安裝?@tarojs/cli?，或者直接使用?npx?:

# 使用 npm 安裝 CLI
$ npm install -g @tarojs/cli@next
# OR 使用 yarn 安裝 CLI
$ yarn global add @tarojs/cli@next
# OR 安裝了 cnpm，使用 cnpm 安裝 CLI
$ cnpm install -g @tarojs/cli@next

注意事項(xiàng)

值得一提的是，如果安裝過程出現(xiàn)?sass?相關(guān)的安裝錯(cuò)誤，請(qǐng)?jiān)诎惭b?m?irror-config-china??后重試。

$ npm install -g mirror-config-china

項(xiàng)目初始化

使用命令創(chuàng)建模板項(xiàng)目

$ taro init myApp

npm 5.2+ 也可在不全局安裝的情況下使用 npx 創(chuàng)建模板項(xiàng)目

$ npx @tarojs/cli init myApp

在創(chuàng)建完項(xiàng)目之后，Taro 會(huì)默認(rèn)開始安裝項(xiàng)目所需要的依賴，安裝使用的工具按照 yarn>cnpm>npm 順序進(jìn)行檢測，一般來說，依賴安裝會(huì)比較順利，但某些情況下可能會(huì)安裝失敗，這時(shí)候你可以在項(xiàng)目目錄下自己使用安裝命令進(jìn)行安裝

# 使用 yarn 安裝依賴
$ yarn
# OR 使用 cnpm 安裝依賴
$ cnpm install
# OR 使用 npm 安裝依賴
$ npm install

進(jìn)入項(xiàng)目目錄開始開發(fā)，目前已經(jīng)支持 微信/百度/支付寶/字節(jié)跳動(dòng)/QQ 小程序、H5、快應(yīng)用以及 ReactNative 等端的代碼轉(zhuǎn)換，針對(duì)不同端的啟動(dòng)以及預(yù)覽、打包方式并不一致

運(yùn)行

Taro 需要運(yùn)行不同的命令，將 Taro 代碼編譯成不同端的代碼，然后在對(duì)應(yīng)的開發(fā)工具中查看效果。

微信小程序

選擇微信小程序模式，需要自行下載并打開微信開發(fā)者工具，然后選擇項(xiàng)目根目錄進(jìn)行預(yù)覽。

微信小程序編譯預(yù)覽及打包（去掉 ?—watch ?將不會(huì)監(jiān)聽文件修改，并會(huì)對(duì)代碼進(jìn)行壓縮打包）

# yarn
$ yarn dev:weapp
$ yarn build:weapp
# npm script
$ npm run dev:weapp
$ npm run build:weapp
# 僅限全局安裝
$ taro build --type weapp --watch
$ taro build --type weapp
# npx 用戶也可以使用
$ npx taro build --type weapp --watch
$ npx taro build --type weapp

百度小程序

選擇百度小程序模式，需要自行下載并打開百度開發(fā)者工具，然后在項(xiàng)目編譯完后選擇項(xiàng)目根目錄下 dist 目錄進(jìn)行預(yù)覽。

百度小程序編譯預(yù)覽及打包（去掉 ?—watch? 將不會(huì)監(jiān)聽文件修改，并會(huì)對(duì)代碼進(jìn)行壓縮打包）

# yarn
$ yarn dev:swan
$ yarn build:swan
# npm script
$ npm run dev:swan
$ npm run build:swan
# 僅限全局安裝
$ taro build --type swan --watch
$ taro build --type swan
# npx 用戶也可以使用
$ npx taro build --type swan --watch
$ npx taro build --type swan

支付寶小程序

選擇支付寶小程序模式，需要自行下載并打開支付寶小程序開發(fā)者工具，然后在項(xiàng)目編譯完后選擇項(xiàng)目根目錄下 dist 目錄進(jìn)行預(yù)覽。

支付寶小程序編譯預(yù)覽及打包（去掉 ?—watch? 將不會(huì)監(jiān)聽文件修改，并會(huì)對(duì)代碼進(jìn)行壓縮打包）

# yarn
$ yarn dev:alipay
$ yarn build:alipay
# npm script
$ npm run dev:alipay
$ npm run build:alipay
# 僅限全局安裝
$ taro build --type alipay --watch
$ taro build --type alipay
# npx 用戶也可以使用
$ npx taro build --type alipay --watch
$ npx taro build --type alipay

字節(jié)跳動(dòng)小程序

選擇字節(jié)跳動(dòng)小程序模式，需要自行下載并打開字節(jié)跳動(dòng)小程序開發(fā)者工具，然后在項(xiàng)目編譯完后選擇項(xiàng)目根目錄下 dist 目錄進(jìn)行預(yù)覽。

字節(jié)跳動(dòng)小程序編譯預(yù)覽及打包（去掉 ?—watch? 將不會(huì)監(jiān)聽文件修改，并會(huì)對(duì)代碼進(jìn)行壓縮打包）

# yarn
$ yarn dev:tt
$ yarn build:tt
# npm script
$ npm run dev:tt
$ npm run build:tt
# 僅限全局安裝
$ taro build --type tt --watch
$ taro build --type tt
# npx 用戶也可以使用
$ npx taro build --type tt --watch
$ npx taro build --type tt

QQ 小程序

選擇 QQ 小程序模式，需要自行下載并打開QQ 小程序開發(fā)者工具，然后在項(xiàng)目編譯完后選擇項(xiàng)目根目錄下 dist 目錄進(jìn)行預(yù)覽。

QQ 小程序編譯預(yù)覽及打包（去掉? —watch? 將不會(huì)監(jiān)聽文件修改，并會(huì)對(duì)代碼進(jìn)行壓縮打包）

# yarn
$ yarn dev:qq
$ yarn build:qq
# npm script
$ npm run dev:qq
$ npm run build:qq
# 僅限全局安裝
$ taro build --type qq --watch
$ taro build --type qq
# npx 用戶也可以使用
$ npx taro build --type qq --watch
$ npx taro build --type qq

常用 CLI 命令

查看 Taro 所有命令及幫助

$ taro --help

環(huán)境及依賴檢測

Taro 提供了命令來一鍵檢測 Taro 環(huán)境及依賴的版本等信息，方便大家查看項(xiàng)目的環(huán)境及依賴，排查環(huán)境問題。在提問題的時(shí)候，請(qǐng)附上 ?taro info? 打印的信息，幫助開發(fā)人員快速定位問題。

$ taro info
???? Taro v1.2.0-beta.15
  Taro CLI 1.2.0-beta.15 environment info:
    System:
      OS: macOS High Sierra 10.13.5
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 8.11.2 - /usr/local/bin/node
      Yarn: 1.8.0 - /usr/local/bin/yarn
      npm: 5.6.0 - /usr/local/bin/npm
    npmPackages:
      @tarojs/components: ^1.2.0-beta.3 => 1.2.0-beta.3
      @tarojs/plugin-babel: ^1.2.0-beta.3 => 1.2.0-beta.3
      @tarojs/plugin-csso: ^1.2.0-beta.3 => 1.2.0-beta.3
      @tarojs/plugin-sass: ^1.2.0-beta.4 => 1.2.0-beta.4
      @tarojs/plugin-uglifyjs: ^1.2.0-beta.3 => 1.2.0-beta.3
      @tarojs/rn-runner: ^1.2.0-beta.4 => 1.2.0-beta.4
      @tarojs/router: ^1.2.0-beta.3 => 1.2.0-beta.3
      @tarojs/taro: ^1.2.0-beta.3 => 1.2.0-beta.3
      @tarojs/taro-alipay: ^1.2.0-beta.3 => 1.2.0-beta.3
      @tarojs/taro-h5: ^1.2.0-beta.3 => 1.2.0-beta.3
      @tarojs/taro-swan: ^1.2.0-beta.3 => 1.2.0-beta.3
      @tarojs/taro-weapp: ^1.2.0-beta.3 => 1.2.0-beta.3
      @tarojs/webpack-runner: ^1.2.0-beta.3 => 1.2.0-beta.3
      eslint-config-taro: ^1.2.0-beta.3 => 1.2.0-beta.3
      eslint-plugin-taro: ^1.2.0-beta.3 => 1.2.0-beta.3

Taro Doctor

Taro Doctor 就像一個(gè)醫(yī)生一樣，可以診斷項(xiàng)目的依賴、設(shè)置、結(jié)構(gòu)，以及代碼的規(guī)范是否存在問題，并嘗試給出解決方案。

但和真正的醫(yī)生不一樣，Taro Doctor 不需要排隊(duì)掛號(hào)，也不用花錢。你只需要在終端運(yùn)行命令：?taro doctor?，就像圖里一樣：

快速創(chuàng)建新頁面

?Taro create —name [頁面名稱]? 能夠在當(dāng)前項(xiàng)目的pages目錄下快速生成新的頁面文件，并填充基礎(chǔ)代碼，是一個(gè)提高開發(fā)效率的利器。

CLI 配置

自 ?1.3.9? 開始支持

?1.3.9 ?開始 Taro 會(huì)在用戶根目錄下創(chuàng)建 .taro 文件夾，其中? .taro/index.json ?用于存放 CLI 相關(guān)配置。

開發(fā)者可以使用 ?taro config? 命令對(duì)配置項(xiàng)進(jìn)行一系列操作：

# 查看用法
$ taro config --help
# 設(shè)置配置項(xiàng)<key>的值為<value>
$ taro config set <key> <value>
# 讀取配置項(xiàng)<key>
$ taro config get <key>
# 刪除配置項(xiàng)<key>
$ taro config delete <key>
# 打印所有配置項(xiàng)
$ taro config list [--json]

其他常見問題

回到某個(gè)版本

需要安裝某個(gè)固定版本，或者回到某個(gè)版本，例如我們要安裝 ?1.3.9? ， 則如下：

# 使用 npm 安裝 CLI
$ npm install -g @tarojs/cli@1.3.9
# OR 使用 yarn 安裝 CLI
$ yarn global add @tarojs/cli@1.3.9
# OR 安裝了 cnpm，使用 cnpm 安裝 CLI
$ cnpm install -g @tarojs/cli@1.3.9

保持 @tarojs/cli 的版本與各端依賴版本一致

在使用 Taro 進(jìn)行多端開發(fā)中，請(qǐng)保持 Taro CLI 的版本與你項(xiàng)目的依賴版本一致，否則可能會(huì)出現(xiàn)編譯錯(cuò)誤或者運(yùn)行時(shí)錯(cuò)誤。

如果你所使用的 Taro CLI 版本為 1.3.9，而項(xiàng)目里使用的依賴版本為 1.3.20，則有可能會(huì)出現(xiàn)問題，這時(shí)請(qǐng)將你的 Taro CLI 版本更新至項(xiàng)目依賴版本號(hào)相同的版本，如果還是出現(xiàn)問題，請(qǐng)向我們提出問題。