react+redux仿微信聊天界面

微信(小程序)  /  管理员 发布于 4年前   328

一、项目概况

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

◆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'// 引入jsimport './assets/js/fontSize'ReactDOM.render(    , 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'// 导入顶部、底部tabbarimport 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 (       
     
      {/* 顶部 */}                         {/* 主页面 */}      
       {/* 路由容器 */}               {         routers.map((item, index) => {          return  (           !item.meta || !item.meta.requireAuth ? () : (            token ?  :            )          )} />         })        }        {/* 初始化页面跳转 */}                           {/* 底部tabbar */}                                 ); }}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 (      
        ......          )  }  // 提交表单  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仿微信聊天界面，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

您可能感兴趣的文章:

• react router4+redux实现路由权限控制的方法
• 详解react、redux、react-redux之间的关系
• react-redux中connect的装饰器用法@connect详解
• 详解如何优雅地在React项目中使用Redux
• 浅谈React和Redux的连接react-redux
• 详解关于react-redux中的connect用法介绍及原理解析
• react-redux中connect()方法详细解析