Swiper中文论坛

标题: taro聊天|仿微信界面|动态圈|taro+react跨端实例 [打印本页]
作者: xiaoyan2015    时间: 2019-12-17 23:42
标题: taro聊天|仿微信界面|动态圈|taro+react跨端实例

项目简介：
TaroChatroom项目是基于taro+react+redux+reactNative等技术跨端实践仿微信界面聊天室，实现了消息发送、动态表情、图片预览、长按菜单、发红包、朋友圈等功能。支持编译到H5、小程序、App端。

编译效果：


实现技术：










入口页面、页面路径配置
  1. /**
  2.   * @desc   Taro入口页面 app.jsx
  3.   */

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

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

  12. // 引入样式
  13. import './app.scss'
  14. import './styles/fonts/iconfont.css'
  15. import './styles/reset.scss'

  17. class App extends Component {
  18.   config = {
  19.     pages: [
  20.       'pages/auth/login/index',
  21.       'pages/auth/register/index',
  22.       'pages/index/index',
  23.       ...
  24.     ],
  25.     window: {
  26.       backgroundTextStyle: 'light',
  27.       navigationBarBackgroundColor: '#fff',
  28.       navigationBarTitleText: 'TaroChat',
  29.       navigationBarTextStyle: 'black',
  30.       navigationStyle: 'custom'
  31.     }
  32.   }
  33.   
  34.   // 在 App 类中的 render() 函数没有实际作用
  35.   // 请勿修改此函数
  36.   render () {
  37.     return (
  38.       <Provider store={store}>
  39.         <Index />
  40.       </Provider>
  41.     )
  42.   }
  43. }

  45. Taro.render(<App />, document.getElementById('app'))
复制代码
taro表单验证|状态管理|存储实现
  1. return (
  2.     <View className="taro__container flexDC bg-eef1f5">
  3.         <Navigation background='#eef1f5' fixed />
  4.         
  5.         <ScrollView className="taro__scrollview flex1" scrollY>
  6.             <View className="auth-lgreg">
  7.                 {/* logo */}
  8.                 <View className="auth-lgreg__slogan">
  9.                     <View className="auth-lgreg__slogan-logo">
  10.                         <Image className="auth-lgreg__slogan-logo__img" src={require('../../../assets/taro.png')} mode="aspectFit" />
  11.                     </View>
  12.                     <Text className="auth-lgreg__slogan-text">欢迎来到Taro-Chatroom</Text>
  13.                 </View>
  14.                 {/* 表单 */}
  15.                 <View className="auth-lgreg__forms">
  16.                     <View className="auth-lgreg__forms-wrap">
  17.                         <View className="auth-lgreg__forms-item">
  18.                             <Input className="auth-lgreg__forms-iptxt flex1" placeholder="请输入手机号/昵称" onInput={this.handleInput.bind(this, 'tel')} />
  19.                         </View>
  20.                         <View className="auth-lgreg__forms-item">
  21.                             <Input className="auth-lgreg__forms-iptxt flex1" placeholder="请输入密码" password onInput={this.handleInput.bind(this, 'pwd')} />
  22.                         </View>
  23.                     </View>
  24.                     <View className="auth-lgreg__forms-action">
  25.                         <TouchView onClick={this.handleSubmit}><Text className="auth-lgreg__forms-action__btn">登录</Text></TouchView>
  26.                     </View>
  27.                     <View className="auth-lgreg__forms-link">
  28.                         <Text className="auth-lgreg__forms-link__nav">忘记密码</Text>
  29.                         <Text className="auth-lgreg__forms-link__nav" onClick={this.GoToRegister}>注册账号</Text>
  30.                     </View>
  31.                 </View>
  32.             </View>
  33.         </ScrollView>

  35.         <TaroPop ref="taroPop" />
  36.     </View>
  37. )
复制代码
taro中ReactNative端不支持同步存储，只能使用异步存储实现


  1. /**
  2. * @tpl 登录模块
  3. */

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

  8. import './index.scss'

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

  13. class Login extends Taro.Component {
  14.     config = {
  15.         navigationBarTitleText: '登录'
  16.     }
  17.     constructor(props) {
  18.         super(props)
  19.         this.state = {
  20.             tel: '',
  21.             pwd: '',
  22.         }
  23.     }
  24.     componentWillMount() {
  25.         // 判断是否登录
  26.         storage.get('hasLogin').then(res => {
  27.             if(res && res.hasLogin) {
  28.                 Taro.navigateTo({url: '/pages/index/index'})
  29.             }
  30.         })
  31.     }
  32.     // 提交表单
  33.     handleSubmit = () => {
  34.         let taroPop = this.refs.taroPop
  35.         let { tel, pwd } = this.state

  37.         if(!tel) {
  38.             taroPop.show({content: '手机号不能为空', time: 2})
  39.         }else if(!util.checkTel(tel)) {
  40.             taroPop.show({content: '手机号格式有误', time: 2})
  41.         }else if(!pwd) {
  42.             taroPop.show({content: '密码不能为空', time: 2})
  43.         }else {
  44.             // ...接口数据
  45.             ...
  46.             
  47.             storage.set('hasLogin', { hasLogin: true })
  48.             storage.set('user', { username: tel })
  49.             storage.set('token', { token: util.setToken() })

  51.             taroPop.show({
  52.                 skin: 'toast',
  53.                 content: '登录成功',
  54.                 icon: 'success',
  55.                 time: 2
  56.             })
  57.             
  58.             ...
  59.         }
  60.     }
  61.    
  62.     render () {
  63.         ...
  64.     }
  65. }

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

  71. export default connect(mapStateToProps, {
  72.     ...actions
  73. })(Login)
复制代码
对于一些兼容样式，不编译到RN端，则可通过如下代码包裹实现
/*postcss-pxtransform rn eject enable*/
/*postcss-pxtransform rn eject disable*/

taro中实现聊天消息滚动到最底部，由于RN端不支持 createSelectorQuery，需要做兼容处理
  1. // 滚动至聊天底部
  2. scrollMsgBottom = () => {
  3.     let query = Taro.createSelectorQuery()
  4.     query.select('#scrollview').boundingClientRect()
  5.     query.select('#msglistview').boundingClientRect()
  6.     query.exec((res) => {
  7.         // console.log(res)
  8.         if(res[1].height > res[0].height) {
  9.             this.setState({ scrollTop: res[1].height - res[0].height })
  10.         }
  11.     })
  12. }
  13. scrollMsgBottomRN = (t) => {
  14.     let that = this
  15.     this._timer = setTimeout(() => {
  16.         that.refs.ScrollViewRN.scrollToEnd({animated: false})
  17.     }, t ? 16 : 0)
  18. }
复制代码


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

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

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


  23. /* >>> 【编辑器/表情处理模块】------------------------------------- */
  24. bindEditorInput = (e) => {
  25.     this.setState({
  26.         editorText: e.detail.value,
  27.         editorLastCursor: e.detail.cursor
  28.     })
  29. }
  30. bindEditorFocus = (e) => {
  31.     this.setState({ editorLastCursor: e.detail.cursor })
  32. }
  33. bindEditorBlur = (e) => {
  34.     this.setState({ editorLastCursor: e.detail.cursor })
  35. }

  37. handleEmotionTaped = (emoj) => {
  38.     if(emoj == 'del') return
  39.     // 在光标处插入表情
  40.     let { editorText, editorLastCursor } = this.state
  41.     let lastCursor = editorLastCursor ? editorLastCursor : editorText.length
  42.     let startStr = editorText.substr(0, lastCursor)
  43.     let endStr = editorText.substr(lastCursor)
  44.     this.setState({
  45.         editorText: startStr + `${emoj} ` + endStr
  46.     })
  47. }

  49. ...
复制代码


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






欢迎光临 Swiper中文论坛 (http://bbs.swiper.com.cn/) Powered by Discuz! X3.2