Taro学习笔记

Taro学习笔记

Tags
前端
Published
June 26, 2020
Author
LIAOKUN

开发背景

需求在微信端提供一个小程序完成相关业务功能
选择了 Taro 作为本次开发的前端框架
Taro 遵循 React 语法规范,它采用与 React 一致的组件化思想,组件生命周期与 React 保持一致,同时支持使用 JSX 语法,让代码具有更丰富的表现力,使用 Taro 进行开发可以获得和 React 一致的开发体验。
借由Taro还可以直接把项目打包成微信/百度/支付宝/字节跳动/QQ小程序 、快应用、 H5 端 以及 移动端(React Native),为之后各平台的业务需求提前做好准备
之前项目用的大多是Vue,本次的开发还可以熟悉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

页面数据到视图的流向

静态页面  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
  • Image组件
使用本地图片需要先把图片import进来  然后赋值给Image组件的src属性
  • 子组件调用父组件方法传递参数 如
const { onHandleClickNav } = this.props return ( <View onClick={e => onHandleClickNav(index, e)}></View> )