基于 Taro+react 多端仿微信聊天室|taro 聊天实例分享

基于Taro+react多端仿微信聊天室|taro聊天实例分享

项目简介:

TaroChatroom多端聊天室是基于taro+react+redux+reactNative+taroPop等技术开发的仿微信App聊天室实例,支持编译到多端(h5+小程序+RN端)。

这是第二个多端实践项目,不过这次使用的是react技术,上次分享的uniapp+vue仿抖音短视频/陌陌直播聊天室是基于vue技术开发的多端项目。

基于vue+uniapp直播项目|uni-app仿抖音/陌陌直播室

技术实现:

  • 编码器/技术:Vscode + react/taro/redux/react-native
  • 字体图标:阿里iconfont字体图标库
  • 自定义导航栏 + 底部Tabbar
  • 弹窗组件:taroPop(Taro封装自定义Modal框)
  • 支持编译:H5端 + 小程序 + app端

基于Taro+react多端仿微信聊天室|taro聊天实例分享

基于Taro+react多端仿微信聊天室|taro聊天实例分享

基于Taro+react多端仿微信聊天室|taro聊天实例分享

基于Taro+react多端仿微信聊天室|taro聊天实例分享

基于Taro+react多端仿微信聊天室|taro聊天实例分享

基于Taro+react多端仿微信聊天室|taro聊天实例分享

基于Taro+react多端仿微信聊天室|taro聊天实例分享

基于Taro+react多端仿微信聊天室|taro聊天实例分享

基于Taro+react多端仿微信聊天室|taro聊天实例分享

基于Taro+react多端仿微信聊天室|taro聊天实例分享

基于Taro+react多端仿微信聊天室|taro聊天实例分享

基于Taro+react多端仿微信聊天室|taro聊天实例分享

基于Taro+react多端仿微信聊天室|taro聊天实例分享

基于Taro+react多端仿微信聊天室|taro聊天实例分享

基于Taro+react多端仿微信聊天室|taro聊天实例分享

基于Taro+react多端仿微信聊天室|taro聊天实例分享

配置入口页面路径、公共样式

/**
  * @desc   Taro入口页面 app.jsx
  */

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'))

taro自定义导航栏+tabbar

项目中为了三端统一效果,顶部导航条及底部tabbar均采用自定义组件模式,由于之前有分享文章,这里不详细介绍了。

Taro多端自定义导航栏Navbar+Tabbar实例

Taro自定义Modal对话框组件|taro仿微信、android弹窗

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

在taro中获取多个表单值,方法还是比较简单的,像下面的方法就能简单获取多个input值了

<Input placeholder="请输入手机号/昵称" onInput={this.handleInput.bind(this, 'tel')} />
<Input placeholder="请输入密码" password onInput={this.handleInput.bind(this, 'pwd')} />

this.state = {
    tel: '',
    pwd: '',
}

handleInput = (key, e) => {
    this.setState({ [key]: e.detail.value })
}

下面就详细展示如何获取表单并验证、本地存储处理

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

在开发中需要注意官网提供的api支持性,由于taro中rn端不支持同步存储,只能改为setStorageSync异步存储

基于Taro+react多端仿微信聊天室|taro聊天实例分享

/**
 * @desc Taro本地存储
 */

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)
    }

    static del(key){
        Taro.removeStorage({key: key}).then(res => res)
    }

    static clear(){
        Taro.clearStorage()
    }
}

taro样式兼容处理

在开发中对于一些不兼容rn端样式,不希望编译到rn端,则可通过如下代码包裹即可

/*postcss-pxtransform rn eject enable*/ 
/*postcss-pxtransform rn eject disable*/

下面整理了一些rn端兼容样式处理,对于不兼容样式,可通过@mixins统一处理下

/**
 * RN 不支持针对某一边设置 style,即 border-bottom-style 会报错
 * 那么 border-bottom: 1px 就需要写成如下形式: border: 0 style color; border-bottom-width: 1px;
 */
@mixin border($dir, $width, $style, $color) {
    border: 0 $style $color;
    @each $d in $dir {
        #{border-#{$d}-width}: $width;
    }
}

/**
 * NOTE RN 无法通过 text-overflow 实现省略号,这些代码不会编译到 RN 中
 */
@mixin ellipsis {
    /*postcss-pxtransform rn eject enable*/
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    /*postcss-pxtransform rn eject disable*/
}

/**
 * NOTE 实现多行文本省略,RN 用 Text 标签的 numberOfLines={2},H5/小程序用 -webkit-line-clamp
 */
@mixin clamp($line) {
    /*postcss-pxtransform rn eject enable*/
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp:$line;
    /* autoprefixer: ignore next */
    -webkit-box-orient: vertical;
    /*postcss-pxtransform rn eject disable*/
}

/**
 * 对于不能打包到 RN 的样式,可以用 postcss 方式引入
 */
 @mixin eject($attr, $value) {
    /*postcss-pxtransform rn eject enable*/
    #{$attr}: $value;
    /*postcss-pxtransform rn eject disable*/
}

taro滚动至聊天底部

基于Taro+react多端仿微信聊天室|taro聊天实例分享

在taro中实现聊天信息滚动到最底部,在H5/小程序端则可通过获取createSelectorQuery 来实现滚动到聊天底部,由于RN端不支持createSelectorQuery,则只能另外兼容处理

基于Taro+react多端仿微信聊天室|taro聊天实例分享

// 滚动聊天底部
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)
}
componentDidMount() {
    if(process.env.TARO_ENV === 'rn') {
        this.scrollMsgBottomRN()
    }else {
        this.scrollMsgBottom()
    }
}

另外在开发中需要特别注意rn端flex布局和h5、小程序端差异。。

constructor(props) {
    super(props)
    this.state = {
        scrollTop: 0,

        showFootToolbar: false,
        showFootViewIndex: 0,

        editorText: '',
        editorLastCursor: 0,

        // 消息记录
        msgJson: msgList,

        // 表情json
        emotionJson: emotionList,

        // 预览图片数组
        previewImgArray: [],
    }
}

componentDidMount() {
    if(process.env.TARO_ENV === 'rn') {
        this.scrollMsgBottomRN()
    }else {
        this.scrollMsgBottom()
    }
}

...

// 点击聊天消息区域
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+react开发聊天室实例分享介绍,希望能有点点帮助~~😶😶

最后分享两个最近实例项目,希望能喜欢。

react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面

vue仿微信网页版|vue+web端聊天室|仿微信客户端vue版

基于Taro+react多端仿微信聊天室|taro聊天实例分享

本作品采用《CC 协议》,转载必须注明作者和本文链接
本文为原创文章,未经作者允许不得转载,欢迎大家一起交流 QQ(282310962) wx(xy190310)
讨论数量: 2

这个真不错,我学习了!

3年前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!
文章
46
粉丝
44
喜欢
99
收藏
54
排名:372
访问:2.6 万
私信
所有博文
博客标签
react
1
angular
1
react仿微信
2
react实战开发
2
react+redux
1
react网页聊天
2
angular仿微信
1
angular聊天室
1
angular+node聊天
1
h5仿微信
1
仿微信语音
1
仿微信界面
1
RN弹窗
1
react-native自定义弹窗
1
react-native弹窗
1
React Native
1
reactNative仿微信
1
RN仿微信聊天
1
ReactNative朋友圈
1
uniapp仿微信
1
uniapp聊天室
2
uniapp聊天App
1
uni-app+vue实例
1
uni-app即时通讯
1
uniapp直播
1
uni-app仿抖音
1
uniapp仿陌陌
1
uni-app小视频
1
taro仿微信
1
taro聊天室
1
taro仿微信界面
1
taro+react聊天APP
1
taro即时通讯
1
electron+vue
1
electron-vue仿微信
1
electron聊天
1
electron实例
1
flutter实例
1
flutter仿微信
1
flutter+dart聊天
1
flutter聊天室
1
flutter聊天界面
1
vue自定义弹窗
1
vue全局对话框
1
vue长按弹出框
1
vue右键弹层
1
nuxt对话框
1
vue仿微信弹窗
1
vue仿探探
1
vue仿Tinder
1
vue卡片堆叠
1
vue翻牌滑动
1
nuxt仿探探
1
nuxt聊天室
1
nuxt仿微信
1
nuxt即时聊天
1
vue+nuxt聊天实例
1
nuxt.js朋友圈
1
vue.js自定义对话框
1
vue pc端弹窗
1
vue.js桌面端模态框
1
vue弹窗组件
1
vue仿layer
1
vue.js自定义滚动条
1
vue虚拟滚动条
1
vue美化滚动条
1
vue仿饿了么滚动条
1
Vue-Scrollbar
1
react.js弹窗示例
1
react桌面端弹框
1
react.js自定义对话框
1
react pc自定义弹窗
1
react全局弹框
1
vue3.0自定义组件
1
vue3弹框
1
vue3.x对话框
1
vue3.0弹窗
1
vue3.0实例
1
vue3.0聊天室
1
vue3.0仿微信
2
vue3聊天模板
1
vue3+vant3实战开发
1
vue3.x案例
1
vue3聊天实例
1
vue3.0仿QQ
1
vue3.x实战聊天
1
vue3网页聊天
1
vue3.0仿抖音app
1
vue3短视频
1
vue3.x小视频
1
vue3.0直播实例
1
vue3+vite2+vant3实战
1
vue3跨端开发
1
electron仿QQ
1
electron打包
1
electron聊天室
1
electron仿微信
1
electron仿抖音
1
electron短视频
1
electron直播
1
vite2+electron12
1
vite2+vue3.x+swiper
1
vue3+vite.js+vant3
1
vue3后台系统
1
Electron管理系统
1
vite2+electron后台
1
electron12权限管理
1
electron桌面端后台
1
vue3桌面管理
1
vite2+electron13
1
electron仿mac桌面
1
electron桌面管理
1
vite2桌面应用
1
uniapp短视频
1
uniapp仿抖音
1
uni-app直播
1
uniapp后台
1
uni-app+uview后台系统
1
svelte.js实战开发
1
svelte3仿微信
1
svelte+svelteKit聊天室
1
svelte聊天实例
2
svelte朋友圈
1
svelte.js仿微信
1
svelte.js网页聊天
1
svelte-ui-admin
1
svelte-admin后台管理
1
svelte管理系统
1
tauri桌面应用
1
tauri+vue3
1
vite3+tauri
1
tauri聊天程序
1
tauri仿微信
1
vue3后台管理
1
vite.js管理系统
1
vue3+vite4
1
vite4+pinia
1
vue3+pinia2
1
vue3-chatgpt
2
vite-chatgpt
1
chatgpt-mobile
1
electron-chatgpt
1
electron+vite4+vue3
1
electron25-vue3
1
chatgpt-vite
1
uni-chatgpt
1
uniapp+vue3+pinia
2
vite+uniapp
1
chatgpt-uniapp
1
tauri-admin
1
tauri+rust+vue3
1
tauri后台管理
1
tauri-vite
1
tauri+vue3桌面端后台
1
react18 hooks
2
react18+arco
2
react18+zustand
1
react18-webchat
1
react18-admin
1
react-arco-admin
1
react-vite-admin
1
react18后台管理
1
electron-mateos
1
electron27+react18
1
electron-react-macos
1
electron桌面os
1
react-macos
1
uniapp+vue3直播
1
flutter3-chat
2
flutter3仿微信
2
flutter3聊天
2
flutter3+dart3
1
flutter3桌面端开发
1
flutter3-douyin
1
flutter3仿抖音
1
flutter3短视频
1
flutter3直播
1
社区赞助商