创立我的项目的步骤我就不赘述了，官网有具体的步骤
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 <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>
    )
  }
}