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

头像
xiaoyan2017
    阅读 11 分钟
    1

    项目介绍

    taro-chatroom仿微信聊天室项目是基于taro+react+react-redux+ReactNative+taroPop等技术实现的taro版聊天App实例，支持编译到三端h5+小程序+RN端，实现了消息发送、表情大图，图片预览、长按菜单、红包、朋友圈等功能。

    如下图：编译到多端效果：H5端/小程序/App端
    未标题-1.png

    技术实现：

    • 编码/技术：Vscode + react/taro/redux/react-native
    • iconfont图标：阿里字体图标库
    • 自定义导航栏Navigation + 底部Tabbar
    • 弹窗组件：taroPop（基于Taro封装自定义模态框）
    • 支持编译：H5端 + 小程序 + RN端

    001360截图20191213022929441.png

    003360截图20191212175802429.png

    005360截图20191212175921468.png

    007360截图20191212180541309.png

    009360截图20191212180914028.png

    010360截图20191212180948684.png

    012360截图20191212181108837.png

    014360截图20191212181204893.png

    015360截图20191212181349261.png

    017360截图20191212181758949.png

    019360截图20191212182101678.png

    020360截图20191212182129653.png

    021360截图20191212182208773.png

    023360截图20191212182254238.png

    引入公共样式及状态管理

    /**
  * @desc   Taro入口页面 app.jsx
  * @about  Q：282310962  wx：xy190310
  */

import Taro, { Component } from '@tarojs/taro'
import Index from './pages/index'

// 引入状态管理redux
import { Provider } from '@tarojs/redux'
import { store } from './store'

// 引入样式
import './app.scss'
import './styles/fonts/iconfont.css'
import './styles/reset.scss'

class App extends Component {
  config = {
    pages: [
      'pages/auth/login/index',
      'pages/auth/register/index',
      'pages/index/index',
      ...
    ],
    window: {
      backgroundTextStyle: 'light',
      navigationBarBackgroundColor: '#fff',
      navigationBarTitleText: 'TaroChat',
      navigationBarTextStyle: 'black',
      navigationStyle: 'custom'
    }
  }
  
  // 在 App 类中的 render() 函数没有实际作用
  // 请勿修改此函数
  render () {
    return (
      <Provider store={store}>
        <Index />
      </Provider>
    )
  }
}

Taro.render(<App />, document.getElementById('app'))

    顶部导航栏/底部tabbar均为自定义组件，详情见：
    Taro实现自定义导航栏+Tabbar菜单
    弹窗插件是基于Taro自定义模态框组件，参看：
    Taro仿ios/android对话框|模态框

    taro表单验证|状态管理|本地存储

    return (
    <View className="taro__container flexDC bg-eef1f5">
        <Navigation background='#eef1f5' fixed />
        
        <ScrollView className="taro__scrollview flex1" scrollY>
            <View className="auth-lgreg">
                {/* logo */}
                <View className="auth-lgreg__slogan">
                    <View className="auth-lgreg__slogan-logo">
                        <Image className="auth-lgreg__slogan-logo__img" src={require('../../../assets/taro.png')} mode="aspectFit" />
                    </View>
                    <Text className="auth-lgreg__slogan-text">欢迎来到Taro-Chatroom</Text>
                </View>
                {/* 表单 */}
                <View className="auth-lgreg__forms">
                    <View className="auth-lgreg__forms-wrap">
                        <View className="auth-lgreg__forms-item">
                            <Input className="auth-lgreg__forms-iptxt flex1" placeholder="请输入手机号/昵称" onInput={this.handleInput.bind(this, 'tel')} />
                        </View>
                        <View className="auth-lgreg__forms-item">
                            <Input className="auth-lgreg__forms-iptxt flex1" placeholder="请输入密码" password onInput={this.handleInput.bind(this, 'pwd')} />
                        </View>
                    </View>
                    <View className="auth-lgreg__forms-action">
                        <TouchView onClick={this.handleSubmit}><Text className="auth-lgreg__forms-action__btn">登录</Text></TouchView>
                    </View>
                    <View className="auth-lgreg__forms-link">
                        <Text className="auth-lgreg__forms-link__nav">忘记密码</Text>
                        <Text className="auth-lgreg__forms-link__nav" onClick={this.GoToRegister}>注册账号</Text>
                    </View>
                </View>
            </View>
        </ScrollView>

        <TaroPop ref="taroPop" />
    </View>
)

    由于taro中ReactNative端不支持同步存储，只能使用异步存储实现
    360截图20191214141437697.png

    /**
 * @tpl 登录模块
 */

import Taro from '@tarojs/taro'
import { View, Text, ScrollView, Image, Input, Button } from '@tarojs/components'

import './index.scss'

import { connect } from '@tarojs/redux'
import * as actions from '../../../store/action'...

class Login extends Taro.Component {
    config = {
        navigationBarTitleText: '登录'
    }
    constructor(props) {
        super(props)
        this.state = {
            tel: '',
            pwd: '',
        }
    }
    componentWillMount() {
        // 判断是否登录
        storage.get('hasLogin').then(res => {
            if(res && res.hasLogin) {
                Taro.navigateTo({url: '/pages/index/index'})
            }
        })
    }
    // 提交表单
    handleSubmit = () => {
        let taroPop = this.refs.taroPop
        let { tel, pwd } = this.state

        if(!tel) {
            taroPop.show({content: '手机号不能为空', time: 2})
        }else if(!util.checkTel(tel)) {
            taroPop.show({content: '手机号格式有误', time: 2})
        }else if(!pwd) {
            taroPop.show({content: '密码不能为空', time: 2})
        }else {
            // ...接口数据
            ...
            
            storage.set('hasLogin', { hasLogin: true })
            storage.set('user', { username: tel })
            storage.set('token', { token: util.setToken() })

            taroPop.show({
                skin: 'toast',
                content: '登录成功',
                icon: 'success',
                time: 2
            })
            
            ...
        }
    }
    
    render () {
        ...
    }
}

const mapStateToProps = (state) => {
    return {...state.auth}
}

export default connect(mapStateToProps, {
    ...actions
})(Login)
    import Taro from '@tarojs/taro'

export default class Storage {
    static get(key) {
        return Taro.getStorage({ key }).then(res => res.data).catch(() => '')
    }

    static set(key, data){
        return Taro.setStorage({key: key, data: data}).then(res => res)
    }

    ...
}

    对于一些兼容样式，不编译到RN端，则可通过如下代码包裹实现
    /*postcss-pxtransform rn eject enable*/
    /*postcss-pxtransform rn eject disable*/

    taro滚动聊天至最底部

    taro中实现聊天消息滚动到最底部，由于RN端不支持 createSelectorQuery，需要做兼容处理。

    componentDidMount() {
    if(process.env.TARO_ENV === 'rn') {
        this.scrollMsgBottomRN()
    }else {
        this.scrollMsgBottom()
    }
}
    // 滚动至聊天底部
scrollMsgBottom = () => {
    let query = Taro.createSelectorQuery()
    query.select('#scrollview').boundingClientRect()
    query.select('#msglistview').boundingClientRect()
    query.exec((res) => {
        // console.log(res)
        if(res[1].height > res[0].height) {
            this.setState({ scrollTop: res[1].height - res[0].height })
        }
    })
}
scrollMsgBottomRN = (t) => {
    let that = this
    this._timer = setTimeout(() => {
        that.refs.ScrollViewRN.scrollToEnd({animated: false})
    }, t ? 16 : 0)
}

    另外表情部分，则是使用emoj表情符，实现比较简单，就不介绍了。
    360截图20191214143019411.png

    // 渲染消息记录
renderMsgTpl = (data) => {
    return data.map((item, index) => (
        <View key={index}>
            {item.msgtype == 1 && 
            <View className="msgitem msg__time"><Text className="msg__text">{item.msg}</Text></View>
            }
            
            {item.msgtype == 2 && 
            <View className="msgitem msg__notice"><Text className="msg__text">{item.msg}</Text></View>
            }
            
            {item.msgtype == 3 && 
            <View className="msgitem">
                {!item.isme ? <View className="msg__avator"><Image className="msg__avator-img" src={item.avator} mode="aspectFit" /></View> : null}
                <View className={`msg__cntbox ${item.isme ? 'msg-me' : 'msg-others'}`}>
                    <Text className="msg-author">{item.author}</Text>
                    <View className={`msg__cnt ${item.isme ? 'msg__cnt-me' : 'msg__cnt-others'}`} onLongPress={this.handleLongPressMenu}>
                        <Text className="msg__cnt-text">{item.msg}</Text>
                    </View>
                </View>
                {item.isme ? <View className="msg__avator"><Image className="msg__avator-img" src={item.avator} mode="aspectFit" /></View> : null}
            </View>
            }
            
            {item.msgtype == 4 && 
            <View className="msgitem">
                {!item.isme ? <View className="msg__avator"><Image className="msg__avator-img" src={item.avator} mode="aspectFit" /></View> : null}
                <View className={`msg__cntbox ${item.isme ? 'msg-me' : 'msg-others'}`}>
                    <Text className="msg-author">{item.author}</Text>
                    <View className={`msg__cnt ${item.isme ? 'msg__cnt-me' : 'msg__cnt-others'} msg__lgface`} onLongPress={this.handleLongPressMenu}>
                        <Image className="msg__lgface-img" src={item.imgsrc} mode="widthFix" />
                    </View>
                </View>
                {item.isme ? <View className="msg__avator"><Image className="msg__avator-img" src={item.avator} mode="aspectFit" /></View> : null}
            </View>
            }
            
            {item.msgtype == 5 && 
            <View className="msgitem">
                {!item.isme ? <View className="msg__avator"><Image className="msg__avator-img" src={item.avator} mode="aspectFit" /></View> : null}
                <View className={`msg__cntbox ${item.isme ? 'msg-me' : 'msg-others'}`}>
                    <Text className="msg-author">{item.author}</Text>
                    <View className={`msg__cnt ${item.isme ? 'msg__cnt-me' : 'msg__cnt-others'} msg__picture`} onClick={this.handlePreviewPicture.bind(this, item.imgsrc)} onLongPress={this.handleLongPressMenu}>
                        <Image className="msg__picture-img" src={item.imgsrc} mode="widthFix" />
                    </View>
                </View>
                {item.isme ? <View className="msg__avator"><Image className="msg__avator-img" src={item.avator} mode="aspectFit" /></View> : null}
            </View>
            }
            
            ...
        </View>
    ))
}
    ...

// 点击聊天消息区域
msgPanelClicked = () => {
    if(!this.state.showFootToolbar) return
    this.setState({ showFootToolbar: false })
}

// 表情、选择区切换
swtEmojChooseView = (index) => {
    this.setState({ showFootToolbar: true, showFootViewIndex: index })
}

// 底部表情tab切换
swtEmojTab = (index) => {
    let lists = this.state.emotionJson
    for(var i = 0, len = lists.length; i < len; i++) {
        lists[i].selected = false
    }
    lists[index].selected = true
    this.setState({ emotionJson: lists })
}


/* >>> 【编辑器/表情处理模块】------------------------------------- */
bindEditorInput = (e) => {
    this.setState({
        editorText: e.detail.value,
        editorLastCursor: e.detail.cursor
    })
}
bindEditorFocus = (e) => {
    this.setState({ editorLastCursor: e.detail.cursor })
}
bindEditorBlur = (e) => {
    this.setState({ editorLastCursor: e.detail.cursor })
}

handleEmotionTaped = (emoj) => {
    if(emoj == 'del') return
    // 在光标处插入表情
    let { editorText, editorLastCursor } = this.state
    let lastCursor = editorLastCursor ? editorLastCursor : editorText.length
    let startStr = editorText.substr(0, lastCursor)
    let endStr = editorText.substr(lastCursor)
    this.setState({
        editorText: startStr + `${emoj} ` + endStr
    })
}

...

    到这里taro开发聊天app就基本介绍完了，希望大家能喜欢~~
    最后分享个基于Vue实例项目
    vue+uniapp+vuex开发的仿抖音短视频|仿陌陌直播项目

    taro聊天室reactreact-nativeredux
    xiaoyan2017
    765 声望318 粉丝

    web前端开发爱好者，专注于前端h5、jquery、vue、react、angular等技术研发实战项目案例。

    « 上一篇
    基于Taro多端自定义弹窗组件|Toast/msg/dialog信息框
    下一篇 »
    electron+vue实现div contenteditable功能|截图

    引用和评论

    推荐阅读
    头像
    vite6+tauri2.0客户端仿MacOS桌面|tauri2+rust+vue3桌面os

    xiaoyan2017

    头像
    一些react使用小技巧（中）

    夕水赞 7阅读 3.6k评论 5

    头像
    一些react使用小技巧（下）

    夕水赞 5阅读 3.4k评论 6

    头像
    深入浅出React中的refs

    夕水赞 3阅读 3.3k

    头像
    startViewTransition的简单示例

    热饭班长赞 1阅读 3.7k

    头像
    如何使用JavaScript开发AR(增强现实)移动应用 (一)

    注销赞 2阅读 2.1k

    头像
    开发自定义Taro插件解决跨平台难题

    南玖赞 1阅读 2.4k

    0 条评论
    得票最新