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 相关文章推荐
原生javascript获取元素样式属性值的方法
Dec 25 Javascript
javascript自定义startWith()和endWith()的两种方法
Nov 11 Javascript
随鼠标移动的时钟非常漂亮遗憾的是只支持IE
Aug 12 Javascript
JS控制表格实现一条光线流动分割行的方法
Mar 09 Javascript
Jquery日期选择datepicker插件用法实例分析
Jun 08 Javascript
深入浅析JavaScript中的constructor
Apr 19 Javascript
JS基于正则截取替换特定字符之间字符串操作示例
Feb 03 Javascript
Angular2.js实现表单验证详解
Jun 23 Javascript
cocos creator Touch事件应用(触控选择多个子节点的实例)
Sep 10 Javascript
vue2.0 实现导航守卫的具体用法(路由守卫)
May 17 Javascript
webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程
Jun 10 Javascript
修改NPM全局模式的默认安装路径的方法
Dec 15 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
晶体管单管来复再生式收音机
2021/03/02 无线电
php多重接口的实现方法
2015/06/20 PHP
php常量详细解析
2015/10/27 PHP
JS图片切换的具体方法(带缩略图版)
2013/11/12 Javascript
jquery复选框多选赋值给文本框的方法
2015/01/27 Javascript
JS中常用的输出方式(五种)
2016/06/12 Javascript
jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)
2016/11/18 Javascript
ES6学习之变量的解构赋值
2017/02/12 Javascript
详解Vue.js之视图和数据的双向绑定(v-model)
2017/06/23 Javascript
详解用函数式编程对JavaScript进行断舍离
2017/09/18 Javascript
vuejs 制作背景淡入淡出切换动画的实例
2018/09/01 Javascript
玩转Koa之koa-router原理解析
2018/12/29 Javascript
laravel-admin 与 vue 结合使用实例代码详解
2019/06/04 Javascript
浅析Angular 实现一个repeat指令的方法
2019/07/21 Javascript
vue用ant design中table表格,点击某行时触发的事件操作
2020/10/28 Javascript
python网络编程学习笔记(六):Web客户端访问
2014/06/09 Python
Python下的Softmax回归函数的实现方法(推荐)
2017/01/26 Python
Python绘制七段数码管实例代码
2017/12/20 Python
Python爬虫包BeautifulSoup学习实例(五)
2018/06/17 Python
Python调用服务接口的实例
2019/01/03 Python
python 三元运算符使用解析
2019/09/16 Python
如何在pycharm中安装第三方包
2020/10/27 Python
朗仕(Lab series)英国官网:雅诗兰黛集团男士专属护肤品牌
2017/11/28 全球购物
经济实惠的名牌太阳镜和眼镜:Privé Revaux
2021/02/07 全球购物
护理专业学生职业生涯规划范文
2014/03/11 职场文书
请假条范文大全
2014/04/10 职场文书
中学生家长评语大全
2014/04/16 职场文书
供货协议书
2014/04/22 职场文书
老人再婚离婚协议书范本
2014/10/27 职场文书
软件项目经理岗位职责
2015/04/01 职场文书
2015年扶贫帮困工作总结
2015/05/20 职场文书
新闻报道稿范文
2015/07/23 职场文书
教你怎么用Python selenium操作浏览器对象的基础API
2021/06/23 Python
图解排序算法之希尔排序Java实现
2021/06/26 Java/Android
基于Python实现一个春节倒计时脚本
2022/01/22 Python
CSS控制继承中的height能变为可继承吗
2022/06/10 HTML / CSS