taro-redux-dva微信小程序项目实践

基础项目请关注上一篇
Taro-ui项目搭建

一、基础搭建

1、界面

2、目录

二、安装dva

1、安装

“dva”: “^2.4.1”,
“dva-core”: “^2.0.4”,
“dva-loading”: “^3.0.22”,

yarn add react-redux --save
yarn add dva --save
yarn add dva-core --save
yarn add dva-loading --save

dva：基于 react 和 react-router
dva-core：仅封装了 redux 和 redux-saga
dva-loading ： 监听异步加载状态

2、 在src下新建models目录

接着新建模块user.js,index.js
//user.js

let User = {
  namespace: "user",

  state: {
    name: "这是user的model",
    age: 1,
  },
  reducers: {
    overrideStateProps(state, { payload }) {
      return {
        ...state,
        ...payload,
      };
    },
    updateStateProps(state, { payload }) {
      const { name, value } = payload;
      return {
        ...state,
        ...{ [name]: { ...state[name], ...value } },
      };
    },
  },
  effects: {},
  subscriptions: {},
};
export default User;

//index.js

import user from "./user";
const model = [user];
export default model;

3、 在utils下新建dva.js

import { create } from "dva-core";
import createLoading from "dva-loading";

let app;
let store;
let dispatch;
function createApp(opt) {
  app = create(opt);
  app.use(createLoading({}));

  opt.models.forEach((model) => app.model(model));
  app.start();

  store = app._store;
  app.getStore = () => store;

  dispatch = store.dispatch;
  app.getDispatch = () => dispatch;

  return app;
}

export default { createApp };

4、 入口文件使用

import { Component } from "react";
import { Provider } from "react-redux";
import models from "./models";
import dva, { createApp } from "./utils/dva";
import "./app.scss";

class App extends Component {
  componentDidMount() {}

  componentDidShow() {}

  componentDidHide() {}

  componentDidCatchError() {}

  // this.props.children 是将要会渲染的页面
  render() {
    console.log(dva);
    const dvaApp = dva.createApp({
      initialState: {},
      models,
    });
    const store = dvaApp.getStore();
    console.log(store);
    return <Provider store={store}>{this.props.children}</Provider>;
  }
}

export default App;

4、 组件中使用

可以用connect ，也可以用hooks

//connect写法

import { Component } from 'react'
import { connect } from "react-redux";
import { View, Text } from '@tarojs/components'
import './index.scss'
const Index = (props) => {
    console.log("props", props)

    return <View><Text>首页</Text></View>

}
export default connect((state) => state)(Index)

//hooks写法

import { Component } from 'react'
import { useSelector, useDispatch } from "react-redux";
import { View, Text, Button } from '@tarojs/components'
import './index.scss'
export default (props) => {
    const dispatch = useDispatch();
    const { name, age } = useSelector((state) => state.user);
    const chageModel = () => {
        dispatch(
            {
                type: 'user/overrideStateProps',
                payload: {
                    name: "修改后的name"
                }

            }
        )
    }
    console.log("name", name)

    return <View><Text>首页</Text>
        <Button onClick={chageModel}>修改model数据</Button>
    </View>

}

三、保存基础架构

为了今后方便复用，基础项目保存到git
git地址： taroBasicWeapp

四、网络请求

1、taro请求基本使用

 Taro.request({
            url: "http://java.wxq.kekeschool.com:8087/messages/findByPage",
            data: {
                noticeType: 2,
                noticeTitle: ''
            },
            method: 'POST',
            header: {
                "content-type": "application/json", // 默认值
            },
            success: function (res) {
                console.log(res.data);
            },
        });

2、请求封装

为了更方便的使用，做一些封装处理

utils下新建request.js
引入taro的api做一些处理

import Taro from "@tarojs/taro";
import { HOST_WEAPP } from "./reauestHost";
const token = "840";
export default function request(params) {
  console.log("params", params);
  return new Promise((resolve, reject) => {
    let { url, method = "GET", data } = params;
    let contentType = "application/x-www-form-urlencoded";
    contentType = params.contentType || contentType;
    return Taro.request({
      isShowLoading: false,
      url: HOST_WEAPP + url,
      data: data,
      method: method,
      //   header: { "content-type": contentType, token: token }, // 默认contentType ,预留token
      // eslint-disable-next-line no-unused-vars
      success(res) {
        resolve(res);
      },
      error(e) {
        // eslint-disable-next-line no-undef
        reject(logError("api", "请求接口出现问题", e));
      },
    });
  });
}

每个模块，都在services目录下处理
例如user.js

import request from "../utils/request";
export default class {
  static questMassage(params) {
    return request({
      url: "/messages/findByPage",
      method: "POST",
      data: params || {},
    });
  }
}

使用的时候调用就OK了

五、taro-ui

npm install taro-ui
yarn add taro-ui

Taro-ui 引入index.scss错误问题
安装tao-ui时,如果出现报错，可以尝试更换taro-ui版本，因为目前taro ui2.+和taro3.+版本不兼容,使用以下命令可解决

npm install taro-ui@3.0.0-alpha.3
yarn add taro-ui@3.0.0-alpha.3

别名配置

config/index.js

const path = require('path') // eslint-disable-line
const config = {
  alias: {
    '@/api': path.resolve(__dirname, '..', 'src/api'),
    '@/components': path.resolve(__dirname, '..', 'src/components'),
    '@/assets': path.resolve(__dirname, '..', 'src/assets'),
    '@/store': path.resolve(__dirname, '..', 'src/store')
  }
}