- 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 组件同时也可以指定小程序原生的组件。
官方链接