创建项目的步骤我就不赘述了,官网有详细的步骤
Taro使用文档
提前下载微信开发者工具
前提
初始化好了一个Taro项目
步骤
1. 编译运行
npm run dev:weapp
2. 配置dva
2.1 安装 react-redux
npm i --save react-redux
2.2 安装 dva-core dva-loading
- dva-core 封装了redux和redux-sage的一个插件
dva-loading 管理页面的loading状态
npm install --save dva-core dva-loading
2.3 src目录下创建models目录,并在models目录下的index.js返回项目中创建的所有model
// dva需要挂载所有的models
import users from '../pages/index/model'
export default [
users,
];
users为pages/index 下面新建的model
其结构就和我们dva中的model一样
export default {
namespace: 'users',
state: {
title: 'Hello World'
},
effects: {},
reducers: {
save(state, { payload }) {
return { ...state, ...payload };
},
},
};
2.4 在src目录下创建utils目录,并在utils目录里创建dva.js文件
import { create } from 'dva-core';
import createLoading from 'dva-loading';
let app;
let store;
let dispatch;
function createApp(opt){
// 创建应用,返回dva实例
app = create(opt);
// 配置插件 createLoading是解决异步加载的过渡问题
app.use(createLoading({}));
if(!global.registered){
// 注册model
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;
}
}
2.5 在入口文件app.js里使用dva.js返回的方法创建一个app获取store,并将store挂载到Provider容器里面
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 {this.props.children}
}
}
export default App
配置完成,检测是否配置成功
在pages / index / index.jsx中连接model,并且输出this.props
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 (
Hello HuangAolin
)
}
}
3. 引入taro-ui
npm i --save [email protected]
在app.js引入样式
import 'taro-ui/dist/style/index.scss'
在pages/index/index.jsx中使用组件
import { Component } from 'react'
import { View, Text } from '@tarojs/components'
import { connect } from 'react-redux'
import { AtButton } from 'taro-ui'
import './index.less'
@connect(({users})=>({
users
}))
export default class Index extends Component {
componentWillMount () { }
componentDidMount () { }
componentWillUnmount () { }
componentDidShow () { }
componentDidHide () { }
render () {
console.log(this.props.users);
return (
终于好了
)
}
}