Taro多終端開發實戰系列(二)
多終端統一開發框架的安裝和使用
Node 環境
Taro 是一個基於 NodeJS 的多端統一開發框架,在安裝使用 Taro 之前需要確保已安裝好 Node 環境。
你可以直接從 NodeJS 官網下載 NodeJS 安裝包來安裝 Node 環境,但我們更推薦使用 Node 版本管理工具 nvm 來安裝管理 Node,這樣不僅可以在不同版本的 Node 之間自由切換,而且在全局安裝的時候也不再需要加 sudo 了。
Npm 與 Yarn
安裝好 Node 之後你就可以直接使用 NPM 來安裝 Taro 的開發工具了,當然你還有一個選擇就是使用 Yarn,Yarn 是由 Facebook、Google、Exponent 和 Tilde 聯合推出了一個新 Node 包管理工具,相比於 NPM,它具有速度更快、安裝版本統一、更加清爽簡潔等特點。你可以從 Yarn 官網獲得相關的安裝信息。
查看版本號測試是否已經成功安裝:
Taro-cli
安裝好 NPM 或 Yarn 後,就可以全局安裝 Taro 開發工具 @tarojs/cli 了。如果你是使用 NPM 安裝,使用如下命令:
npm install -g @tarojs/cli
如果你是使用 Yarn 安裝,使用如下命令:
yarn global add @tarojs/cli
安裝完畢,測試一下是否安裝成功:
如果上述的版本都可以正常輸出,說明安裝的基礎準備已經就緒了。
使用
到目前我們已經完成了 Taro 的安裝,下面我們看看怎麼使用。我們將建一個叫做 myTaro 的項目。使用命令創建模板項目: taro init myTaro
命令行上會提示 Taro 即將創建一個新項目!,接着 Taro 會提示你輸入項目介紹,我們這裏輸入 我的第一個 Taro 項目;而後讓你選擇是否使用 TypeScript,我這裏不使用 TypeScript ,輸入 n ; 接着提供 CSS 預處理器選擇,有 Sass、Less、Seyless,我選擇了 Less;然後是選擇模板,再選擇默認模版,完成後,Taro 開始創建項目,自動安裝依賴,這裏可能需要等待一會。過一會就會出現創建myTaro成功的提示。
注:如果遇到安裝以來丟失的情況,請自行掛在cnpm進行依賴安裝。
其他安裝微信小程序、百度小程序、支付寶小程序都是大同小異的,可以參考官網的介紹,這裏不做詳細介紹了。官網地址:https://nervjs.github.io/taro/docs/GETTING-STARTED.html
H5
H5 模式,無需特定的開發者工具,在執行完下述命令之後即可通過瀏覽器進行預覽。H5 編譯預覽及打包:
# npm script
npm run dev:h5
# 僅限全局安裝
taro build --type h5 --watch
# npx 用戶也可以使用
npx taro build --type h5 --watch
React Native
React Native 端運行需執行如下命令,React Native 端相關的運行說明請參見 React Native 教程。
# npm script
npm run dev:rn
# 僅限全局安裝
taro build --type rn --watch
# npx 用戶也可以使用
npx taro build --type rn --watch
更新Taro
Taro提供了更新命令來更新CLI工具自身和項目中的Taro依賴。
更新Taro-cli 工具:
#taro
taro update self
# npm
npm i -g @tarojs/cli@latest
更新項目中的以來,執行下邊的命令
taro update project
運行
總結
今天的筆記主要記錄了環境安裝,taro-cli的安裝以及taro項目的初始化,再到trao項目的運行、編譯、啓動。這裏需要再次強調一下如果使用npx,請自行學習一下npx,並且瞭解npx的優點和缺點。
另外特別要注意安裝失敗的情況,一定要使用國內代理。