react聊天室|react+redux仿微信聊天IM实例|react仿微信界面

逆风方向 發表於 2019-6-21 00:44:00

react聊天室|react+redux仿微信聊天IM实例|react仿微信界面

<h3 id="一项目简介">一、项目概况</h3>
基于react+react-dom+react-router-dom+redux+react-redux+webpack2.0+react-photoswipe+swiper等技术混合开发的手机端仿微信界面聊天室——reactChatRoom，实现了聊天记录下拉刷新、发送消息、表情(动图)，图片、视频预览，打赏、红包等功能。
<h3 id="三技术栈">二、技术栈</h3>
<ul>
<li>MVVM框架：react / react-dom</li>
<li>状态管理：redux / react-redux</li>
<li>页面路由：react-router-dom</li>
<li>弹窗插件：wcPop</li>
<li>打包工具：webpack 2.0</li>
<li>环境配置：node.js + cnpm</li>
<li>图片预览：react-photoswipe</li>
<li>轮播滑动：swiper</li>
</ul>
<img src="https://img2018.cnblogs.com/blog/1289798/201906/1289798-20190621001734138-602948179.png">
<img src="https://img2018.cnblogs.com/blog/1289798/201906/1289798-20190621001908665-1039231408.png">
<img src="https://img2018.cnblogs.com/blog/1289798/201906/1289798-20190621001918147-2069742027.png">
<img src="https://img2018.cnblogs.com/blog/1289798/201906/1289798-20190621001939056-418820727.png">
<img src="https://img2018.cnblogs.com/blog/1289798/201906/1289798-20190621001945845-1749002524.png">
<img src="https://img2018.cnblogs.com/blog/1289798/201906/1289798-20190621002004585-1996341370.png">
<img src="https://img2018.cnblogs.com/blog/1289798/201906/1289798-20190621002016551-870307174.png">
<img src="https://img2018.cnblogs.com/blog/1289798/201906/1289798-20190621002047688-1731322193.png">
<img src="https://img2018.cnblogs.com/blog/1289798/201906/1289798-20190621002057262-778954764.png">
<img src="https://img2018.cnblogs.com/blog/1289798/201906/1289798-20190621002111099-1043958072.png">
<img src="https://img2018.cnblogs.com/blog/1289798/201906/1289798-20190621002119392-1155225876.png">
<img src="https://img2018.cnblogs.com/blog/1289798/201906/1289798-20190621002130521-495099450.png">
<img src="https://img2018.cnblogs.com/blog/1289798/201906/1289798-20190621002146561-1827077654.png">
<img src="https://img2018.cnblogs.com/blog/1289798/201906/1289798-20190621002152326-789644431.png">
◆ package.json依赖安装：
<div class="cnblogs_code">
<pre>{
"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"
}
}</pre>
</div>
◆ 入口页面index.js配置
<div class="cnblogs_code">
<pre>/*
*@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')
);</pre>
</div>
◆ 页面App.js主模板
<div class="cnblogs_code">
<pre>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);</pre>
</div>
◆ react登录、注册模块 / react登录注册验证
<div class="cnblogs_code">
<pre>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)</pre>
</div>
React-Chat移动端聊天实例|react18 hooks仿微信App聊天界面
react18-webchat网页聊天实例|React Hooks+Arco Design仿微信桌面端
<img src="https://img2018.cnblogs.com/blog/1289798/201906/1289798-20190621003840111-1165511516.jpg">
 

</div>
<div id="MySignature" role="contentinfo">
本文为博主原创文章，未经博主允许不得转载，欢迎大家一起交流 QQ（282310962） wx（xy190310） 
来源：https://www.cnblogs.com/xiaoyan2017/p/11062316.html

頁: [1]

琼殿技术论坛's Archiver

react聊天室|react+redux仿微信聊天IM实例|react仿微信界面