創建項目的步驟我就不贅述了，官網有詳細的步驟
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>
    )
  }
}