Umi + DvaJS

前言

微信多开项目是为企业销售部门管理销售资源整的项目，开发中遇见了很多问题还是要总结一下滴：

1、关于UmiJS框架：

是一个可插拔的企业级 react 应用框架,里面内置集成了Dva,能让项目快速上手。

2、关于Dva框架：

也是react一个轻量级框架，dva = React-Router + Redux + Redux-saga ;主要解决react数据流问题.

3、整体项目：

image.png

项目目录如上:
-----| layouts:放置项目整体框架，头部和主体部分；
-----| models:文件夹内为全局 model；
-----| util 为封装的请求，其中events.js为数据兄弟组件之间事件传参（可不用）
-----| pages 放置所有的页面，如果用的约定式路由，那么每个模块的js文件名称为路由；
-----| .umirc.js 这个为项目配置文件（包括代理/配置式路由在这里配置）
-----| app.js ~~~~运行时配置文件,里面配置了dva捕获全局err;

4、部分功能模块：

4.1 用dva管理数据例子1：

  //global.js  
  export  default {
   namespace:  'global',
   state: {
  //是否为便捷模式
  isQuickMode:  false,
  //聊天对象好友0 还是 群 1  
  chatobject:-1,    
  },    
  reducers: {    
  // 改变首页显示模式    
  changeMode(state, { payload: data}) {    
  //此处必须返回一个新的state对象 不能直接改变原有state    
  return  Object.assign({},state,{    
  isQuickMode:  data.value    
  })    
  },    
  changeChatObj(state,{ payload: data}){    
  return  Object.assign({},state,{    
  chatobject:  data.value    
  })
  }
  }
  }

注：这个global.js是全局的model,进入首页一开始没有聊天对象，聊天对象可能是群或好友，所以设置全局chatobject变量存储聊天对象；isQuickMode判断用户是否是效率模式或者便准模式；点击切换模式，通过dispatch调用model中reducers中的方法，在wechat中的index.js中将数据connect到当前组件上的props，再绑定到子组件上之后在子组件LeftList中即可取到，设置左侧导航宽度,代码如下：

dispatch({
  type:'global/changeMode',
  payload:{
  value:!isQuickMode
  }
})

//将model 数据connect到当前组件上的props属性中
const  mapStateToProps  = (state)=>{
let { isQuickMode,chatobject} =  state.global;
  return {
    isQuickMode,
    chatobject
  }
}

4.2 用dva管理数据例子2：

点击添加微信号，弹出微信登录模态框；model 分两类，一是全局 model，二是页面 model，这里试了页面model,建chat.js，增加effects异步；Effect 是一个 Generator 函数，标识每一步的操作；reducers 中新建save方法为重新set state数据（reducers是唯一操作state的地方），代码如下：

  import  *  as  chatServer  from  '../services/chat';
  export  default {  
  namespace:  'chat',  
  state: {  
  test:0,  
  isshowMask:false  
  },
  reducers: {  
    save(state, { payload: { isshowMask } }) { 
      return { ...state,isshowMask};  
    }  
  },  
  effects: {
  *mytest({ payload: {isshowMask  =  false,page=1} },{ call, put,select }){  
    //put 为dispatch  
    const { data, headers } =  yield  call(chatServer.fetch, { page });  
    console.log(data)  
    yield  put({  
    type:  'save',  
    payload:{  
    isshowMask  
    }  
    })    
  
  }  
  }
}

dva 提供多个 effect 函数内部的处理函数call/put/select,
call：执行异步函数;put：用于触发 action ，类似于 dispatch;select：用于从 state 里获取数据;(注意：定义 effects 里面的函数切不能与reducers 里面的action名字相同，不会报错，浏览器直接崩了)。

4.3 表情picker：

本来引用了react 一个控件，但是与实际微信表情有出入，所以去网上下载了所有表情jif表情图片，循环渲染出表情，整一个数组对应多有表情的解释。

4.4 聊天界面：

区分自己和对方消息，区分图片类型消息/文字类型消息/文件类型消息，回车或发送在消息列表push一个新消息即可；

4.5 文件存储拖拽：

用了H5 的拖拽，只用了onDrop 没有真正操作dom移动，当onDrop时还是操作数据的增删；当拖动图片到指定位置，会触发onDrop；

5、Dva

1528436195004-cd3800f2-f13d-40ba-bb1f-4efba99cfe0d.png

Dva 是基于 React + Redux + Saga 的最佳实践沉淀, 做了 3 件很重要的事情, 大大提升了编码体验:

把 store 及 saga 统一为一个 model 的概念, 写在一个 js 文件里面

增加了一个 Subscriptions, 用于收集其他来源的 action, eg:一般路由~~~~

model 写法很简约, 类似于 DSL 或者 RoR, coding 快得飞起

( 注：Dva中Model中Subscriptions:subscription 是订阅，用于订阅一个数据源，然后根据需要 dispatch 相应的 action。在 app.start() 时被执行，数据源可以是当前的时间、服务器的 websocket 连接、keyboard 输入、geolocation 变化、history 路由变化等等。)

6、 umi-plugin-react

项目中配置了 dynamicImport ，路由跳转时loading,配置如下：

//* `webpackChunkName`，是否通过 webpackChunkName 实现有意义的异步文件名
//* `loadingComponent`，指定加载时的组件路径
//* `level`，指定按需加载的路由等级
dynamicImport: {

webpackChunkName:  true,

loadingComponent:  './component/PageLoading/index',

},