「实战」react网页端聊天｜react+redux仿微信pc端聊天

工程项目概要

react+redux+react-redux+swiper+wcPop等工程控制技术网页版仿QQ介面示例，同时实现推送最新消息/眼神(Zopfli)，相片/音频自动更新，滑鼠辅助工具栏，加挚友/资料库等机能。

控制技术栈

mvvm架构：react / react-dom状况管理工作：redux / react-redux网页路由器：react-router-dom快捷方式应用程序：wcPopExi模块：swiper装箱辅助工具：webpack 2.0自然环境实用性：node.js + cnpm相片自动更新：react-photoswipeiconfont辅助工具栏：穆萨巴巴手写体辅助工具栏库

效用模拟

播映

00:00 / 00:00 现场直播

00:00

步入全屏幕

点选握住可拖动音频

react导入穆萨iconfont手写体辅助工具栏

iconfont | 穆萨爸爸MUX项目组倾情打造出的向量辅助工具栏管理工作、控制技术交流。提供更多形式多样的向量辅助工具栏浏览、新浪网储存、文件格式切换等机能。

https://www.iconfont.cn/

浏览

浏览iconfont辅助工具栏文件，解压后放到react工程项目资源目录下。如下图：在src/assets/fonts目录下

使用

// 在index.js网页导入手写体辅助工具栏 import ./assets/fonts/iconfont.css // 在需要的地方使用即可 <i className=“iconfont icon-home”></i> <i className=“iconfont icon-search”></i>

主网页App.js模板

/* * @desc 主网页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 // 导入地址路由器 importrouters from./router // 导入顶部、底部tabbar import 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 ( <Router> <div className=“weChatIM__panel clearfix”> <div className=“we__chatIM-wrapper flexbox flex__direction-column”> {/* 顶部navigator */} <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> ); } componentDidMount(){// … } } constmapStateToProps = (state) =>{return { …state.auth } } export defaultconnect(mapStateToProps)(App);

展示图

react入口网页导入redux状况管理工作/样式

/* * @desc 入口网页index.js */ import React from react; import ReactDOM from react-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 ReactDOM.render( <Provider store={store}> <App /> </Provider>, document.getElementById(root) );

react中使用redux

redux| 官方提供更多的 React 绑定库。具有高效且灵活的特性。

https://www.redux.org.cn/ https://github.com/reduxjs/redux https://react-redux.js.org/

安装

npmi redux react-redux -S

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 }, }, // … ]