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