Taro

Taro快速上手

司音

• 3 min read •view times
Taro 遵循 React 语法规范，它采用与 React 一致的组件化思想，组件生命周期与 React 保持一致，同时支持使用 JSX 语法，让代码具有更丰富的表现力，使用 Taro 进行开发可以获得和 React 一致的开发体验。

借由Taro还可以直接把项目打包成微信/百度/支付宝/字节跳动/QQ小程序 、快应用、 H5 端 以及 移动端（React Native），为之后各平台的业务需求提前做好准备

项目结构

项目基于 https://github.com/qit-team/taro-yanxuan

.
├── README.md
├── config
│   ├── dev.js  // 开发环境的host配置
│   ├── index.js  // 项目配置
│   └── prod.js  // 生产环境的host配置
├── dist  // 编译生成的文件目录
├── jsconfig.json
├── package-lock.json
├── package.json
├── project.config.json
├── src
│   ├── actions  // action目录
│   ├── app.js  // 入口文件
│   ├── app.scss
│   ├── assets  // 静态文件目录
│   ├── components  // 封装的组件
│   ├── constants  // 一些常量如后端接口路径
│   ├── index.html
│   ├── pages  // 页面目录
│   ├── reducers  // reducer目录
│   ├── store  // redux配置
│   ├── styles
│   └── utils  // 一些工具方法
└── yarn.lock

页面数据到视图的流向

静态页面  render()中渲染页面，使用constructor中state的初始值/store中state的各个对象初始值渲染视图

非静态页面  走一遍静态页面渲染流程，在生命周期中触发对state或props的操作，由state和props的变化触发视图的更新

更新页面state值

  • 通过 setState 异步更新页面中state的值
  • 使用@utils/requests中封装的fetch发起请求，请求返回后更新页面中state值

更新redux中store的值

  • 页面中使用 dispatch(const { dispatch } = this.props) 发起 action；在 @reducers相应的文件中更新state或经由 @actions中的代码处理完交给@reducers更新state；通过connect()连接 React 组件与 Redux store，触发视图的更新。
connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])
  • 在action中使用@utils/redux中封装的createAction发起异步请求，在@reducers中更新state
import fetch from './request'

tips

  • 如果是开发微信小程序在微信开发者工具中预览项目，而不是直接在网页预览。一方面因为网页上有很多微信的api不支持，另一方面在H5上根据designWidth和deviceRatio写好的页面到了小程序上样式可能会不一样。
  • config/index.js中有如下配置
  designWidth: 750,
  deviceRatio: {
    '640': 2.34 / 2,
    '750': 1,
    '828': 1.81 / 2
  },

如果设计稿宽度不是按750给的话需要修改相应的值或者把读出来的尺寸转化为750下的。

  • 项目在小程序下编译正常，h5报错
Cannot read property 'dispatch' of undefined

见 https://github.com/NervJS/taro/issues/2142

  • Image组件

https://nervjs.github.io/taro/docs/components/media/image.html

使用本地图片需要先把图片import进来  然后赋值给Image组件的src属性

  • 子组件调用父组件方法传递参数 如
const { onHandleClickNav } = this.props
return (
    <View onClick={e => onHandleClickNav(index, e)}></View>
)