react聊天室|react实战开发项目|仿微信IM



  • 一、项目概况
    运用react+react-dom+react-router-dom+redux+react-redux+nodejs等技术混合开发的手机端仿微信界面聊天室——reactChatRoom,实现了聊天记录下拉刷新、发送消息、表情(动图),图片、视频预览,打赏、红包等功能。

    二、技术栈

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

    替代文字

    替代文字

    替代文字

    替代文字

    替代文字

    替代文字

    替代文字

    替代文字

    替代文字

    {
      "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": "^4.0.1"
      },
      "devDependencies": {
        "jquery": "^2.2.3",
        "react-loadable": "^5.5.0",
        "react-photoswipe": "^1.3.0",
        "react-pullload": "^1.2.0",
        "redux-thunk": "^2.3.0",
        "swiper": "^4.5.0",
        "webpack": "^1.13.1",
        "webpack-dev-server": "^1.12.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 {HashRouter as Router, Route} from 'react-router-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'
    
    // 引入js
    import './assets/js/fontSize'
    
    ReactDOM.render(
      <Provider store={store}>
        <App />
      </Provider>,
      document.getElementById('app')
    );
    
    import React, { Component } from 'react';
    import { Link } from 'react-router-dom'
    import { connect } from 'react-redux';
    
    import * as actions from '../../store/action'
    
    // 引入wcPop弹窗插件
    import { wcPop } from '../../assets/js/wcPop/wcPop.js'
    
    class Login extends Component {
        constructor(props) {
            super(props)
            this.state = {
                tel: '',
                pwd: '',
                vcode: '',
    
                vcodeText: '获取验证码',
                disabled: false,
                time: 0
            }
        }
    
        componentDidMount(){
            if(this.props.token){
                this.props.history.push('/')
            }
        }
    
        render() {
            return (
                <div className="wcim__lgregWrapper flexbox flex__direction-column">
                    ......
                </div>
            )
        }
        
    
        // 提交表单
        handleSubmit = (e) => {
            e.preventDefault();
            var that = this
    
            this.state.tel = this.refs.tel.value
            this.state.pwd = this.refs.pwd.value
            this.state.vcode = this.refs.vcode.value
    
            if (!this.state.tel) {
                wcPop({ content: '手机号不能为空!', style: 'background:#ff3b30;color:#fff;', time: 2 });
            } else if (!checkTel(this.state.tel)) {
                wcPop({ content: '手机号格式不正确!', style: 'background:#ff3b30;color:#fff;', time: 2 });
            } else if (!this.state.pwd) {
                wcPop({ content: '密码不能为空!', style: 'background:#ff3b30;color:#fff;', time: 2 });
            } else if (!this.state.vcode) {
                wcPop({ content: '验证码不能为空!', style: 'background:#ff3b30;color:#fff;', time: 2 });
            } else {
                // 获取登录之前的页面地址
                let redirectUrl = this.props.location.state ? this.props.location.state.from.pathname : '/'
    
                // 设置token
                this.props.authToken(getToken())
                this.props.authUser(this.state.tel)
    
                wcPop({
                    content: '注册成功!', style: 'background:#41b883;color:#fff;', time: 2,
                    end: function () {
                        that.props.history.push(redirectUrl)
                    }
                });
            }
        }
    
        // 60s倒计时
        handleVcode = (e) => {
            e.preventDefault();
    
            this.state.tel = this.refs.tel.value
    
            if (!this.state.tel) {
                wcPop({ content: '手机号不能为空!', style: 'background:#ff3b30;color:#fff;', time: 2 });
            } else if (!checkTel(this.state.tel)) {
                wcPop({ content: '手机号格式不正确!', style: 'background:#ff3b30;color:#fff;', time: 2 });
            } else {
                this.state.time = 60
                this.state.disabled = true
                this.countDown();
            }
        }
    
        countDown = (e) => {
            if(this.state.time > 0){
                this.state.time--
                this.setState({
                    vcodeText: '获取验证码(' + this.state.time + ')'
                })
                // setTimeout(this.countDown, 1000);
                setTimeout(() => {
                    this.countDown()
                }, 1000);
            }else{
                this.setState({
                    time: 0,
                    vcodeText: '获取验证码',
                    disabled: false
                })
            }
        }
    }
    
    const mapStateToProps = (state) => {
        return {
            ...state.auth
        }
    }
    
    export default connect(mapStateToProps, {
        authToken: actions.setToken,
        authUser: actions.setUser
    })(Login)
    

    作者:xiaoyan2015
    博客:https://blog.csdn.net/yanxinyun1990
    本文为博主原创文章,未经博主允许不得转载,欢迎大家一起交流



  • 开源了没,大佬。。


Log in to reply