基于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
/*
引入公共及全局组件配置
Q：282310962
https://www.cnblogs.com/xiaoyan2017
*/
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'
// 引入jsimport './assets/js/fontSize'
ReactDOM.render( <Provider store={store}> {/* <Router> <Route path="/" component={App} /> </Router> */} <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'
// 导入顶部、底部tabbarimport 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"> {/* 路由容器 */} {/* <Route path="/" component={routers.Index} exact /> <Route path="/contact" component={routers.Contact} /> <Route path="/ucenter" component={routers.Ucenter} /> */} <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地址路由配置：
/* * @desc 页面地址路由js */
// 引入页面组件import Login from '../views/auth/login'import Register from '../views/auth/register'import Index from '../views/index'import Contact from '../views/contact'import Uinfo from '../views/contact/uinfo'import Ucenter from '../views/ucenter'import Wallet from '../views/wallet'import GroupChat from '../views/chat/group-chat'import SingleChat from '../views/chat/single-chat'import GroupInfo from '../views/chat/group-info'
// export default {Index, Contact, Ucenter};
export default [ // 登录、注册 { path: '/login', name: 'Login', component: Login, }, { path: '/register', name: 'Register', component: Register, },
// 首页、联系人、我 { path: '/index', name: 'App', component: Index, meta: { showHeader: true, showTabBar: true, requireAuth: true }, }, { path: '/contact', name: 'Contact', component: Contact, meta: { showHeader: true, showTabBar: true, requireAuth: true }, }, { path: '/contact/uinfo', name: 'Uinfo', component: Uinfo, }, { path: '/ucenter', name: 'Ucenter', component: Ucenter, meta: { showHeader: true, showTabBar: true, requireAuth: true }, },
// 聊天页面 { path: '/chat/group-chat', name: 'GroupChat', component: GroupChat, meta: { requireAuth: true }, }, { path: '/chat/single-chat', name: 'SingleChat', component: SingleChat, meta: { requireAuth: true }, }, { path: '/chat/group-info', name: 'GroupInfo', component: GroupInfo, meta: { requireAuth: true }, },
// 钱包 { path: '/wallet', name: 'Wallet', component: Wallet, meta: { requireAuth: true }, }
// ...]
欢迎关注我的技术博客：blog.csdn.net/yanxinyun19…
一起学习，一起进步，有问题随时联系，一起解决！！！
