先贴上文档链接
taro: nervjs.github.io/taro/docs/R…
dva: dvajs.com/guide/
-
taro的安装官网说的很详细,不再赘述
-
安装redux:
cnpm install --save redux @tarojs/redux @tarojs/redux-h5 redux-thunk redux-logger
复制代码
- 安装dva:
cnpm install --save dva-core dva-loading
复制代码
- 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
}
}
复制代码
- 配置dvaApp的models: /src/models/index.ts,后面各个page的models都需要在这里"注册"一下
import index from '../pages/index/model'
export default [
index
]
复制代码
- 引入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的文件目录下还是统一放在单个文件目录下可根据自己习惯