基於react+react-dom+react-router-dom+redux+react-redux+webpack2.0+react-photoswipe+swiper等技術混合開發的手機端 仿微信界面聊天室reactChatRoom,實現了聊天記錄下拉刷新、發送消息、表情(動圖),圖片、視頻預覽,打賞、紅包等功能。
/*
引入公共及全局組件配置
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);
複製代碼
/* * @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…css
一塊兒學習,一塊兒進步,有問題隨時聯繫,一塊兒解決!!!node