欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

react+redux仿微信聊天界面

程序员文章站 2022-05-25 23:09:26
一、项目概况 基于react+react-dom+react-router-dom+redux+react-redux+webpack2.0+react-photoswi...

一、项目概况

基于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仿微信聊天界面,希望对大家有所帮助