创立 taro 模板我的项目
须要用 npm 或者 yarn 全局装置 @tarojs/cli
# 应用 npm 装置 CLI
$ npm install -g @tarojs/cli
# OR 应用 yarn 装置 CLI
$ yarn global add @tarojs/cli
# OR 装置了 cnpm,应用 cnpm 装置 CLI
$ cnpm install -g @tarojs/cli
查看 Taro 全副版本信息
能够应用 npm info @tarojs/cli
查看 Taro 版本信息,在这里你能够看到以后最新版本
我的项目初始化
应用 taro init myApp
能够创立初始化我的项目
npm 5.2+ 也可在不全局装置的状况下应用 npx @tarojs/cli init myApp
创立模板我的项目
编译运行
应用 npm run dev:weapp
命令进行编译,编译好了之后,下载并关上微信开发者工具,而后抉择我的项目根目录进行预览。
以上过程能够到 Taro 官网上去看。
配置 dva
装置 react-redux
,有很多博客下面说的是装置tarojs/redux
,然而这个包在 taro3.x 曾经没有了,所以这里装置 react-redux
。
cnpm i --save react-redux
装置 dva-core
和dva-loading
cnpm i --save dva-core dva-loading
dva 须要挂载所有的 models,所以在 src 目录创立 models 目录,并在 models 目录下的 index.js 返回我的项目中创立的所有 model
// src/models/index.js
import users from '../pages/index/model'
export default [users,];
users 为我的项目中创立的 model
// src/pages/index/model
export default {
namespace: 'users',
state: {title: 'Hello World'},
effects: {},
reducers: {save(state, { payload}) {return { ...state, ...payload};
},
},
};
在 src 目录下创立 utils 目录,并在 utils 目录里创立 dva.js 文件
// src/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({}));
if(!global.registered){opt.models.forEach(model => app.model(model));
}
global.registered = true;
app.start();
store = app._store;
app.getStore = () => store;
dispatch = store.dispatch;
app.dispatch = dispatch;
return app;
}
export default {
createApp,
getDispatch: () => {return app.dispatch;}
}
在入口文件 app.js 里应用 dva.js 返回的办法创立一个 app 获取 store,并将 store 挂载到 Provider 容器外面
// src/app.js
import {Component} from 'react'
import dva from './utils/dva'
import {Provider} from 'react-redux'
import models from './models'
import './app.less'
const dvaApp = dva.createApp({initialState: {},
models
})
const store = dvaApp.getStore();
class App extends Component {componentDidMount () {}
componentDidShow () {}
componentDidHide () {}
componentDidCatchError () {}
// this.props.children 是将要会渲染的页面
render () {return <Provider store={store}>{this.props.children}</Provider>
}
}
export default App
到此,配置 dva 实现
验证配置的 dva 是否可用,在 pages/index/index.jsx 应用 connect 连贯 model 和组件,并打印 this.props
// pages/index/index.jsx
import {Component} from 'react'
import {View, Text} from '@tarojs/components'
import {connect} from 'react-redux'
import './index.less'
@connect(({users})=>({users}))
export default class Index extends Component {componentWillMount () { }
componentDidMount () {}
componentWillUnmount () {}
componentDidShow () {}
componentDidHide () {}
render () {console.log(this.props);
return (
<View className='index'>
<Text>Hello world!</Text>
</View>
)
}
}
this.props 外面存在 model 外面的 state,连贯胜利!