Taro学习笔记

开发背景

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

项目结构

.
├── 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

页面数据到视图的流向

更新页面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上根据designWidth和deviceRatio写好的页面到了小程序上样式可能会不一样。

• config/index.js中有如下配置

  designWidth: 750,
  deviceRatio: {
    '640': 2.34 / 2,
    '750': 1,
    '828': 1.81 / 2
  },

• 项目在小程序下编译正常，h5报错

Cannot read property 'dispatch' of undefined

• Image组件

• 子组件调用父组件方法传递参数 如

const { onHandleClickNav } = this.props
return (
    <View onClick={e => onHandleClickNav(index, e)}></View>
)