【taro】-------------- Taro學習筆錄（初識taro）-------------【劉】

1、taro介紹

Taro 是一套遵循 React 語法規範的 多端開發 解決方案。從web、小程序、React-Native...

當業務要求同時在不一樣的端都要求有所表現的時候，針對不一樣的端去編寫多套代碼的成本顯然很是高，這時候只編寫一套代碼就可以適配到多端的能力就顯得極爲須要。

使用 Taro，咱們能夠只書寫一套代碼，再經過 Taro 的編譯工具，將源代碼分別編譯出能夠在不一樣端（微信/百度/支付寶/字節跳動小程序、H五、React-Native 等）運行的代碼。

https://nervjs.github.io/taro/

2、特性

taro的語法風格：

　　taro的語法是遵循react的語法規則，若是對react瞭解的狀況下則很容易上手。跟react同樣，使用的是JSX的語法。

taro的開發支持：

　　taro最初就是爲了多端項目開發而進行的研發的框架。目前支持

　　React-Native、H五、微信小程序、支付寶小程序、百度小程序、字節跳動小程序

　　由於微信小程序不支持npm進行第三方庫管理工具。並且還沒法使用一些比較新的 ES 規範等等。則taro對這一方面進行的改進，進行了優化。

　　✅ 支持使用 npm/yarn 安裝管理第三方依賴

　　✅ 支持使用 ES7/ES8 甚至更新的 ES 規範，一切均可自行配置

　　✅ 支持使用 CSS 預編譯器，例如 Sass 等

　　✅ 支持使用 Redux 進行狀態管理

　　✅ 支持使用 MobX 進行狀態管理

　　✅ 小程序 API 優化，異步 API Promise 化等等

3、taro安裝與使用

一、首先安裝taro的cli

　　經過node（node版本>=8.0.0）環境進行cli的安裝。

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

　　建立項目：

#使用CLI建立項目 $ taro init myTaro

　　

等待依賴安裝完畢。當前項目下進行運行

微信小程序運行打包：

# yarn $ yarn dev:weapp $ yarn build:weapp # npm script $ npm run dev:weapp $ npm run build:weapp

 

 百度小程序：

# yarn $ yarn dev:swan $ yarn build:swan # npm script $ npm run dev:swan $ npm run build:swan

 支付寶小程序：

# yarn $ yarn dev:alipay $ yarn build:alipay # npm script $ npm run dev:alipay $ npm run build:alipay

字節跳動小程序：

# yarn $ yarn dev:tt $ yarn build:tt # npm script $ npm run dev:tt $ npm run build:tt

H5運行：

# yarn $ yarn dev:h5 $ yarn build:h5 # npm script $ npm run dev:h5 $ npm run build:h5

React-Native

# yarn $ yarn dev:rn # npm script $ npm run dev:rn

更新CLI工具

# taro $ taro update self # npm npm i -g @tarojs/cli@latest # yarn yarn global add @tarojs/cli@latest
# 更新依賴
$ taro update project

4、taro的組成

1.使用taro每一個頁面都有一個 config配置，配置參數參考小程序。組件中不須要config

二、頁面的生命週期

taro的生命週期和react的生命週期是基本同樣的

componentWillMount 　　　　 componentDidMount shoulidComponentUpdate componentWillUpdate componentDidUpdate componentWillUnmount componentDidShow componentDidHide

taro能夠在任何生命週期中經過this.$router獲取到路徑地址和傳的參數

三、taro文件目錄擺放

公共組件都擺放到components目錄下。組件沒有config屬性。可是多了一個componentWillReceiveProps生命週期函數

 

 

四、Taro不能使用html標籤。只能使用內部的，而且須要引入纔可使用。標籤的首字母大寫

 

 五、路由跳轉與傳參

　　taro頁面跳轉，路徑必須和入口app.js中配置的一致。

 

路由傳參：經過路由傳參的形式傳遞數據，講參數拼接到路由後

跳轉成功後經過this.$router.params()獲取參數

六、頁面尺寸佈局

taro是頁面尺寸根據設計稿量取的多少就是多少。以PX和百分比佈局

taro會進行自動的換算。可是內聯樣式不會進行換算

 

七、靜態資源引用

對於本地的靜態資源的引用。使用es6語法進行引入使用