react+网页端聊天项目|仿微信web版

简介: 前段时间有使用react全家桶技术开发过一个react版手机端聊天室,最近又接着捣鼓pc端聊天室。一、项目介绍基于react+react-dom+react-router-dom+redux+react-redux+webpack2.0+nodejs等技术混合开发的仿微信web端聊天室reactWebChat项目,实现了聊天记录右键菜单、发送消息、表情(动图),图片、视频预览,浏览器截图粘贴发送等功能。

前段时间有使用react全家桶技术开发过一个react版手机端聊天室,最近又接着捣鼓pc端聊天室。
007360_20190619225205772
一、项目介绍
基于react+react-dom+react-router-dom+redux+react-redux+webpack2.0+nodejs等技术混合开发的仿微信web端聊天室reactWebChat项目,实现了聊天记录右键菜单、发送消息、表情(动图),图片、视频预览,浏览器截图粘贴发送等功能。

二、技术选型
MVVM框架:react / react-dom
状态管理:redux / react-redux
页面路由:react-router-dom
弹窗插件:wcPop
打包工具:webpack 2.0
环境配置:node.js + cnpm
图片预览:react-photoswipe
轮播滑动:swiper
001360_20190619222855774
003360_20190619223626291
004360_20190619224021671
005360_20190619224311358
008360_20190619225655758
010360_20190619230342187
011360_20190619230836115
014360_20190619232415011
017360_20190619232643033

/*
    package依赖安装配置
    Q:282310962
    https://www.cnblogs.com/xiaoyan2017
*/
{
  "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"
  }
}

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 },
    },

    // ...
]
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

// 引入状态管理
import { Provider } from 'react-redux'
import { store } from './store'

// 导入公共样式
import './assets/fonts/iconfont.css'
import './assets/css/reset.css'
import './assets/css/layout.css'
// 引入wcPop弹窗样式
import './assets/js/wcPop/skin/wcPop.css'

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);
// >>> 【编辑器+表情处理模块】------------------------------------------
// ...处理编辑器信息
function surrounds() {
    setTimeout(function () { //chrome
        var 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")); //chrome
            sel.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();
});
目录
相关文章
|
13天前
|
存储 小程序 API
【微信小程序】-- uni-app 项目-- 购物车 -- 首页 - 轮播图效果(五十二)
【微信小程序】-- uni-app 项目-- 购物车 -- 首页 - 轮播图效果(五十二)
【微信小程序】-- uni-app 项目-- 购物车 -- 首页 - 轮播图效果(五十二)
|
13天前
|
小程序 Shell 网络安全
【微信小程序】-- 使用 Git 管理项目(五十)
【微信小程序】-- 使用 Git 管理项目(五十)
|
13天前
|
小程序 安全 JavaScript
从零开始uniapp微信小程序项目到发布(超级详细)
最近微信小程序又掀起一波风潮,本文站在新手的角度出发,比较适合第一次使用uniapp 开发微信小程序的伙伴,或者没有过实战经验的小伙伴参考,从零搭建uniapp小程序项目
173 1
|
13天前
|
前端开发 JavaScript 测试技术
从零开始搭建react+typescript+antd+redux+less+vw自适应项目
从零开始搭建react+typescript+antd+redux+less+vw自适应项目
68 0
|
13天前
|
小程序 开发工具 git
【微信小程序】-- uni-app 项目--- 购物车 -- 配置 tabBar 效果(五十一)
【微信小程序】-- uni-app 项目--- 购物车 -- 配置 tabBar 效果(五十一)
|
1天前
|
JSON 小程序 JavaScript
了解微信小程序项目
该文介绍了微信小程序的基本组成结构和开发要素。小程序由pages目录下的页面、utils工具模块、app.js(入口文件)、app.json(全局配置文件)、app.wxss(全局样式表)、project.config.json(项目配置)和sitemap.json(索引配置)组成。页面由.js(逻辑)、.json(配置)、.wxml(结构)和.wxss(样式)四个文件构成。JSON配置文件用于设定小程序的外观和行为,sitemap.json控制页面索引。小程序开发还包括新建页面、使用WXML和WXSS进行界面描述以及与用户交互的JS逻辑。
7 0
|
4天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp微信小程序的在线考试与学习交流网页平台的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的在线考试与学习交流网页平台的详细设计和实现
|
11天前
|
前端开发
React Hooks - useState 的使用方法和注意事项(1),web前端开发前景
React Hooks - useState 的使用方法和注意事项(1),web前端开发前景
|
13天前
|
缓存 前端开发
Web开发:深入探讨React Hooks的使用和最佳实践
Web开发:深入探讨React Hooks的使用和最佳实践
23 0

热门文章

最新文章