Taro多終端開發實戰系列

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的優點和缺點。

另外特別要注意安裝失敗的情況,一定要使用國內代理。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章