react 实战开发|react+redux 仿微信聊天界面

一、项目概况

基于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







/*
 *  @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')
);
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);

本文为原创文章,未经作者允许不得转载,欢迎大家一起交流 QQ(282310962) wx(xy190310)

讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!
文章
10
粉丝
10
喜欢
19
收藏
10
排名:303
访问:1.29 万+
私信
所有博文