react仿微信web版聊天室|仿微信客户端react版

基于react+react-dom+react-router-dom+redux+react-redux+webpack+nodeJs等技术混合开发的手机端仿微信界面聊天室——reactChatRoom，实现了聊天记录下拉刷新、发送消息、表情(动图)，图片、视频预览，打赏、红包等功能。

技术选型

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

◆ react入口页面index.js 及package.json依赖注入

{"name": "react-webchat","version": "0.1.0","private": true,"dependencies": {"react": "^16.8.6","react-dom": "^16.8.6","react-redux": "^7.1.0","react-router-dom": "^5.0.1","react-scripts": "0.9.x","redux": "^4.0.1","redux-thunk": "^2.3.0"},"devDependencies": {"jquery": "^2.2.3","react-custom-scrollbars": "^4.2.1","react-photoswipe": "^1.3.0","swiper": "^4.5.0"},"scripts": {"start": "set HOST=localhost&& set PORT=3003 && react-scripts start","build": "react-scripts build","test": "react-scripts test --env=jsdom","eject": "react-scripts eject"}
}

render() {let token = this.props.tokenreturn (<Router><div className="vChat-wrapper flexbox flex-alignc"><div className="vChat-panel" /*style={{ backgroundImage: `url(${require("./assets/img/placeholder/vchat__panel-bg02.jpg")})` }}*/ ><div className="vChat-inner flexbox">{/* //顶部（最大、最小、关闭） */}<Switch><WinBar /></Switch>{/* //侧边栏 */}<Switch><SideBar /></Switch>{/* //主页面 */}<div className="flex1 flexbox">{/* 路由容器 */}<Switch>{routers.map((item, index) => {return <Route key={index} path={item.path} exact render={props => (!item.meta || !item.meta.requireAuth ? (<item.component {...props} />) : (token ? <item.component {...props} /> : <Redirect to={{pathname: '/login', state: {from: props.location}}} />))} />})}{/* 初始化页面跳转 */}<Redirect push to="/index" /></Switch></div></div></div></div></Router>);}

◆ react+react-router-dom地址路由配置：

/**  @desc 页面地址路由js*/// 引入页面组件
import Login from '../views/auth/login'
import Register from '../views/auth/register'
import Index from '../views/index'
import Contact from '../views/contact'
import Uinfo from '../views/contact/uinfo'
import NewFriend from '../views/contact/new-friends'
import Ucenter from '../views/ucenter'
import News from '../views/news'
import NewsDetail from '../views/news/detail';export default [{path: '/login', name: 'Login', component: Login,meta: { hideSideBar: true },},{path: '/register', name: 'Register', component: Register,meta: { hideSideBar: true },},{path: '/index', name: 'App', component: Index,meta: { requireAuth: true },},{path: '/contact', name: 'Contact', component: Contact,meta: { requireAuth: true },},{path: '/contact/uinfo', name: 'Uinfo', component: Uinfo,},{path: '/contact/new-friends', name: 'NewFriend', component: NewFriend,meta: { requireAuth: true },},{path: '/news', name: 'News', component: News,},{path: '/news/detail', name: 'NewsDetail', component: NewsDetail,},{path: '/ucenter', name: 'Ucenter', component: Ucenter,meta: { requireAuth: true },},// ...
]

react+redux状态管理

// >>> 【编辑器+表情处理模块】------------------------------------------
// ...处理编辑器信息
function surrounds() {setTimeout(function () { //chromevar sel = window.getSelection();var anchorNode = sel.anchorNode;if (!anchorNode) return;if (sel.anchorNode === $(".J__wcEditor")[0] ||(sel.anchorNode.nodeType === 3 && sel.anchorNode.parentNode === $(".J__wcEditor")[0])) {var range = sel.getRangeAt(0);var p = document.createElement("p");range.surroundContents(p);range.selectNodeContents(p);range.insertNode(document.createElement("br")); //chromesel.collapse(p, 0);(function clearBr() {var elems = [].slice.call($(".J__wcEditor")[0].children);for (var i = 0, len = elems.length; i < len; i++) {var el = elems[i];if (el.tagName.toLowerCase() == "br") {$(".J__wcEditor")[0].removeChild(el);}}elems.length = 0;})();}}, 10);
}// 定义最后光标位置
var _lastRange = null, _sel = window.getSelection && window.getSelection();
var _rng = {getRange: function () {if (_sel && _sel.rangeCount > 0) {return _sel.getRangeAt(0);}},addRange: function () {if (_lastRange) {_sel.removeAllRanges();_sel.addRange(_lastRange);}}
}// 格式化编辑器包含标签
$("body").on("click", ".J__wcEditor", function(){$(".wc__choose-panel").hide();_lastRange = _rng.getRange();
});
$("body").on("focus", ".J__wcEditor", function(){surrounds();_lastRange = _rng.getRange();
});
$("body").on("input", ".J__wcEditor", function(){surrounds();_lastRange = _rng.getRange();
});

react仿微信web版聊天室|仿微信客户端react版相关推荐

vue仿微信网页版|vue+web端聊天室|仿微信客户端vue版
一.项目介绍基于Vue2.5.6+Vuex+vue-cli+vue-router+vue-gemini-scrollbar+swiper+elementUI等技术混合架构开发的仿微信web端聊天室- ...
php++仿网页版微信,vue+web端仿微信网页版聊天室功能
一.项目介绍基于Vue2.5.6+Vuex+vue-cli+vue-router+vue-gemini-scrollbar+swiper+elementUI等技术混合架构开发的仿微信web端聊天室- ...
IM即时通信多房间聊天室仿微信聊天(二)
IM即时通信多房间聊天室仿微信聊天(服务器自定义处理客户端消息) 在IM即时通信多房间聊天室仿微信聊天(一)中我们已经搭建了基本的通信架构,接下来重点就是如何在自己的后台接收并处理客户端用户的消息了 ...
IM即时通信多房间聊天室仿微信聊天(四)
聊天记录的保存和展示 IM即时通信多房间聊天室仿微信聊天(一) IM即时通信多房间聊天室仿微信聊天(二) IM即时通信多房间聊天室仿微信聊天(三) 聊天消息的保存我们直接在服务端接收到客户端发送的消息 ...
【Java课程设计】仿QQ多人聊天室（基于TCP协议与JavaSwing）附下载
仿QQ多人聊天室下载地址:链接:https://pan.baidu.com/s/1dLFjSxwTA4gL5lI0B4UGuQ 提取码:2qs0 有两个项目,分别是服务器chatterServer ...
java web聊天室论文_基于Java网页版聊天室的设计与实现毕业论文含开题报告及文献综述（样例3）...
<基于Java网页版聊天室的设计与实现毕业论文含开题报告及文献综述.doc>由会员分享,可免费在线阅读全文,更多与<基于Java网页版聊天室的设计与实现毕业论文含开题报告及文献综述& ...
java web聊天室论文_基于java网页版聊天室的设计与实现毕业论文含开题报告及文献综述.doc...
基于java网页版聊天室的设计与实现毕业论文含开题报告及文献综述.doc 还剩 52页未读, 继续阅读下载文档到电脑,马上远离加班熬夜! 亲,很抱歉,此页已超出免费预览范围啦! 如果喜欢就下载吧,价 ...
java web聊天室论文_基于Java网页版聊天室的设计与实现毕业论文含开报告及文献综述.doc...
基于Java网页版聊天室的设计与实现毕业论文含开报告及文献综述本科生毕业论文(设计) 题目: 基于Java网页版聊天室的设计与实现姓名:学院: 理学院专业: 信息与计算科学班级: 信 ...
基于SSM的Web网页聊天室系统设计与实现毕业论文+项目源码及数据库文件、
下载地址:https://download.csdn.net/download/ouyangxiaobai123/22679732 项目介绍: 基于SSM的Web网页聊天室系统设计与实现毕业论文+项 ...

react仿微信web版聊天室|仿微信客户端react版

技术选型

◆ react入口页面index.js 及package.json依赖注入

◆ react+react-router-dom地址路由配置：

react仿微信web版聊天室|仿微信客户端react版相关推荐

最新文章

热门文章