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