Taro实现聊天功能|taro仿微信界面-极光社区

项目介绍：

TaroChat多端聊天实践项目是基于taro+redux+react+rn等跨端技术实现的仿微信界面聊天室，支持编译到H5/小程序/App端，且兼容性一致。

null

技术点：

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

null

入口页面 app.jsx
引入公共样式、组件页面及态管理

/**
  * @desc   入口页面 app.js
  */

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

自定义导航栏配置非常简单，只需在 window 选项下配置 navigationStyle: 'custom' ，只要不设置 tabbar 参数就可以自定义底部组件了。

config = {
    pages: [
      'pages/auth/login/index',
      'pages/auth/register/index',
      'pages/index/index',
      ...
    ],
    window: {
      backgroundTextStyle: 'light',
      navigationBarBackgroundColor: '#fff',
      navigationBarTitleText: 'TaroChat',
      navigationBarTextStyle: 'black',
      navigationStyle: 'custom'
    }
}

这里不详细介绍如何实现自定义 Navbar+tabbar，可以去参看：

taro 自定义 Navigation、tabbar 组件

taro 自定义弹窗 taroPop 组件

登录验证|本地存储

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

import TouchView from '@components/touchView'
import Navigation from '@components/navigation'

// 引入自定义弹窗 taroPop
import TaroPop from '@components/taroPop'

import storage from '@utils/storage'
import util from '@utils/util'

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

            ...
        }
    }
    // 去注册
    GoToRegister = () => {
        Taro.navigateTo({url: '/pages/auth/register/index'})
    }

    render () {
        ...
    }
}

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

export default connect(mapStateToProps, {
    ...actions
})(Login)

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

// 滚动至聊天底部
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)
}

到这里 taro 聊天项目就基本介绍完了，后续也会继续分享一些实战案例~~ 😎😎

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

Taro实现聊天功能|taro仿微信界面

0条评论