uniapp文字穿插表情消息处理

直接上代码：

<template><view class="content"><view  style="overflow-y: auto;"><!--scroll-y:纵轴滚动， scroll-top：定义距离顶部高度 @scroll重新定义距离顶部高度--><scroll-view class="content-box" :scroll-y="true" :scroll-top="scrollTop"  :style="{height: windowHeight-55 +'px'}" @scroll="sc"><view :style="{'padding-top':inputBottom }"></view><view class="message" v-for="(item, index) in mainFriendShow.message" :key="index" :id="index"><view class="message-item " :class="item.receiveId == mainFriendShow.userId?'right':'left'"><view class="content"><!-- rich-text进行html插入--><rich-text :nodes="messageemoj(item.message)"></rich-text><!-- 1111<img src='/static/image/emoji/100.gif'/> messageemoj(item.message)--></view></view></view></scroll-view></view></view>
</template><script>export default {data() {return {mainFriendShow:{messageList: []},windowHeight:0,scrollTop: 0,emojiList:[[{"url":"100.gif",alt:"[微笑]"},{"url":"101.gif",alt:"[伤心]"},{"url":"102.gif",alt:"[美女]"},{"url":"103.gif",alt:"[发呆]"},{"url":"104.gif",alt:"[墨镜]"},{"url":"105.gif",alt:"[哭]"},{"url":"106.gif",alt:"[羞]"},{"url":"107.gif",alt:"[哑]"},{"url":"108.gif",alt:"[睡]"},{"url":"109.gif",alt:"[哭]"},{"url":"110.gif",alt:"[囧]"},{"url":"111.gif",alt:"[怒]"},{"url":"112.gif",alt:"[调皮]"},{"url":"113.gif",alt:"[笑]"},{"url":"114.gif",alt:"[惊讶]"},{"url":"115.gif",alt:"[难过]"},{"url":"116.gif",alt:"[酷]"},{"url":"117.gif",alt:"[汗]"},{"url":"118.gif",alt:"[抓狂]"},{"url":"119.gif",alt:"[吐]"},{"url":"120.gif",alt:"[笑]"},{"url":"121.gif",alt:"[快乐]"},{"url":"122.gif",alt:"[奇]"},{"url":"123.gif",alt:"[傲]"}],[{"url":"124.gif",alt:"[饿]"},{"url":"125.gif",alt:"[累]"},{"url":"126.gif",alt:"[吓]"},{"url":"127.gif",alt:"[汗]"},{"url":"128.gif",alt:"[高兴]"},{"url":"129.gif",alt:"[闲]"},{"url":"130.gif",alt:"[努力]"},{"url":"131.gif",alt:"[骂]"},{"url":"132.gif",alt:"[疑问]"},{"url":"133.gif",alt:"[秘密]"},{"url":"134.gif",alt:"[乱]"},{"url":"135.gif",alt:"[疯]"},{"url":"136.gif",alt:"[哀]"},{"url":"137.gif",alt:"[鬼]"},{"url":"138.gif",alt:"[打击]"},{"url":"139.gif",alt:"[bye]"},{"url":"140.gif",alt:"[汗]"},{"url":"141.gif",alt:"[抠]"},{"url":"142.gif",alt:"[鼓掌]"},{"url":"143.gif",alt:"[糟糕]"},{"url":"144.gif",alt:"[恶搞]"},{"url":"145.gif",alt:"[什么]"},{"url":"146.gif",alt:"[什么]"},{"url":"147.gif",alt:"[累]"}],[{"url":"148.gif",alt:"[看]"},{"url":"149.gif",alt:"[难过]"},{"url":"150.gif",alt:"[难过]"},{"url":"151.gif",alt:"[坏]"},{"url":"152.gif",alt:"[亲]"},{"url":"153.gif",alt:"[吓]"},{"url":"154.gif",alt:"[可怜]"},{"url":"155.gif",alt:"[刀]"},{"url":"156.gif",alt:"[水果]"},{"url":"157.gif",alt:"[酒]"},{"url":"158.gif",alt:"[篮球]"},{"url":"159.gif",alt:"[乒乓]"},{"url":"160.gif",alt:"[咖啡]"},{"url":"161.gif",alt:"[美食]"},{"url":"162.gif",alt:"[动物]"},{"url":"163.gif",alt:"[鲜花]"},{"url":"164.gif",alt:"[枯]"},{"url":"165.gif",alt:"[唇]"},{"url":"166.gif",alt:"[爱]"},{"url":"167.gif",alt:"[分手]"},{"url":"168.gif",alt:"[生日]"},{"url":"169.gif",alt:"[电]"},{"url":"170.gif",alt:"[炸弹]"},{"url":"171.gif",alt:"[刀子]"}],[{"url":"172.gif",alt:"[足球]"},{"url":"173.gif",alt:"[瓢虫]"},{"url":"174.gif",alt:"[翔]"},{"url":"175.gif",alt:"[月亮]"},{"url":"176.gif",alt:"[太阳]"},{"url":"177.gif",alt:"[礼物]"},{"url":"178.gif",alt:"[抱抱]"},{"url":"179.gif",alt:"[拇指]"},{"url":"180.gif",alt:"[贬低]"},{"url":"181.gif",alt:"[握手]"},{"url":"182.gif",alt:"[剪刀手]"},{"url":"183.gif",alt:"[抱拳]"},{"url":"184.gif",alt:"[勾引]"},{"url":"185.gif",alt:"[拳头]"},{"url":"186.gif",alt:"[小拇指]"},{"url":"187.gif",alt:"[拇指八]"},{"url":"188.gif",alt:"[食指]"},{"url":"189.gif",alt:"[ok]"},{"url":"190.gif",alt:"[情侣]"},{"url":"191.gif",alt:"[爱心]"},{"url":"192.gif",alt:"[蹦哒]"},{"url":"193.gif",alt:"[颤抖]"},{"url":"194.gif",alt:"[怄气]"},{"url":"195.gif",alt:"[跳舞]"}],[{"url":"196.gif",alt:"[发呆]"},{"url":"197.gif",alt:"[背着]"},{"url":"198.gif",alt:"[伸手]"},{"url":"199.gif",alt:"[耍帅]"},{"url":"200.png",alt:"[微笑]"},{"url":"201.png",alt:"[生病]"},{"url":"202.png",alt:"[哭泣]"},{"url":"203.png",alt:"[吐舌]"},{"url":"204.png",alt:"[迷糊]"},{"url":"205.png",alt:"[瞪眼]"},{"url":"206.png",alt:"[恐怖]"},{"url":"207.png",alt:"[忧愁]"},{"url":"208.png",alt:"[眨眉]"},{"url":"209.png",alt:"[闭眼]"},{"url":"210.png",alt:"[鄙视]"},{"url":"211.png",alt:"[阴暗]"},{"url":"212.png",alt:"[小鬼]"},{"url":"213.png",alt:"[礼物]"},{"url":"214.png",alt:"[拜佛]"},{"url":"215.png",alt:"[力量]"},{"url":"216.png",alt:"[金钱]"},{"url":"217.png",alt:"[蛋糕]"},{"url":"218.png",alt:"[彩带]"},{"url":"219.png",alt:"[礼物]"},]             ],emoji:{"[微笑]":"100.gif"}};},computed: {//消息处理messageemoj(){return function(message){message.lengthlet msg ='';let bgn = message.indexOf("[")let end = message.indexOf("]")let iq = 0//死循环while(bgn !=-1&&end !=-1){iq += 1;//不存在跳出if(bgn ==-1||end ==-1){msg+= messagebreak;}//防止死循环if(iq>99){break;}//是否是表情格式if(bgn < end&&end<=bgn+3){let ok = falsefor(let i = 0;i < this.emojiList.length; i++){//匹配到表情退出if(ok){break;}//未匹配到表情退出if(i == this.emojiList.length){msg+= message.substring(0,message.indexOf("]"));message = message.substring(message.indexOf("]")+1);break;}for(let j = 0; j < this.emojiList[i].length; j++){if(this.emojiList[i][j].alt == message.substring(message.indexOf("["),message.indexOf("]")+1)){//匹配表情替换msg+= message.substring(0,message.indexOf("["));//格式很重要，不要出现"",用''msg+= "<img src='/static/image/emoji/"+this.emojiList[i][j].url + "' style='width: 50rpx;height: 50rpx;display:inline-block;' />"  message = message.substring(message.indexOf("]")+1);ok = true;break;}}}}else{msg+= message.substring(0,message.indexOf("["));message = message.substring(message.indexOf("[")+1);}//从新获取bgn = message.indexOf("[")end = message.indexOf("]")// break}if(bgn ==-1||end ==-1){//消息不存在表情格式，直接赋值if(msg.length==0){msg = message}}return msg}}},methods: {sc(e){console.log(e)//.detail.scrollHeight scrollTopthis.scrollTop=e.detail.scrollTop},},onLoad(info) {//获取手机高度uni.getSystemInfo({success: res => {console.log(res.windowHeight)this.windowHeight = res.windowHeight}})//自动滚动最下方setTimeout(()=>{this.scrollTop=9999},200)//程序上层标题（好友名）uni.setNavigationBarTitle({title: this.mainFriendShow.name});},onShow() {//如果收到消息是本页面的则直接添加消息uni.onSocketMessage((res) => {let data = JSON.parse(res.data)if (data[0].sendId == this.mainFriend.userId) {if (this.mainFriendShow.message.length >= 20) {this.mainFriendShow.message.splice(0, 1)}this.mainFriendShow.message.push(data[0]);}this.scrollTop = 999999})},};
</script><style lang="scss" scoped>page {background-color: #f3f3f3;}.content {&-box {width: 100%;height: auto;min-height: calc(100vh - env(safe-area-inset-top) - 200rpx);box-sizing: content-box;padding-bottom: 100rpx;position: relative;// 底部安全区域margin-bottom: 0rpx;margin-bottom: constant(safe-area-inset-bottom);margin-bottom: env(safe-area-inset-bottom);&-bg {width: 100%;// height:calc(100vh - env(safe-area-inset-top) - 100rpx) !important;// min-height:calc(100vh - env(safe-area-inset-top) - 100rpx) ;position: fixed;top: 0;left: 0;}&-loading {text-align: center;padding: 20rpx 0;}.message {padding: 14rpx 20rpx;}.message-item {display: flex;justify-content: flex-start;align-items: flex-start;align-content: flex-start;flex-wrap: nowrap;flex-direction: row;.img {width: 80rpx;height: 80rpx;border-radius: 5rpx;}.content {padding: 20rpx;max-width: 500rpx;border-radius: 10rpx;font-size: 28rpx;}&.right {flex-direction: row-reverse;.content {background-color: $uni-color-success;margin-right: 28rpx;word-break: break-all;line-height: 36rpx;position: relative;&::after {content: '';display: block;width: 0;height: 0;border-top: 10rpx solid transparent;border-bottom: 10rpx solid transparent;border-left: 16rpx solid $uni-color-success;position: absolute;right: -16rpx;top: 30rpx;}}}&.left {.content {background-color: $uni-text-color-inverse;margin-left: 28rpx;word-break: break-all;line-height: 36rpx;position: relative;&::after {content: '';display: block;width: 0;height: 0;border-top: 10rpx solid transparent;border-bottom: 10rpx solid transparent;border-right: 16rpx solid $uni-text-color-inverse;position: absolute;left: -16rpx;top: 30rpx;}}}}}.input-box {position: fixed;bottom: 0;left: 0;width: 100%;box-sizing: content-box;z-index: 999;// background-color: #F3F3F3;background-color: $uni-bg-color-grey;// border-top: 1rpx solid #c8c9cc;margin-bottom: 0rpx;margin-bottom: constant(safe-area-inset-bottom);margin-bottom: env(safe-area-inset-bottom);&-flex {display: flex;justify-content: flex-start;align-items: center;flex-wrap: nowrap;flex-direction: row;padding: 0 20rpx;height: 100rpx;&-grow {flex-grow: 1;.content {background-color: #fff;height: 60rpx;padding: 0 20rpx;border-radius: 12rpx;font-size: 28rpx;caret-color: $uni-color-success;}}.btn {margin-left: 20rpx;background-color: $u-type-success;border: none;// height: 60rpx;}}}}
</style>

最感到麻烦的就是message.substring（）里到底要不要+1，还有就是死循环中的双for，是因为之前的数据emojiList就是这样，也懒得改了
rich-text :nodes的参数中不要出现"",用’'代替
能显示：

1111<img src='/static/image/emoji/100.gif'/>

不能显示：

<!--1111<img src="/static/image/emoji/100.gif"/>-->

样式图：

最后：展示代码为页面的一部分，如有错误，请留言，我会及时更改

gif表情包下载

uniapp文字穿插表情消息处理相关推荐

uniapp集成腾讯即时通信IM，实现一对一聊天，支持文字、表情、语音、图片、视频
uniapp集成腾讯即时通信IM,实现一对一聊天,支持文字.表情.语音.图片.视频原则拿来即用,节省开发时间介绍腾讯的给的例子内容比较乱,我花了好长时间才集成出来,然后对聊天页面做了UI美化. ...
android表情加文字图片,Android开发技巧之像QQ一样输入文字和表情图像
EditText和TextView一样,也可以进行图文混排.所不同的是,TextView只用于显示图文混排效果,而EditText不仅可显示,也可混合输入文字和图像,让我们先回顾一下图5.2所示的QQ ...
【视频制作表情包】能直接添加文字的表情包制作工具
直达链接:剪画音频视频剪辑视频制作成表情包时都需要先给视频添加有趣的文字再导出视频然后再制作成GIF表情包今天给大家推荐一款直接添加有趣文字的表情包工具无需下载,打开即用! 在微信中搜索 ...
QQ聊天粘贴的文字变成表情的解决方法
QQ聊天粘贴的文字变成表情的解决方法解决方法: 在从事java开发过程中,有时会使用qq给同事发一下带有特殊符号的内容,例如代码啊,文件路径啊等等.发现复制并粘贴到qq聊天窗口时,有的字符竟然变成了 ...
uni-app 111发送表情包功能
chat.js import $U from "./util.js"; import $H from './request.js'; class chat {constructor ...
uniapp 文字无缝从右到左滚动
uniapp 文字无缝从右到左滚动欢迎使用ay-goLeft_r插件(正研究优化中) 最近有需求为:文字无缝左滚,整理插件代码如下: 1.ay-goLeft_r插件可去uniapp插件市场的操作组 ...
【安卓】SpannableString替换文字为表情
效果图: 文字:[微笑][微笑][微笑][微笑][微笑] 替换后: 前提:已有表情图片,所以只能使用自己的表情图片操作: 将表情图片放在mipmap文件夹下将文字和表情图片一一对应这里我是建立了 ...
uniapp之webscoket聊天文字/图片/表情/语音
. <image :src="thead_image" @tap="tochatset()"> <view class="bubbl ...
小程序聊天室开发，发送文字，表情，图片，音频，视频，即时通讯，快速部署，可定制开发
效果图: 微信小程序聊天功能模块,现在已经支持发送图片,文字,音频,视频,表情,在线即时聊天啦. 需要做的可以联系我微信.13977284413 上代码: <view class="b ...

uniapp文字穿插表情消息处理

uniapp文字穿插表情消息处理相关推荐

最新文章

热门文章