小程序结构

*本项目使用taro框架，一套react代码实现H5和多种小程序多端应用，样式预处理使用stylus
*开发需要查阅taro文档（框架），react文档（组件），stylus文档（样式）
*小程序容器：view = div	text = span	 image = img

Config

配置文件，配置开发和测试环境的路径、请求地址、设备的比例、服务器代理等，类vue.config.js

Src

/Actions
    redux相关，用于全局存储数据，类似vuex
    修改数据的动作，调用里面的方法即可修改数据（改数据的方法）
    组件中如果引入userAct，即可调用里面的方法改全局仓库的数据

/reducers
    redux相关，
    定义了应该如何修改数据（应该怎么改数据）

/store
    redux相关，
    Store为仓库，存放数据的中心仓库（创建一个可响应的数据）

/apis
    /config.js
        接口路径

/index.js
    请求时的操作，发请求前验证token，拦截错误请求等

/assets
    静态文件夹，存放css文件和图片

/components
    组件，可复用的组件，只负责视图

/constants
    存放几个字符串常量（用于验证某个数组中数据是否包含某个字符）

/lib
    /Ec-canvas
        某个canvas库，用于渲染图表的库
    /plugins
        插件，顾名思义，处理日期格式
    /techarts
        图表组件，二次封装echarts和taro小程序图表组件，为了可同时兼容H5和小程序多端的可复用图表组件
    /utils.js
        公共方法，处理路径，路由跳转等，为了兼容H5和小程序的公共处理方法

    /pages
        页面组件，一个组件一个页面

    /public
        里面的txt文件，用于H5端把目录拷贝到生产环境目录里，原因不明

    /app.config.js
        多端全局配置，页面路由，tab菜单，全局的颜色等

    /app.jsx
        最上层容器div组件
        configStore  注入redux仓库
        vconsole  小程序中的调试控制台（可在手机里看控制台）

    /app.styl
        全局样式

    /index.html
        主页面html文件，里面有一个方法用于检测设备的宽度

Page

Index
Index.jsx  主页面
Components
Pagedriver 司机页面
Pageorder 订单页面（命名错误了）
Pageuser 用户页面（命名错误了）
Pageyunlidata 司机页面里的子页面

Components

Watermark 水印组件
Bigtabs 头部标签（司机，订单，用户），里面用了
swiperPromptview 提示器组件
Title 标题组件（比如数据洞察）
Select 横向选择框（比如城市、维度）
Datepicker 日期选择器（就是你看到的2022.03.08）
Trendtable 上涨下跌的表格（指标名称 一周趋势那个表格）
Custommultchart 一个可单选多选的表格（比如自定义指标）

怎样调用接口

1. 在/src/apis/configs.js 中加上接口地址
2. 在/src/actions/**.js 中写一个function

	import apis from "../apis";
	//apis是对taro的请求二次封装好的请求方法
	import Taro from "@tarojs/taro";
	//Taro.setStorageSync()方法，可以缓存数据
	//Taro.getStorageSync()方法，获取已缓存的数据
	export function getOverviewData(data, cb) {
	  return async dispatch => {
	    const key = Taro.getStorageSync("key"); //获取本地缓存的数据
	    const resp = await apis.getOverviewData({ key }, cb);
	    const res = resp.data || {};
	    const fields = (res.data && res.data.body) || [];
	    if (res.code === 0) {
	      dispatch({ type: "OverviewData", data: fields });
	    } else {
	      dispatch({ type: "OverviewDataMsg", data: res.message });
	    }
	  };
	}

getOverviewData 方法名，在组件中引入action文件调用此方法
Taro.getStorageSync(); //获取本地缓存的数据
apis.getOverviewData(); 调用接口操作，第一个参数是传入的数据，第二个是接口调用成功的回调，第一个参数是后端的res，使用方式如下：

apis.getOverviewData({
	name: 'xiaohei',
	(res)=>{ console.log(res) }
}); 

dispatch({ type: “OverviewData”, data: fields }); 将数据传到store中

3. 在组件中调用请求方法和获取仓库的数据

import { connect } from "react-redux";
import * as commonAct from "@/actions/common.act";
@connect(
  ({ apiData }) => {
    let { OverviewData = [], OverviewDataMsg = "" } = apiData;
    return {
      OverviewData,
      OverviewDataMsg
    };
  },
  //将仓库的数据绑在props里面
  dispatch => ({
    getOverviewData(data, cb) {
      dispatch(commonAct.getOverviewData(data, cb));
    }
  })
  //将方法绑在props里面
)

@connect 方法可以把全局的数据绑定在该组件的props里面
第一个参数 拿数据 ，将仓库的数据绑在props里面
第二个参数 绑定方法，方法绑在props里面

调用：

	this.props.getOverviewData({
		name: 'xiaohei',
		(res)=>{ console.log(res) }
	})

获取数据：

	this.props.OverviewData