- taro 的包：
| 包名 | 說明 |
|---|---|
| @tarojs/redux | Redux for Taro |
| @tarojs/redux-h5 | Forked react-redux for taro |
| @tarojs/plugin-csso | Taro壓縮CSS文件 |
內置環境變量
process.env.TARO_ENV用於判斷當前編譯類型，目前有 weapp / swan / alipay / h5 / rn 五個取值
環境判斷
- Taro.ENV_TYPE
| 環境字符串 | 環境 |
|---|---|
| ENV_TYPE.WEAPP | 微信小程序環境 |
| ENV_TYPE.SWAN | 百度小程序環境 |
| ENV_TYPE.ALIPAY | 支付寶小程序環境 |
| ENV_TYPE.WEB | WEB(H5)環境 |
| ENV_TYPE.RN | ReactNative 環境 |
- Taro.getEnv()
獲取當前環境值，具體值如上 Taro.ENV_TYPE
調試：微信小程序
- 運行命令：
npm run dev:weapp，會在dist文件夾下產生小程序需要的文件； - 微信開發者工具里，點擊“小程序項目”，彈出的窗口中“項目目錄”選擇dist文件夾，即可。
路由功能
我們只需要在入口文件的 config 配置中指定好 pages，然后就可以在代碼中通過 Taro 提供的 API 來跳轉到目的頁面，例如：
// 跳轉到目的頁面，打開新頁面
Taro.navigateTo({
url: '/pages/page/path/name'
})
// 跳轉到目的頁面，在當前頁面打開
Taro.redirectTo({
url: '/pages/page/path/name'
})
設計稿及尺寸單位
在 Taro 中尺寸單位建議使用 px、 百分比 %，Taro 默認會對所有單位進行轉換。在 Taro 中書寫尺寸按照 1:1 的關系來進行書寫，即從設計稿上量的長度 100px，那么尺寸書寫就是 100px，當轉成微信小程序的時候，尺寸將默認轉換為 100rpx，當轉成 H5 時將默認轉換為以 rem 為單位的值。
如果你希望部分 px 單位不被轉換成 rpx 或者 rem ，最簡單的做法就是在 px 單位中增加一個大寫字母，例如 Px 或者 PX 這樣，則會被轉換插件忽略。
結合過往的開發經驗，Taro 默認以 750px 作為換算尺寸標准，如果設計稿不是以 750px 為標准，則需要在項目配置 config/index.js 中進行設置，例如設計稿尺寸是 640px，則需要修改項目配置 config/index.js 中的 designWidth 配置為 640。
目前 Taro 支持 750、 640 、 828 三種尺寸設計稿，他們的換算規則如下：
建議使用 Taro 時，設計稿以 iPhone6 750px 作為設計尺寸標准。
-
和 React/Nerv 不一樣的地方在於，Taro 不支持使用 點表示法 和運行時指定類型來引用組件，例如 <MyComponents.DatePicker /> 這樣的寫法在 Taro 中是無法正確編譯的。
官方鏈接 -
和 React/Nerv 的不同： React 可以使用 ... 拓展操作符來傳遞屬性，但在 Taro 中你不能這么做。
官方鏈接 -
布爾值、Null 和 Undefined 被忽略
false、null、undefined 和 true 都是有效的 children，但它們不會直接被渲染。下面的表達式是等價的：
<View />
<View></View>
<View>{false}</View>
<View>{null}</View>
<View>{undefined}</View>
<View>{true}</View>
這在根據條件來確定是否渲染 元素時非常有用。以下的 JSX 只會在 showHeader 為 true 時渲染組件。
<View>
{showHeader && <Header />}
<Content />
</View>
- 與 React/Nerv 最大的不同
屬性不能傳入 JSX 元素
考慮如下代碼：
const element = <Content footer={<View />} />
這樣的代碼在 Nerv/React 中使用是沒有問題的，但是在 Taro 中不能這么做。
官方鏈接
- 使用 PropTypes 檢查類型
隨着應用日漸龐大，你可以通過類型檢查捕獲大量錯誤。要檢查組件的屬性，你需要配置特殊的 propTypes 屬性：
import PropTypes from 'prop-types';
class Greeting extends Component {
render() {
return (
<h1>Hello, {this.props.name}</h1>
);
}
}
Greeting.propTypes = {
name: PropTypes.string
};
如上例，Taro 與 React 一樣，也支持PropTypes 檢查類型，目前在小程序端還有些問題，但在 H5 端可以使用，用法和在 React 里一樣。
官方鏈接
-
雖然 this.props 由 Taro 本身設置以及 this.state 具有特殊的含義，但如果需要存儲不用於視覺輸出的東西，則可以手動向類中添加其他字段。
如果你不在 render() 中使用某些東西，它就不應該在狀態中。
官方鏈接 -
組件庫說明
Taro 以 微信小程序組件庫 為標准，結合 jsx 語法規范，定制了一套自己的組件庫規范。
基於以上原則，在小程序端，我們可以使用所有的小程序原生組件，而在其他端，我們提供了對應的組件庫實現：
- H5 端，@tarojs/components，同時也是需要引入的默認標准組件庫
- RN 端為，@tarojs/components-rn
- Taro 代碼與微信小程序代碼混寫
Taro 項目 支持 Taro 的代碼與小程序原生的頁面、組件代碼混合存在，只需要將原生的頁面、組件代碼放入 src 目錄下，隨后在 入口文件 app.js 中定義好 pages 配置指向對應的原生的頁面即可，在原生頁面的配置中，你可以通過 usingComponents 來定義需要引入的組件，這里可以指定 Taro 組件同時也可以指定小程序原生的組件。
官方鏈接