Taro快速上手

Taro简介

Taro

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'

export function createAction(options) {
  const { url, payload, method, fetchOptions, cb, type } = options
  return (dispatch) => {
    return fetch({ url, payload, method, ...fetchOptions }).then((res) => {
      dispatch({ type, payload: cb ? cb(res) : res })
      return res
    })
  }
}

tips

  • 如果是开发微信小程序在微信开发者工具中预览项目,而不是直接在网页预览。一方面因为网页上有很多微信的api不支持,另一方面在H5上根据designWidthdeviceRatio写好的页面到了小程序上样式可能会不一样。
  • 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>
)