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