基于react+react-dom+react-router-dom+redux+react-redux+webpack2.0+react-photoswipe+swiper等技术混合开发的手机端仿微信界面聊天室——reactchatroom，实现了聊天记录下拉刷新、发送消息、表情(动图)，图片、视频预览，打赏、红包等功能。
◆ 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">
{/* 顶部 */}
<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);
◆ react登录、注册模块 / react登录注册验证
import react, { component } from 'react';
import { link } from 'react-router-dom'
import { connect } from 'react-redux';
import * as actions from '../../store/action'
// 引入wcpop弹窗插件
import { wcpop } from '../../assets/js/wcpop/wcpop.js'
class login extends component {
constructor(props) {
super(props)
this.state = {
tel: '',
pwd: '',
vcode: '',
vcodetext: '获取验证码',
disabled: false,
time: 0
}
}
componentdidmount(){
if(this.props.token){
this.props.history.push('/')
}
}
render() {
return (
<div classname="wcim__lgregwrapper flexbox flex__direction-column">
......
</div>
)
}
// 提交表单
handlesubmit = (e) => {
e.preventdefault();
var that = this
this.state.tel = this.refs.tel.value
this.state.pwd = this.refs.pwd.value
this.state.vcode = this.refs.vcode.value
if (!this.state.tel) {
wcpop({ content: '手机号不能为空！', style: 'background:#ff3b30;color:#fff;', time: 2 });
} else if (!checktel(this.state.tel)) {
wcpop({ content: '手机号格式不正确！', style: 'background:#ff3b30;color:#fff;', time: 2 });
} else if (!this.state.pwd) {
wcpop({ content: '密码不能为空！', style: 'background:#ff3b30;color:#fff;', time: 2 });
} else if (!this.state.vcode) {
wcpop({ content: '验证码不能为空！', style: 'background:#ff3b30;color:#fff;', time: 2 });
} else {
// 获取登录之前的页面地址
let redirecturl = this.props.location.state ? this.props.location.state.from.pathname : '/'
// 设置token
this.props.authtoken(gettoken())
this.props.authuser(this.state.tel)
wcpop({
content: '注册成功！', style: 'background:#41b883;color:#fff;', time: 2,
end: function () {
that.props.history.push(redirecturl)
}
});
}
}
// 60s倒计时
handlevcode = (e) => {
e.preventdefault();
this.state.tel = this.refs.tel.value
if (!this.state.tel) {
wcpop({ content: '手机号不能为空！', style: 'background:#ff3b30;color:#fff;', time: 2 });
} else if (!checktel(this.state.tel)) {
wcpop({ content: '手机号格式不正确！', style: 'background:#ff3b30;color:#fff;', time: 2 });
} else {
this.state.time = 60
this.state.disabled = true
this.countdown();
}
}
countdown = (e) => {
if(this.state.time > 0){
this.state.time--
this.setstate({
vcodetext: '获取验证码(' + this.state.time + ')'
})
// settimeout(this.countdown, 1000);
settimeout(() => {
this.countdown()
}, 1000);
}else{
this.setstate({
time: 0,
vcodetext: '获取验证码',
disabled: false
})
}
}
}
const mapstatetoprops = (state) => {
return {
...state.auth
}
}
export default connect(mapstatetoprops, {
authtoken: actions.settoken,
authuser: actions.setuser
})(login)
如对本文有疑问， 点击进行留言回复！！
网友评论