基于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登录注册验证