taro+dva的实践

3,090 阅读1分钟

先贴上文档链接

taro: nervjs.github.io/taro/docs/R…

dva: dvajs.com/guide/

  1. taro的安装官网说的很详细,不再赘述

  2. 安装redux:

cnpm install --save redux @tarojs/redux @tarojs/redux-h5 redux-thunk redux-logger
  1. 安装dva:
cnpm install --save dva-core dva-loading
  1. dva配置文件: /src/utils/dva.ts
import { create } from 'dva-core';
import { createLogger } from 'redux-logger';
import createLoading from 'dva-loading';

let app
let store
let dispatch
let registered

function createApp(opt) {
  // redux日志
  opt.onAction = [createLogger()]
  app = create(opt)
  app.use(createLoading({}))

  if (!registered) opt.models.forEach(model => app.model(model))
  registered = true
  app.start()

  store = app._store
  app.getStore = () => store
  app.use({
    onError(err) {
      console.log(err)
    },
  })

  dispatch = store.dispatch

  app.dispatch = dispatch
  return app
}

export default {
  createApp,
  getDispatch() {
    return app.dispatch
  }
}
  1. 配置dvaApp的models: /src/models/index.ts,后面各个page的models都需要在这里"注册"一下
import index from '../pages/index/model'

export default [
    index
]
  1. 引入dva:/src/app.tsx,其中componentDidMount的生命周期函数大家可以自己配置,不用参考
import Taro, { Component, Config } from '@tarojs/taro'
import Index from './pages/index'
import "@tarojs/async-await";
import { Provider } from "@tarojs/redux";
import dva from './utils/dva'
import models from './models';
import { globalData } from "./utils/common";
import './app.less'

// 如果需要在 h5 环境中开启 React Devtools
// 取消以下注释:
// if (process.env.NODE_ENV !== 'production' && process.env.TARO_ENV === 'h5')  {
//   require('nerv-devtools')
// }

const dvaApp = dva.createApp({
  initialState: {},
  models: models,
});
const store = dvaApp.getStore();   //  getStore是一个函数!!!要执行!!!



class App extends Component {

  config: Config = {
    pages: [
      'pages/index/index'
    ],
    window: {
      backgroundTextStyle: 'light',
      navigationBarBackgroundColor: '#fff',
      navigationBarTitleText: 'WeChat',
      navigationBarTextStyle: 'black'
    }
  }

  async componentDidMount () {
    // 获取参数  涉及到globalData
    const referrerInfo = this.$router.params.referrerInfo;
    const query = this.$router.params.query;
    !globalData.extraData && (globalData.extraData = {});
    if (referrerInfo && referrerInfo.extraData) {
      globalData.extraData = referrerInfo.extraData;
    }
    if (query) {
      globalData.extraData = {
        ...globalData.extraData,
        ...query
      };
  }
}

  componentDidShow () {}

  componentDidHide () {}

  componentDidCatchError () {}

  // 在 App 类中的 render() 函数没有实际作用
  // 请勿修改此函数
  render () {
    return (
      <Provider store={store}>
        <Index />
      </Provider>
      
    )
  }
}

Taro.render(<App />, document.getElementById('app'))

至此taro+dva就配置完毕了,具体models是放在每个page的文件目录下还是统一放在单个文件目录下可根据自己习惯