react+redux+react-dom+react-router-dom+swiper等技术开发仿微信手机端app界面聊天室|react聊天实例。实现了聊天消息下拉刷新、发送消息/表情、图片/视频预览、打赏/红包等功能。

技术栈

• mvvm框架：react / react-dom

• 状态管理：redux / react-redux

• 页面路由：react-router-dom

• 弹窗插件：wcPop

• 打包工具：webpack 2.0

• 环境配置：node.js + cnpm

• 图片预览：react-photoswipe

• 轮播组件：swiper

• iconfont图标：阿里巴巴字体图标库

引入阿里iconfont字体图标

iconfont | 阿里妈妈MUX倾力打造的矢量图标管理、交流平台。功能强大且图标内容丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能。

https://www.iconfont.cn/

• 下载

下载iconfont图标文件，放到react项目资源目录下

如下图：解压到src/assets/fonts目录下

• 使用

// 在index.js页面引入字体图标

import './assets/fonts/iconfont.css'

// 通过如下方式使用即可

react入口页面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'// 引入jsimport './assets/js/fontSize'ReactDOM.render(        ,  document.getElementById('app'));

效果图

react主页面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'// 导入顶部、底部tabbarimport HeaderBar from './components/header'import TabBar from './components/tabbar'class App extends Component {  constructor(props){    super(props)    console.log(props)  }  render() {    let token = this.props.token    return (              

); } componentDidMount(){ // ... }}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 GroupChat from '../views/chat/group-chat'// ...export default [    // 登录、注册    {        path: '/login', name: 'Login', component: Login,    },    {        path: '/register', name: 'Register', component: Register,    },    // ...    // 聊天页面    {        path: '/chat/group-chat', name: 'GroupChat', component: GroupChat,        meta: { requireAuth: true },    },    // ...]

使用react-redux状态管理

首先在入口页面index.js中配置状态管理，至于如何配置redux，可以去官网查阅资料，这里不作详细介绍。

import React from 'react';import ReactDOM from 'react-dom';import App from './App';// 引入状态管理import {Provider} from 'react-redux'import {store} from './store'// ...ReactDOM.render(        ,  document.getElementById('app'));

React-Redux 提供connect方法，用于从 UI 组件生成容器组件。

connect方法接受两个参数：mapStateToProps和mapDispatchToProps。它们定义了 UI 组件的业务逻辑。前者负责输入逻辑，即将state映射到 UI 组件的参数(props)，后者负责输出逻辑，即将用户对 UI 组件的操作映射成 Action。

import React, { Component } from 'react';import { connect } from 'react-redux';import * as actions from '../../store/action'// ...class Login extends Component {    constructor(props) {        super(props)        this.state = {            // ...        }    }    componentDidMount(){        // ...    }    render() {        return (            

) } // 验证 handleAuth = (e) => { this.props.authToken('akrfjerejreehwjrh4jh32vfwekr') this.props.authUser('andy') }}const mapStateToProps = (state) => { return { ...state.auth }}export default connect(mapStateToProps, { authToken: actions.setToken, authUser: actions.setUser})(Login)

End

最后附上两个实例项目

taro+react仿微信聊天App实例|taro聊天室

react网页版IM聊天|仿微信电脑端/pc端聊天

转载是一种动力 分享是一种美德