关于前端:Taro-328-dva搭建微信小程序框架

创立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，连贯胜利！