介紹
Taro是一套遵循 React 語法規範的多端統一開發框架,支持用 React 的開發方式編寫一次代碼。
使用 Taro,我們可以只書寫一套代碼,再通過 Taro 的編譯工具,將源代碼分別編譯出可以在不同端(微信小程序、H5、RN 等)運行的代碼。
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 -v
看一下版本哦,目前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 文件手動更新依賴版本,然後重新安裝依賴。