安裝及使用

2020-05-12 17:45 更新

安裝

Taro 項(xiàng)目基于 node，請確保已具備較新的 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
# OR 使用 yarn 安裝 CLI
$ yarn global add @tarojs/cli
# OR 安裝了 cnpm，使用 cnpm 安裝 CLI
$ cnpm install -g @tarojs/cli

注意事項(xiàng)

值得一提的是，如果安裝過程出現(xiàn)sass相關(guān)的安裝錯(cuò)誤，請?jiān)诎惭bmirror-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

taro init myApp command screenshot

在創(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)換，針對不同端的啟動(dòng)以及預(yù)覽、打包方式并不一致

運(yùn)行

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

image

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

在使用 Taro 進(jìn)行多端開發(fā)中，請確保 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)問題，查詢方法請參見本章 "環(huán)境及依賴檢測" 章節(jié)，這時(shí)請將你的 Taro CLI 版本更新至項(xiàng)目依賴版本號(hào)相同的版本，如果還是出現(xiàn)問題，請向我們提出 Issue。

微信小程序

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

微信小程序編譯預(yù)覽及打包（去掉 --watch 將不會(huì)監(jiān)聽文件修改，并會(huì)對代碼進(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ì)對代碼進(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ì)對代碼進(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ì)對代碼進(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ì)對代碼進(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

京東小程序

選擇京東小程序模式，需要自行下載并打開京東小程序開發(fā)者工具（可郵件聯(lián)系 mp@jd.com 獲取內(nèi)測版本），然后在項(xiàng)目編譯完后選擇項(xiàng)目根目錄下 dist 目錄進(jìn)行預(yù)覽。

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

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

快應(yīng)用

選擇快應(yīng)用模式，需要自行下載并打開快應(yīng)用開發(fā)者工具，然后在項(xiàng)目編譯完后，在開發(fā)者工具中選擇「打開文件夾」選擇項(xiàng)目根目錄下 dist 目錄，點(diǎn)擊左邊的預(yù)覽圖標(biāo)（那個(gè)眼睛圖標(biāo)）進(jìn)行預(yù)覽。

快應(yīng)用編譯預(yù)覽及打包（去掉 --watch 將不會(huì)監(jiān)聽文件修改，并會(huì)對代碼進(jìn)行壓縮打包）

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

快應(yīng)用開發(fā)者工具如何使用？點(diǎn)擊了解

快應(yīng)用端開發(fā)流程

H5

H5 模式，無需特定的開發(fā)者工具，在執(zhí)行完下述命令之后即可通過瀏覽器進(jìn)行預(yù)覽

H5 預(yù)覽項(xiàng)目

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

H5 打包項(xiàng)目

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

React Native

React Native 端運(yùn)行需執(zhí)行如下命令，React Native 端相關(guān)的運(yùn)行說明請參見 React Native 教程

# yarn
$ yarn dev:rn
# npm script
$ npm run dev:rn
# 僅限全局安裝
$ taro build --type rn --watch
# npx 用戶也可以使用
$ npx taro build --type rn --watch
Note：React Native 端和其他端樣式兼容性差異較大，如果需要兼容 React Native 端，建議 React Native 端和其他端同步開發(fā)。
Note：如果要支持 React Native 端，必須采用 Flex 布局，并且樣式選擇器僅支持類選擇器，且不 支持 組合器 Combinators and groups of selectors。

以下選擇器的寫法都是不支持的，在樣式轉(zhuǎn)換時(shí)會(huì)自動(dòng)忽略。

.button.button_theme_islands {
  font-style: bold;
}

img + p {
  font-style: bold;
}

p ~ span {
  color: red;
}

div > span {
  background-color: DodgerBlue;
}

div span {
  background-color: DodgerBlue;
}

樣式上 H5 最為靈活，小程序次之，RN 最弱，統(tǒng)一多端樣式即是對齊短板，也就是要以 RN 的約束來管理樣式，同時(shí)兼顧小程序的限制，核心可以用三點(diǎn)來概括：

  • 使用 Flex 布局
  • 基于 BEM 寫樣式
  • 采用 style 屬性覆蓋組件樣式

RN 中 View 標(biāo)簽?zāi)J(rèn)主軸方向是 column，如果不將其他端改成與 RN 一致，就需要在所有用到 display: flex 的地方都顯式聲明主軸方向。

常用 CLI 命令

查看 Taro 所有命令及幫助

$ taro --help

更新

Taro 提供了更新命令來更新 CLI 工具自身和項(xiàng)目中 Taro 相關(guān)的依賴

更新 Taro CLI 工具

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

更新項(xiàng)目中 Taro 相關(guān)的依賴

$ taro update project [version]
version 為選填，如：1.x.x/latest 等，將會(huì)直接更新到指定版本。 若不填寫 version，將會(huì)更新到當(dāng)前項(xiàng)目 Taro 依賴的 主版本（major）的最新穩(wěn)定版，如當(dāng)前主版本沒有穩(wěn)定版本，則會(huì)更新到 latest 指定的版本。

如命令更新失敗，需要在 package.json 文件手動(dòng)更新依賴版本，然后重新安裝依賴。

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

Taro 提供了命令來一鍵檢測 Taro 環(huán)境及依賴的版本等信息，方便大家查看項(xiàng)目的環(huán)境及依賴，排查環(huán)境問題。在提 issue 的時(shí)候，請附上 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，就像圖里一樣：

Taro Doctor 診斷結(jié)果圖

快速創(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 命令對配置項(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


以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)