react+redux仿微信聊天界面


Posted in Javascript onJune 21, 2019

一、项目概况

基于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

react+redux仿微信聊天界面

react+redux仿微信聊天界面

react+redux仿微信聊天界面

react+redux仿微信聊天界面

react+redux仿微信聊天界面

react+redux仿微信聊天界面

react+redux仿微信聊天界面

react+redux仿微信聊天界面

react+redux仿微信聊天界面

react+redux仿微信聊天界面

react+redux仿微信聊天界面

react+redux仿微信聊天界面

react+redux仿微信聊天界面

react+redux仿微信聊天界面

◆package.json依赖安装:

{
 "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"
 }
}

◆ 入口页面index.js配置

/*
 * @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')
);

◆ 页面App.js主模板

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">
       {/* 路由容器 */}
       <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);

◆ react登录、注册模块 / react登录注册验证

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)

总结

以上所述是小编给大家介绍的react+redux仿微信聊天界面,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
Oct 22 Javascript
一个级联菜单代码学习及removeClass与addClass的应用
Jan 24 Javascript
css样式标签和js语法属性区别
Nov 06 Javascript
js判断undefined类型,undefined,null, 的区别详细解析
Dec 16 Javascript
jquery计算鼠标和指定元素之间距离的方法
Jun 26 Javascript
jQuery checkbox选中问题之prop与attr注意点分析
Nov 15 Javascript
DOM 事件的深入浅出(一)
Dec 05 Javascript
详解React 在服务端渲染的实现
Nov 16 Javascript
微信小程序实现团购或秒杀批量倒计时
Nov 01 Javascript
HTML+JavaScript实现扫雷小游戏
Sep 30 Javascript
初学vue出现空格警告的原因及其解决方案
Oct 31 Javascript
js实现从右往左匀速显示图片(无缝轮播)
Jun 29 Javascript
基于jQuery的时间戳与日期间的转化
Jun 21 #jQuery
jQuery事件委托代码实践详解
Jun 21 #jQuery
Vue.js中的extend绑定节点并显示的方法
Jun 20 #Javascript
微信小程序动态显示项目倒计时
Jun 20 #Javascript
微信小程序实现日期格式化和倒计时
Nov 01 #Javascript
微信小程序实现商城倒计时
Nov 01 #Javascript
微信小程序实现批量倒计时功能
Nov 01 #Javascript
You might like
人脸识别测颜值、测脸龄、测相似度微信接口
2016/04/07 PHP
javascript 鼠标拖动图标技术
2010/02/07 Javascript
JavaScript 小型打飞机游戏实现原理说明
2010/10/28 Javascript
jQuery操作Select的Option上下移动及移除添加等等
2013/11/18 Javascript
js unicode 编码解析关于数据转换为中文的两种方法
2014/04/21 Javascript
js获取时间精确到秒(年月日)
2016/03/16 Javascript
全面解析Bootstrap中Carousel轮播的使用方法
2016/06/13 Javascript
Javascript之面向对象--接口
2016/12/02 Javascript
Vue.js路由vue-router使用方法详解
2017/03/20 Javascript
详解vuex 中的 state 在组件中如何监听
2017/05/23 Javascript
详解关于Vue版本不匹配问题(Vue packages version mismatch)
2018/09/17 Javascript
微信小程序使用for循环动态渲染页面操作示例
2018/12/25 Javascript
Vue传参一箩筐(页面、组件)
2019/04/04 Javascript
JavaScript 防抖和节流遇见的奇怪问题及解决
2020/11/20 Javascript
jQuery+ajax实现文件上传功能
2020/12/22 jQuery
nestjs返回给前端数据格式的封装实现
2021/02/22 Javascript
Python实现端口复用实例代码
2014/07/03 Python
python3去掉string中的标点符号方法
2019/01/22 Python
Python中的pathlib.Path为什么不继承str详解
2019/06/23 Python
flask框架路由常用定义方式总结
2019/07/23 Python
3行Python代码实现图像照片抠图和换底色的方法
2019/10/10 Python
Python函数的定义方式与函数参数问题实例分析
2019/12/26 Python
TensorFlow 读取CSV数据的实例
2020/02/05 Python
CSS+jQuery实现的在线答题功能
2015/04/25 HTML / CSS
怎么可以提高数据库查询数据的速度
2014/06/28 面试题
西安夏日科技有限公司Java笔试题
2013/01/11 面试题
自荐信不宜过于夸大
2013/11/06 职场文书
护理专业自荐信
2013/12/03 职场文书
冰淇淋店创业计划书范文
2013/12/27 职场文书
2014年寒假社会实践活动心得体会
2014/04/07 职场文书
护理专科学生自荐书
2014/07/05 职场文书
项目申请汇报材料
2014/08/16 职场文书
公司股东合作协议书
2014/09/14 职场文书
爱心捐款活动总结
2015/05/09 职场文书
火锅店的开业营销方案范本!
2019/07/05 职场文书
你真的了解redis为什么要提供pipeline功能
2021/06/22 Redis