反应还原仿微信聊天界面

一、项目概况

基于react react-DOM react-路由器-DOM redux react-redux web pack 2.0 react-照片擦拭swiper等技术混合开发的手机端仿微信界面聊天室——reactChatRoom，实现了聊天记录下拉刷新、发送消息、表情（动图),图片、视频预览，打赏、红包等功能。

二、技术栈视图模型框架：

作出反应状态管理：redux/react-redux页面路由：react-router-dom弹窗插件：wcPop打包工具：webpack 2.0环境配置：node.js cnpm图片预览：react-photoswipe轮播滑动：swiper

package.json依赖安装：

{ 'name': 'react-chatroom '，' version': '0.1.0 '，' private': true，' author': 'andy '，' dependencies ' : { ' react ' : '^16.8.6',' react-DOM ' : '^16.8.6',' react-redux ' : '^7.0.3',' react-router-DOM ' : '^5.0.0',' react-scripts ' : ' 0 . 9 . x '，' redux ' 333366入口页面index.js配置

/* * @desc入口页面索引。js */从“反应”导入做出反应；从“反应世界”导入ReactDOM//从“react-router-dom”导入{路由器作为路由器，路由}应用程序/App '；//引入状态管理从“反应-还原”导入{提供程序}”从"导入{store} ./store//导入公共样式"进口"。/资产/字体/图标字体。CSS“导入”./资产/CSS/重置。CSS“导入”./assets/css/layout.css'//引入wcPop弹窗样式"进口"。/assets/js/wcPop/skin/wcPop。CSS '//引入jsimport ./assets/js/font size ' react DOM。渲染(提供程序存储={ store } App//提供商，文档。getelementbyid(' App ')； 页面App.js主模板

从"反应"导入反应{组件};从“react-router-dom”导入{路由器、路由、交换机、路由器}从“反应-还原”导入{ connect }$从" jquery"//引入wcPop弹窗插件从""导入{ wcPop } ./assets/js/WCPoP/WCPoP//引入地址路由从""导入路由器。/路由器'//导入顶部、底部来自“”得tabbarimport HeaderBar ./组件/标题"从导入标签栏./组件/标签栏类应用程序扩展组件{构造器(道具){超级(道具)控制台。日志(' App主页面参数：\n' JSON.stringify(props，null，2))} render(){ let token=this。道具。令牌返回(路由器div类名='微信Tim _ _ panel clear fix ' div class name=' we _ _ ChaTim-wrapper flex box flex _ _ direction-column '/*顶部*/}交换机头巴//交换机{/*主页面*/} div CLaSS name=' wcim _ _ container flex 1 '/*路由容器*/}交换机{路由器. map((项目，索引)={返回路由键={索引}路径={项目。路径}精确渲染={props=(！item.meta ||！item.meta.requireAuth？(item.component {.道具} /) :(代币？item.component {.道具}/:重定向到={{pathname: '/login '，状态： {来自：道具。位置} }/)}/})} {/*初始化页面跳转*/}重定向推送至='/index '/Switch/div {/*底部TabBar */} Switch TabBar//Switch/div/div/Router)；} } const mapStateToProps=(状态)={ return {.state.auth } }导出默认连接(mapstatetorops)(App)；反应登录、注册模块/反应登录注册验证

从"反应"导入反应{组件};从“react-router-dom”导入{链接}，从“反应-还原”导入{连接}；从导入*作为操作././store/action//引入wcPop弹窗插件从""导入{ wcPop }././assets/js/wcPop/wcPop。js '类登录扩展组件{构造器(道具){ super(道具)这个。状态={ tel : ' '，pwd: ' '，vcode: ' '，vcodeText: '获取验证码，disabled: false，time : { 0 } }组件确实挂载了(){ if(this。道具。token){这个。道具。历史。push('/')} } render(){ return(div类名=' wcim _ lgregWrapper flex box _ flex _ direction-column './div ) } //提交表单handleSubmit=(e)={ e . Preventdefault()；变量=这个。国家。tel=这个。参考文献。同重视这一点。国家。pwd=这个。参考文献。pwd。重视这个。国家。vcode=这个。参考文献。vcode。值if(！这个。国家。电话){ WCPoP({ content : '手机号不能为空!'，样式： '背景： # ff3b 30color: # fff '，time : { 2 })；} else if(！checkTel(这个。国家。电话){ WCPoP({ content : '手机号格式不正确!'，样式： '背景： # ff3b 30color: # fff '，time : { 2 })；} else if(！这个。国家。pwd){ WCPoP({ content : '密码不能为空!'，样式： '背景： # ff3b 30color: # fff '，time : { 2 })；} else if(！这个。国家。vcode){ WCPoP({ content : '验证码不能为空!'，样式： '背景： # ff3b 30color: # fff '，time : { 2 })；} else { //获取登录之前的页面地址让redirectUrl=this。道具。位置。国家？这个。道具。位置。国家。来自。路径名： '/'//设置记下这个。道具。authtoken(getToken())这个。道具。authuser(这个。国家。电话)wcPop({ content : '注册成功!'，样式： '背景： # 41b 883color: # fff '，time: 2，end : function(){ that。道具。历史。push(ReDirectURl)})；} } //60s倒计时handleVcode=(e)={ e . preventdefault()；这个。国家。tel=这个。参考文献。同值if(！这个。国家。电话){ WCPoP({ content : '手机号不能为空!'，样式： '背景： # ff3b 30color: # fff '，time : { 2 })；} else if(！checkTel(这个。国家。电话){ WCPoP({ content : '手机号格式不正确!'，样式： '背景： # ff3b 30color: # fff '，time : { 2 })；} else { this。国家。时间=60这个。国家。disabled=true。倒计时();} }倒计时=(e)={ if(this。国家。时间0){ this。国家。时间-这个。setstate({ vcodetext : '获取验证码('这个。国家。time()' })//setTimeout(这个。倒计时，1000);setTimeout(()={ this。倒计时()},1000);} else { this。setstate({ time : 0，vcodeText: '获取验证码，disabled : false })} } } const mapstatopropps=(state)={ return }.state.auth } }导出默认连接(mapStateToProps，{ authtoken : actions。settoken，authUser: actions.setUser})(登录)总结

以上所述是小编给大家介绍的反应还原仿微信聊天界面，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！