react 实战开发|react+redux 仿微信聊天界面
965 / 0 / 创建于 4年前 /
xiaoyan2015 的个人博客
一、项目概况
基于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
/*
* @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')
);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);本作品采用《CC 协议》，转载必须注明作者和本文链接
关于 LearnKu
粤公网安备 44030502004330号