react+redux仿微信手机端IM聊天室|仿微信界面react版

一、项目概况

基于react+react-dom+react-router-dom+redux+react-redux+webpack2.0+react-photoswipe+swiper等技术混合开发的仿微信移动端聊天室reactChatroom，实现了聊天记录下拉刷新、发送消息、表情(动图)，图片、视频预览，打赏、红包等功能。

二、技术栈

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

 

 

 

 

 

 

 

/*
 *  @desc 入口页面index.js
 *  Q：282310962   wx：xy190310
 */
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}>
    {/* <Router>
      <Route path="/" component={App} />
    </Router> */}
    <App />
  </Provider>,
  document.getElementById('app')
);

import React, { Component } from 'react';
import {HashRouter as Router, Route, Switch, Redirect} from 'react-router-dom'
import {connect} from 'react-redux'

import $ from 'jquery'
// 引入wcPop弹窗插件
import { wcPop } from './assets/js/wcPop/wcPop'

// 引入地址路由
import routers from './router'

// 导入顶部、底部tabbar
import HeaderBar from './components/header'
import TabBar from './components/tabbar'

class App extends Component {
  constructor(props){
    super(props)
    console.log('App主页面参数：\n' + JSON.stringify(props, null, 2))
  }
  render() {
    let token = this.props.token
    return (
      <Router>
        <div className="weChatIM__panel clearfix">
          <div className="we__chatIM-wrapper flexbox flex__direction-column">
            {/* 顶部 */}
            <Switch>
              <HeaderBar />
            </Switch>
            
            {/* 主页面 */}
            <div className="wcim__container flex1">
              {/* 路由容器 */}
              {/* <Route path="/" component={routers.Index} exact />
              <Route path="/contact" component={routers.Contact} />
              <Route path="/ucenter" component={routers.Ucenter} /> */}
              <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>

            {/* 底部tabbar */}
            <Switch>
              <TabBar />
            </Switch>
          </div>
        </div>
      </Router>
    );
  }
}

const mapStateToProps = (state) =>{
  return {
    ...state.auth
  }
}

export default connect(mapStateToProps)(App);

/*
 *  @tmpl 注册模板
 */
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'

import { getToken, checkTel } from '../../utils/common'

class Login extends Component {
    constructor(props) {
        super(props)
        console.log('注册页面参数：\n' + JSON.stringify(props, null, 2))

        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 className="wcim__lgregHeader flex1">
                    <div className="slogan">
                        <div className="logo"><img src={require('../../assets/img/logo.png')} /></div>
                        <h2>React-weChat聊天室</h2>
                    </div>
                    <div className="forms">
                        <form onSubmit={this.handleSubmit}>
                            <ul className="clearfix">
                                <li className="flexbox flex-alignc"><i className="iconfont icon-shouji"></i><input className="iptxt flex1" type="tel" ref="tel" placeholder="请输入手机号" autoComplete="off" maxLength="11" /><em className="borLine"></em></li>
                                <li className="flexbox flex-alignc"><i className="iconfont icon-pass"></i><input className="iptxt flex1" type="password" ref="pwd" placeholder="请输入密码" autoComplete="off" /><em className="borLine"></em></li>
                                <li className="flexbox flex-alignc"><i className="iconfont icon-vcode"></i><input className="iptxt flex1" type="text" ref="vcode" placeholder="验证码" autoComplete="off" /><em className="borLine"></em><button className="btn-getcode" onClick={this.handleVcode} disabled={this.state.disabled}>{this.state.vcodeText}</button></li>
                            </ul>

                            <div className="btns"><button className="wc__btn-primary btn__login" type="submit">注册</button></div>
                            <div className="lgregLink align-c clearfix">
                                <Link to="/login">已有账号，去登录</Link>
                            </div>
                        </form>
                    </div>
                </div>
                <div className="wcim__lgregFooter">
                    <p className="version">React-weChat v1.0</p>
                </div>
            </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)

 

转载于:https://my.oschina.net/xiaoyan2016/blog/3065216