Introduce a,

React family bucket technology react+ react-router-dom+redux+ React-Redux + Nodejs and other technologies mixed development of wechat web chat reactWebChat project, Realized the chat record right menu, send messages, expressions (GIF), pictures, video preview, browser screenshot paste send and other functions.

Second, the technology

  • MVVM framework: react/react-dom
  • Status management: redux/React-redux
  • Page routing: react-router-dom
  • Popover plugin: wcPop
  • Packaging tool: WebPack 2.0
  • Environment configuration: Node.js + CNPM
  • Image preview: React-Photoswipe
  • Swiper: Swiper











/ * introduced in public and global components configuration Q: 282310962 https://www.cnblogs.com/xiaoyan2017 * / import the React the from'react'; import ReactDOM from'react-dom'; import App from'./App'; // Import {Provider} from'react-redux'import { store } from './store'// Import the common style import'./assets/fonts/iconfont.css'import './assets/css/reset.css'import './assets/css/layout.css'// Introduce the wcPop style import'./assets/js/wcPop/skin/wcPop.css'
ReactDOM.render(  <Provider store={store}>    <App />  </Provider>,  document.getElementById('root'));Copy the code

{  "name": "react-webchat"."version": "0.1.0 from"."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": "^ 2"."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"  }}
Copy the code

/* * @desc page address route js */ / import page component 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}}, / /... ]Copy the code

/ / > > > + expression processing module 】 【 editor -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- / /... Process editor informationfunction 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); }}} // The formatting editor contains the tag $("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();
});
Copy the code

Welcome to focus on my technology blog: blog.csdn.net/yanxinyun19…

Study together, progress together, have a problem contact at any time, solve together!!