为了账号安全,请及时绑定邮箱和手机立即绑定

react实战聊天开发|react+h5仿微信网页版

最近一直在学习react技术,前段时间也使用react全家桶技术开发过一个react手机端仿微信聊天项目,想着一鼓作气再加深学习下react,如是就整了个web端仿微信聊天react版。

技术选型

  • MVVM框架:react / react-dom

  • 状态管理:redux / react-redux

  • 页面路由:react-router-dom

  • 弹窗插件:wcPop

  • 打包工具:webpack 2.0

  • 环境配置:node.js + cnpm

  • 图片预览:react-photoswipe

  • 轮播滑动:swiper

https://img1.sycdn.imooc.com//5d18dda80001ee6c13500640.jpg

https://img1.sycdn.imooc.com//5d18dda80001706313500640.jpg

https://img1.sycdn.imooc.com//5d18dda80001a0b013500640.jpg

https://img1.sycdn.imooc.com//5d18dda900017c6e13500640.jpg

https://img1.sycdn.imooc.com//5d18dda900012d0313500640.jpg

https://img1.sycdn.imooc.com//5d18dda90001a6f713500640.jpg

https://img1.sycdn.imooc.com//5d18ddaa0001d75613500640.jpg

https://img1.sycdn.imooc.com//5d18ddaa0001ad0613500640.jpg

https://img1.sycdn.imooc.com//5d18dda900010a1113500640.jpg

{"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"}}
/**  @desc 入口页面index.js*/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();});


作者:xiaoyan2015

https://blog.csdn.net/yanxinyun1990/article/details/94143575

本文为作者原创文章,转载请附上本文链接!


点击查看更多内容
2人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
28
获赞与收藏
92

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消