uniapp之webscoket聊天 文字/图片/表情/语音
2024-06-18 14:51:39
、
<image :src=“thead_image” @tap=“tochatset()”>
<view class=“bubble voice” @tap=“playVoice(item.content)” >
<view class=“bubble voice” @tap=“playVoice(item.content)” >
{{val.create_time }}
<image :src=“thead_image” @tap=“tochatset()”>
<view class="bubble voice" @tap="playVoice(val.content)" ><!-- <text class="length">{{item.length}}</text> --><text class="icon other-voice"></text></view> </view> </view></view></view><!-- 数据库返回消息 --><!-- 缓存历史记录 --><!-- <view v-for="(item, idx) in chatromlist" :key="idx"><view class="back_msg_list"><view class="item" v-if='item.type == "text"'><!-- <view class="time">{{timestampToTime(item.create_time)}}</view> --><!-- <view class="msg_right" ><image :src="thead_image"></image><view class="msg_text" v-if="item.length == ''"><rich-text :nodes="item.content"></rich-text></view><view class="msg_text" v-if="item.length != ''"><view class="bubble voice" @tap="playVoice(item.content)" ><!-- <view class="length">{{item.length}}</view> --><!-- <view class="icon other-voice"></view></view> </view></view></view> --><!-- </view> --><!-- 我发送的信息 -->
<!-- <view class="msg_list tototto"><view class="item" v-if='item.type == "say" '> --><!-- <view class="time">{{timestampToTime(item.date) }}</view> --><!-- <view class="msg_right" ><view class="msg_text" v-if="item.length == ''"><rich-text :nodes="item.content" ></rich-text></view> --> <!-- 语音 --><!-- <view class="msg_text" v-if="item.length != ''"> <view class="bubble voice" @tap="playVoice(item.content)" > --> <!-- <view class="length">{{item.length}}</view> --><!-- <view class="icon my-voice"></view></view> </view> --> <!-- 语音 --><!-- <image :src="myhead_image"></image></view></view></view></view> --> <!-- 聊天记录 --><!-- //不在线时，返回未读消息 --><view class="back_msg_list"><view class="item" v-for="(val,index) in UnreadMessages " :key="index"><view class="time">{{val.create_time }}</view><view class="msg_right"><image :src="thead_image" @tap="tochatset()"></image><view class="msg_text" v-if="val.length == ''"><rich-text :nodes="val.content"></rich-text></view><view class="msg_text" v-if="val.length != ''"><view class="bubble voice" @tap="playVoice(val.content)" ><!-- <text class="length">{{item.length}}</text> --><text class="icon other-voice"></text></view> </view> </view></view></view><!-- //我收到的信息 --><view v-for="(item, idx) in ChatRecord" :key="idx"><view class="back_msg_list"><view class="item" v-if='item.type == "text"'><!-- <view class="time">{{timestampToTime(item.create_time)}}</view> --><view class="msg_right"><image :src="thead_image" @tap="tochatset()"></image><view class="msg_text" v-if="item.length == ''"><rich-text :nodes="item.content"></rich-text></view><view class="msg_text" v-if="item.length != ''"><view class="bubble voice" @tap="playVoice(item.content)" ><!-- <text class="length">{{item.length}}</text> --><text class="icon other-voice"></text></view> </view> </view></view></view><!-- 我发送的信息 --><view class="msg_list tototto"><view class="item" v-if='item.type == "say" '><!-- <view class="time">{{timestampToTime(item.date) }}</view> --><view class="msg_right"> <view class="msg_text" v-if="item.length == '' "><rich-text :nodes="item.content" ></rich-text></view><view class="msg_text" v-if="item.length != '' "><view class="bubble voice" @tap="playVoice(item.content)" > <text class="icon my-voice"></text></view> </view><image :src="myhead_image"></image></view></view><view v-if="item.type!='say'&& imglist !='' "><view class="item" v-for="(val,inde) in imglist" :key='inde.date'><!-- <view class="time">{{ val.date}}</view><view class="msg_right"><!-- <view class="msg_text"> --><rich-text :nodes="val.content"></rich-text><!-- </view> --><image :src="myhead_image"></image></view></view></view></view>
<!-- 我发送的图片 --><view class="msg_list tototto"><view class="item" v-for="(val,inde) in imglist" :key='inde'><strong></strong> <view class="msg_right"> <rich-text :nodes="item.content"></rich-text> <image :src="myhead_image" ></image></view></view></view><!-- 表情栏 --><view class="emoji-box" :class="showEmji" @touchmove.stop.prevent="discard"><swiper class="swiper" indicator-dots="true" duration="150"><swiper-item v-for="(page,pid) in emojiList" :key="pid"><view v-for="(em,eid) in page" :key="eid" @tap="addEmoji(em)"><image mode="widthFix" :src="'http://djdl.chenzhuo.vip/emoji/'+em.url"></image></view></swiper-item></swiper></view><!-- 发送的信息 --><view class="input-box" :class="showEmji" @touchmove.stop.prevent="discard"><!-- H5下不能录音，输入栏布局改动一下 --><!-- #ifndef H5 --><view class="voice"><view class="icon" :class="isVoice?'jianpan':'yuyin'" @tap="switchVoice"></view></view><!-- #endif --><!-- #ifdef H5 --><view class="more" @tap="sel_img"><view class="icon tupian"></view></view><!-- #endif --><view class="textbox"><view class="voice-mode" :class="[isVoice?'':'hidden',recording?'recording':'']" @touchstart="voiceBegin" @touchmove.stop.prevent="voiceIng" @touchend="voiceEnd" @touchcancel="voiceCancel">{{voiceTis}}</view><view class="text-mode" :class="isVoice?'hidden':''"><view class="box"><textarea auto-height="true" v-model="textMsg" /></view><view class="em" @tap="chooseEmoji"><view class="icon biaoqing"></view></view></view></view><!-- #ifndef H5 --><view class="more" @tap="sel_img"><view class="icon tupian"></view></view><!-- #endif --><view class="send" :class="isVoice?'hidden':''" @tap="sendText"><view class="btn">发送</view></view></view><!-- 录音效果(上滑取消) --><view class="record" :class="recording?'':'hidden'"><view class="ing" :class="willStop?'hidden':''"><view class="icon luyin2" ></view></view><view class="cancel" :class="willStop?'':'hidden'"><view class="icon chehui" ></view></view><view class="tis" :class="willStop?'change':''">{{recordTis}}</view></view></view></view>
uniapp之webscoket聊天 文字/图片/表情/语音相关推荐
- android 轻松实现在线即时聊天【图片、语音、表情、文字】等！含源码！
之前做够在线及时聊天,小型企业基本上都是通过xmpp协议实现,但是我之前公司做的多多少少会出现一些问题,今天在查找资料的时候,无意发现了一个很好的东西,某公司开发了一套即时聊天sdk,虽然也是由xmp ...
- 【游戏开发实战】Unity UGUI Text图文混排（聊天文字混表情），支持动态表情，出招吧表情帝
文章目录 一.前言 二.最终效果 三.具体使用 1.导入表情素材 2.设置图片格式 3.生成表情图集 4.UI-EmojiFont.shader 5.材质球 四.测试 五.结束语 一.前言 点关注不迷 ...
- 环信聊天，可发图片和语音2
1.录音的代码实现,先写一个按钮了,当点击时执行的事件 /*** 录音*/recording.setOnTouchListener(new View.OnTouchListener() {@Overr ...
- 把图片变成语音怎么弄？快来看看这篇文章
在图书馆.美术馆.博物馆等公共场所举办展会时,每个展品都附带着相应的文字说明,旨在让参观者更好地了解展品的背景.历史.文化等方面的信息.此外,展馆也会将展品的信息以语音形式播出,以便让看不清或看不懂文 ...
- uniapp集成腾讯即时通信IM，实现一对一聊天，支持文字、表情、语音、图片、视频
uniapp集成腾讯即时通信IM,实现一对一聊天,支持文字.表情.语音.图片.视频 原则 拿来即用,节省开发时间 介绍 腾讯的给的例子内容比较乱,我花了好长时间才集成出来,然后对聊天页面做了UI美化. ...
- IM聊天教程:发送图片/视频/语音/表情
经常有朋友问起,如何在IM即时通讯中实现发送图片.视频.语音和表情?为此,小编特意写了一个vue版本的Demo,实现了图片视频文件和表情的的发送,参考这个Demo源代码,相信你就可以轻松的用Uniap ...
- 动手写一个微信聊天页，有文字，有语音，有图片
今天给大家分享用网页实现移动端微信聊天记录的功能,效果图如下: 页面布局中,聊天框使用flex布局,聊天气泡通过伪元素实现(前面文章有记录如何实现一个微信聊天气泡框) 语音播放时写的一个css动画,通 ...
- 相对路径找不到图片_微信聊天视频、图片、语音记录等文件管理器，再也不怕找不到聊天文件了！...
微信作为我们打开频率最高的应用之一,每天都会浏览.加载一些视频.图片还有别人发过来的语音等文件. 这些文件很多是我们不能直接管理的,所谓积少成多,渐渐的各种缩略图.加载过的文件越来越多,所占的存储空间 ...
- 高仿腾讯 QQ，已经实现了纯文本，表情，图片，语音，位置等信息的发送。
QQ 项目地址:HuTianQi/QQ 简介:高仿腾讯 QQ,已经实现了纯文本,表情,图片,语音,位置等信息的发送. 一款高仿腾讯 QQ 的 IM 软件,基于 bmob SDK,已经实现聊天,表情,图 ...
最新文章
- OC 组合实现多继承
- （原创）Python文件与文件系统系列（5）——stat模块
- git 创建分支，更改并提交
- Python 技术篇-容易被忽略的尾差问题
- 为什么python这么火_Python为什么这么火?你了解多少呢?
- [js] flash如何与js交互？
- 3ds max sdk导出插件编写的心得
- 使用IDEA 自带的 MySQL UI 工具插件
- 拓端tecdat|R语言用逻辑回归、决策树和随机森林对信贷数据集进行分类预测
- win10下编译GANet
- 嵌入式系统开发15——基于SPI协议的OLED屏显简单应用
- idea创建父子工程module_在IDEA中创建父工程和子模块module的方法步骤
- proteus仿真里面的LCD1602液晶屏初始化
- CSS选择器（nth-child）
- 关于TTS SpeechVoiceSpeakFlags几个值的中文意思？
- Windows 7/Windows Server 2008 R2深入核心剖析
- mac mysql 8.0 忘记密码
- 记录自己的学习成长之路！
- Kafka Mac下安装与使用
- 四国军棋引擎开发（10）局面评估优化