taro 知识点 - HelloWorld开发者社区

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，但它们不会直接被渲染。下面的表达式是等价的：
{false} {null} {undefined} {true}

这在根据条件来确定是否渲染元素时非常有用。以下的 JSX 只会在 showHeader 为 true 时渲染组件。

<View>
  {showHeader && <Header />}
  <Content />
</View>

官方链接

与 React/Nerv 最大的不同属性不能传入 JSX 元素考虑如下代码：

const element = <Content footer={} />

这样的代码在 Nerv/React 中使用是没有问题的，但是在 Taro 中不能这么做。官方链接

使用 PropTypes 检查类型随着应用日渐庞大，你可以通过类型检查捕获大量错误。要检查组件的属性，你需要配置特殊的 propTypes 属性：

import PropTypes from 'prop-types';

class Greeting extends Component { render() { return (
Hello, {this.props.name}
); } }

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