taro聊天室tarochat项目|taro跨端实践

xiaoyan2015 · · 3467 次点击 · · 开始浏览    
这是一个创建于 的文章,其中的信息可能已经有所发展或是发生改变。

> tarochat是基于taro+react+redux+rn等技术开发的跨端聊天项目,界面仿制微信聊天,实现了消息发送、动态表情、图片预览,还有红包、朋友圈等功能。并且支持编译到h5+小程序+app端。 ![未标题-1.png](https://static.studygolang.com/191218/ff6466f8b698ee98a23ba6923f7df267.png) ** 如上图:taro多端实践(仿微信) 在小程序/h5/App端效果 ** #### 技术实现: * 编码/技术:vscode + react/taro/redux/reactNative * iconfont图标:阿里字体图标库 * 自定义顶部导航条 + Tabbar * 弹窗组件:taroPop(基于Taro封装自定义对话框) * 支持编译:H5端 + 小程序 + App端 ![000360截图20191213022736497.png](https://static.studygolang.com/191218/b00260e7e50fd558290f17637f25c790.png) ![001360截图20191213022929441.png](https://static.studygolang.com/191218/496f89e8f7eb5d0451025bd80fd8cb9b.png) ![003360截图20191212175802429.png](https://static.studygolang.com/191218/f9213365ff9603384c0ad578cf5e2ed0.png) ![007360截图20191212180541309.png](https://static.studygolang.com/191218/223c5ee413e9aaf738d85628ed1f2210.png) ![008360截图20191212180608244.png](https://static.studygolang.com/191218/be7859f4f0003f1513a0c042408f4397.png) ![009360截图20191212180914028.png](https://static.studygolang.com/191218/e9235258b0939471a81abaaabc5b6df6.png) ![010360截图20191212180948684.png](https://static.studygolang.com/191218/965489e1fa8a30867c80697542395d11.png) ![012360截图20191212181108837.png](https://static.studygolang.com/191218/f5a0eb7cdde000f6193fb95ab637db7c.png) ![014360截图20191212181204893.png](https://static.studygolang.com/191218/7250bc748f4c28dbba18114cc0e587f8.png) ![015360截图20191212181349261.png](https://static.studygolang.com/191218/476c167aec9944b0654a2fdd4bc88b4e.png) ![017360截图20191212181758949.png](https://static.studygolang.com/191218/f64e8d470c1e174281f9d4171c1dc009.png) ![018360截图20191212181916509.png](https://static.studygolang.com/191218/a5debe483ec57462953f07c81914f4de.png) ![021360截图20191212182208773.png](https://static.studygolang.com/191218/1125af7444e849468b0672d50f70c893.png) ![023360截图20191212182254238.png](https://static.studygolang.com/191218/1daed0ac9250f6b1437a89df79f6aa5c.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均采用自定义组件模式,由于之前有分享文章,这里不详细介绍了。 [https://www.cnblogs.com/xiaoyan2017/p/11937043.html](https://www.cnblogs.com/xiaoyan2017/p/11937043.html) ### taro登录/注册表单验证|redux状态管理 在taro中获取表单input值也比较简单,直接使用onInput事件即可 ``` 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) ``` 另外需要注意 taro中rn端不支持同步存储,只能改为setStorageSync异步存储 H5/小程序端则可通过获取createSelectorQuery 来实现滚动到聊天底部,由于RN端不支持createSelectorQuery,则只能另外兼容处理 ### 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) } ``` 好了,这次就先介绍到这里了,后续会继续分享一些实例项目。 [uniapp+vue实例项目|仿抖音|陌陌直播室](https://www.cnblogs.com/xiaoyan2017/p/11835641.html)

有疑问加站长微信联系(非本文作者))

入群交流(和以上内容无关):加入Go大咖交流群,或添加微信:liuxiaoyan-s 备注:入群;或加QQ群:692541889

3467 次点击  
加入收藏 微博
暂无回复
添加一条新回复 (您需要 登录 后才能回复 没有账号 ?)
  • 请尽量让自己的回复能够对别人有帮助
  • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`
  • 支持 @ 本站用户;支持表情(输入 : 提示),见 Emoji cheat sheet
  • 图片支持拖拽、截图粘贴等方式上传