taro 知識點

• 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

調試：微信小程序

1. 運行命令：npm run dev:weapp，會在dist文件夾下產生小程序須要的文件；
2. 微信開發者工具裏，點擊「小程序項目」，彈出的窗口中「項目目錄」選擇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 語法規範，定製了一套本身的組件庫規範。
  基於以上原則，在小程序端，咱們可使用全部的小程序原生組件，而在其餘端，咱們提供了對應的組件庫實現：

1. H5 端，@tarojs/components，同時也是須要引入的默認標準組件庫
2. RN 端爲，@tarojs/components-rn

• Taro 代碼與微信小程序代碼混寫
  Taro 項目 支持 Taro 的代碼與小程序原生的頁面、組件代碼混合存在，只須要將原生的頁面、組件代碼放入 src 目錄下，隨後在 入口文件 app.js 中定義好 pages 配置指向對應的原生的頁面便可，在原生頁面的配置中，你能夠經過 usingComponents 來定義須要引入的組件，這裏能夠指定 Taro 組件同時也能夠指定小程序原生的組件。
  官方連接