基于taro + taro-ui + dva 构建微信小程序

1.安装taro开发工具

//npm
npm install -g @tarojs/cli
//yarn
yarn global add @tarojs/cli

2.创建项目

taro init taroApp

3.引入dva

npm i dva-core dva-loading --save

4.在src 下新建目录 utils ,目录下新建文件dva.js

import { create } from 'dva-core';
import { createLogger } from 'redux-logger';
import createLoading from 'dva-loading';

let app;
let store;
let dispatch;

function createApp(opt) {
  // redux日志
  // opt.onAction = [createLogger()];
  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;
  }
}

//此时运行项目若出错找不到nervjs;
npm install 安装 nervjs

5.在项目入口aap.js引入

//先引入models,在src 下新建models目录，在目录下新建index.js文件，整合pages的models
import models from './models'
import dva from './utils/dva'
const dvaApp = dva.createApp({
  initialState: {},
  models: models,
});
const store = dvaApp.getStore();

6.安装taro-ui

npm install taro-ui

7.使用 taro-ui

// page.js
import { AtButton } from 'taro-ui'
// 除了引入所需的组件，还需要手动引入组件样式
// app.js
import 'taro-ui/dist/style/index.scss' // 全局引入一次即可

8.然后即可进行页面的开发