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 相关文章推荐
超级兔子让浮动层消失的前因后果
Mar 09 Javascript
javascript IE中的DOM ready应用技巧
Jul 23 Javascript
Visual Studio中的jQuery智能提示设置方法
Mar 27 Javascript
浅谈document.write()输出样式
May 07 Javascript
C++中的string类的用法小结
Aug 07 Javascript
Jquery判断form表单数据是否变化
Mar 30 Javascript
JS实现的打字机效果完整实例
Jun 20 Javascript
jQuery实现table中的tr上下移动并保持序号不变的实例代码
Jul 11 Javascript
vue通过watch对input做字数限定的方法
Jul 13 Javascript
vue实现nav导航栏的方法
Dec 13 Javascript
vuex实现像调用模板方法一样调用Mutations方法
Nov 06 Javascript
vscode中Vue别名路径提示的实现
Jul 31 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
浅谈Windows下 PHP4.0与oracle 8的连接设置
2006/10/09 PHP
COM in PHP (winows only)
2006/10/09 PHP
安装apache2.2.22配置php5.4(具体操作步骤)
2013/06/26 PHP
PHP GD库生成图像的几个函数总结
2014/11/19 PHP
thinkphp跨库操作的简单代码实例
2016/09/22 PHP
ThinkPHP5.0框架控制器继承基类和自定义类示例
2018/05/25 PHP
JS简单实现仿百度控制台输出信息效果
2016/09/04 Javascript
微信小程序 websocket 实现SpringMVC+Spring+Mybatis
2017/08/04 Javascript
js实现登录与注册界面
2017/11/01 Javascript
jQuery简单判断值是否存在于数组中的方法示例
2018/04/17 jQuery
JavaScript实现淘宝京东6位数字支付密码效果
2018/08/18 Javascript
javascript跳转与返回和刷新页面的实例代码
2019/11/20 Javascript
vue elementui 实现搜索栏公共组件封装的实例代码
2020/01/20 Javascript
解决vue cli4升级sass-loader(v8)后报错问题
2020/07/30 Javascript
vue实现井字棋游戏
2020/09/29 Javascript
利用JS判断元素是否为数组的方法示例
2021/01/08 Javascript
python 中文乱码问题深入分析
2011/03/13 Python
Python中的变量和作用域详解
2016/07/13 Python
django admin添加数据自动记录user到表中的实现方法
2018/01/05 Python
Python读取本地文件并解析网页元素的方法
2018/05/21 Python
解决pycharm 工具栏Tool中找不到Run manager.py Task的问题
2019/07/01 Python
Python3中的最大整数和最大浮点数实例
2019/07/09 Python
一篇文章弄懂Python中的可迭代对象、迭代器和生成器
2019/08/12 Python
利用python实现PSO算法优化二元函数
2019/11/13 Python
学Python 3的理由和必要性
2019/11/19 Python
html5的新玩法——语音搜索
2013/01/03 HTML / CSS
菲律宾优惠券网站:MetroDeal
2019/04/12 全球购物
院领导写的就业推荐信
2014/03/09 职场文书
保研推荐信
2014/05/09 职场文书
小学教师个人先进事迹材料
2014/05/17 职场文书
会议开幕词
2015/01/28 职场文书
杭州黄龙洞导游词
2015/02/10 职场文书
“学党章、守党纪、讲党规”学习心得体会
2016/01/14 职场文书
ORACLE数据库应用开发的三十个注意事项
2021/06/07 Oracle
Python爬虫 简单介绍一下Xpath及使用
2022/04/26 Python
MySQL安装失败的原因及解决步骤
2022/06/14 MySQL