专栏首页h5react仿微信即时IM聊天|react+redux仿微信界面
原创

react仿微信即时IM聊天|react+redux仿微信界面

react+redux仿微信聊天室react-weChatRoom案例|仿微信界面|仿微信群聊

基于react+react-dom+react-router-dom+redux+react-redux+ant等技术开发的手机端仿微信界面聊天,实现了聊天记录下拉刷新、发送消息、表情(动图),图片、视频预览,打赏、红包等功能。

vue聊天室:https://blog.csdn.net/yanxinyun1990/article/details/89038427

技术架构:

  • MVVM框架:react / react-dom
  • 状态管理:redux / react-redux
  • 页面路由:react-router-dom
  • 弹窗插件:wcPop
  • 打包工具:webpack 2.0
  • 环境配置:node.js + cnpm
  • 图片预览:react-photoswipe
  • 轮播滑动:swiper
/*
    @desc 入口页面index.js
    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'

// 引入js
import './assets/js/fontSize'

ReactDOM.render(
  <Provider store={store}>
    {/* <Router>
      <Route path="/" component={App} />
    </Router> */}
    <App />
  </Provider>,
  document.getElementById('app')
);

react地址路由react-router

/*
 *  @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 },
    }

    // ...
]
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">
              {/* 路由容器 */}
              {/* <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);

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • vue+web端聊天室|网页端vue聊天系统

    使用了Vue2.5.6+Vuex+vue-router+vue-gemini-scrollbar+swiper+elementUI等技术开发,实现了发送消息、表...

    andy2018
  • [高仿版]h5实战仿微信聊天项目

    最近也是由于项目需要做一个类似微信聊天功能,需要用html5去实现,如是就开始捣鼓开发了一个h5高仿微信聊天功能,和微信功能,样式非常相似,整体采用flex布局...

    andy2018
  • react实战开发|react+web版聊天室

    基于react+react-dom+react-router-dom+redux+react-redux+webpack2.0+react-photoswipe...

    andy2018
  • react-router-config的使用

    上篇文章我们介绍了在react中如何使用路由,但是随着项目的增大,路由会越来越多,这就需要我们进行集中管理,我们可以自己写脚本,也可以使用react-route...

    挥刀北上
  • Android设备之间通过Wifi通信的示例代码

    之前写过PC与Android之间通过WIFI通信(通过Socket,可以在博客里面搜索),PC作为主机,Android作为客户机,现在手头有一台仪器通过wifi...

    砸漏
  • 工作中使用jasmine遇到的一个html element和Component绑定属性失去同步的问题

    file location: projects\storefrontlib\src\cms-components\checkout\components\del...

    Jerry Wang
  • Basemap系列教程:自定义colormap

    matplotlib colormap非常强大,比其他软件要更好用 [注1],但是相当难理解。大多数时候,可以使用颜色列表创建 colormap:

    bugsuse
  • 脑信号分析系列(1)-听觉P300实验

    刺激时间为200ms,时间间隔400ms,随机抖动±100ms, 任务是计算玩奇数球刺激的次数,记录单个参与者进行的6次2分钟的实验。

    脑机接口社区
  • ModuleNotFoundError: No module named ‘__main__.XX‘;

    from .XX.logger import Logger ModuleNotFoundError: No module named '__main__.XX...

    于小勇
  • Python炫技操作:花式导包的八种方法

    __import__ 函数可用于导入模块,import 语句也会调用函数。其定义为:

    Python进阶者

扫码关注云+社区

领取腾讯云代金券