前言
微信多开项目是为企业销售部门管理销售资源整的项目，开发中遇见了很多问题还是要总结一下滴：
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',
},
网友评论