Taro,快速上手教程

 

介紹

Taro是一套遵循 React 語法規範的多端統一開發框架,支持用 React 的開發方式編寫一次代碼。

使用 Taro,我們可以只書寫一套代碼,再通過 Taro 的編譯工具,將源代碼分別編譯出可以在不同端(微信小程序、H5、RN 等)運行的代碼。

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

React 語法風格

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

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

安裝

先來安裝一下Taro吧

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

小夥伴們安裝成功了嗎,如果不出現什麼意外的情況下,基本上安裝都能成功,不成功的小夥伴看一下自己的node哦,node沒錯的話,可能是網絡的原因,可以嘗試一下cnpm吧

安裝成功後基本上可以看到以下畫面

Taro安裝成功

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

taro -v

Taro版本

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

好了安裝成功後,Taro就可以正常使用啦

創建項目

接下來創建項目就是嘍

Taro init demo

taro會以非常快速度創建完成
創建項目

這裏作者不知道爲啥地下有點不好,但不要緊,無關大雅

 

在創建完項目之後,Taro 會默認開始安裝項目所需要的依賴。一般來說,依賴安裝會比較順利,但某些情況下可能會安裝失敗,這時候你可以在項目目錄下自己使用安裝命令進行安裝

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

安裝依賴後進入項目目錄開始開發,具體Taro使用命令看一下項目的package.json目錄哦

dev環境啓動

先來運行一下吧,我們選擇以h5的方式啓動輸入

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 相關的依賴

$ taro update project [version]

version 爲選填,如:1.x.x/latest 等,將會直接更新到指定版本。 若不填寫 version,將會更新到當前項目 Taro 依賴的 主版本(major)的最新穩定版,如當前主版本沒有穩定版本,則會更新到 latest 指定的版本。

如命令更新失敗,需要在 package.json 文件手動更新依賴版本,然後重新安裝依賴。

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