创立我的项目的步骤我就不赘述了，官网有具体的步骤
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须要挂载所有的modelsimport 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 <Provider store={store}>{this.props.children}</Provider>  }}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 (      <View className='index'>        <Text>Hello HuangAolin</Text>      </View>    )  }}

3. 引入taro-ui

npm i --save taro-ui@3.0.0-alpha.3

在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 (      <View className='index'>        <AtButton type='primary'>终于好了</AtButton>      </View>    )  }}