一、项目概况
基于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仿微信聊天界面，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
© 版权声明
THE END
暂无评论内容