react+redux仿微信聊天界面
编程学习 2021-07-04 15:50www.dzhlxh.cn编程入门
这篇文章主要介绍了react+redux仿微信聊天IM实例|react仿微信界面 ，本文图文并茂给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
一、项目概况
基于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">
{/* 顶部 * 上一篇：使用express来代理服务的方法
下一篇：基于jQuery的时间戳与日期间的转化