uniapp实现表情包发送

表情包实现主要是表情包的json数据类似于如下数据：

[{"phrase":"[微笑]","type":"face","url":"http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/e3/2018new_weixioa02_org.png","hot":false,"common":true,"category":"","icon":"http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/e3/2018new_weixioa02_org.png","value":"[微笑]","picid":""},{"phrase":"[可爱]","type":"face","url":"http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/09/2018new_keai_org.png","hot":false,"common":true,"category":"","icon":"http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/09/2018new_keai_org.png","value":"[可爱]","picid":""}]

回显表情包主要取得 “[微笑]” 数据进行回显：

 //替换表情符号为图片replaceEmoji(str) {// 这里处理 链接   换行符let replacedStr = str.replace(/\[([^(\]|\[)]*)\]/g, (item, index) => {return '<img src="' + this.emojiList.map[item] + '" width="18rpx">';});return replacedStr.replace(/(\r\n)|(\n)/g, '<br>');},

全部代码如下：

<template><view style="position: relative;" @tap="hideinput"><view v-if="status" class="wanl-chat"><!-- 抽屉栏 --><view class="popup-layer" :class="{showLayer: popupLayerClass}" @touchmove.stop.prevent="discard"><!-- 表情 --><view :class="{ hidden: hideEmoji }"><view class="emoji"><scroll-view class="emojinav" scroll-x scroll-with-animation><view class="item"><view :class="item == TabCur ? 'emojibg' : ''" v-for="(item, index) in emojiList.categories":key="index" @tap="tabSelect" :data-id="item":style="{ backgroundImage: 'url(' + emojiList.groups[item][0].url + ')' }"></view></view></scroll-view><!-- 列表 --><scroll-view v-for="(emoji, groups) in emojiList.groups" :key="groups" v-show="TabCur == groups"class="subject" scroll-y scroll-with-animation><view class="item grid margin-bottom text-center col-5"><view v-for="(item, index) in emoji" :key="index" @tap.stop="addEmoji(item.value)":style="{ backgroundImage: 'url(' + item.url + ')' }"></view></view></scroll-view></view></view></view><!-- 底部输入栏 --><view class="input-box" :class="{ emptybottom: emptybottom, showLayer: popupLayerClass}"@touchmove.stop.prevent="discard"><view class="textbox"><view class="text-mode"><view class="box"><textarea auto-height="true" :focus="status" maxlength="300" :show-confirm-bar="false" cursor-spacing="90"v-model="textMsg" @focus="textareaFocus" @blur="textareaBlur" @confirm="sendText" /></view><view class="em" @tap.stop="chooseEmoji"><view class="wlIcon-biaoqing2"></view></view></view></view><view class="send" @tap.stop="sendText"><!-- <text class="wlIcon-zhifeiji" v-if="textMsg"></text><text class="wlIcon-fasong" ></text> -->发送</view></view></view></view>
</template><script>const emotions = require('@/static/json/emotions.json');export default {data() {return {//表情包emojiList: this.emojiData(),obj: {},visitid: '',//状态status: false,//表情textMsg: '', //文字消息scrollTop: 0,// 取消底部emptybottom: false,// 抽屉参数popupLayerClass: false,// more参数hideMore: true,recording: false,//表情定义//表情TabCur: '默认',isVoice: false,hideEmoji: true,//}},created() {},onLoad(option) {},methods: {//底部事件// 禁止滚动discard() {return;},//这是点赞评论getdata() {let url = "" + this.visitidthis.$api.get(url).then(res => {//将请求的结果数组传递给z-pagingconsole.log(res)if (res.code == 200) {// this.valiFormData = res.datathis.obj = res.dataconsole.log(this.obj)} else {uni.showToast({title: res.msg,icon: "none",});console.log('请求数据失败')}}).catch(res => {})},//点赞like() {let params = {// wqWorkComment: {commentType: 2,commentedId: this.obj.id,isDel: 0,originalType: this.obj.originalType,commentedType: 1// },}this.$api.post('', params).then(res => {console.log(res)if (res.code == 200) {this.obj.supportFlag = true;this.obj.supportNums = this.obj.supportNums + 1;this.getdata()}}).catch(res => {})},//取消点赞nolike() {let params = {id: this.obj.supportId,}this.$api.post('', params).then(res => {console.log(res)if (res.code == 200) {this.obj.supportFlag = false;this.obj.supportNums = this.obj.supportNums - 1;this.getdata()}}).catch(res => {})},//评论commentpl() {this.status = true},//隐藏评论hidepl() {this.status = false},// 长按删除onLongPress(e, index) {console.log(e)const that = thisuni.showModal({ // 弹框询问是否进行下一步事件title: '提示',content: '是否删除该评论',success: function(res) {if (res.confirm) {console.log('用户点击确定');let params = {id: e.id,}that.$api.post('', params).then(res => {console.log(res)if (res.code == 200) {that.getdata()that.hidepl()}}).catch(res => {})} else if (res.cancel) {console.log('用户点击取消');return}}});},//这里开始是表情数据// 表情数据emojiData() {var groups = {},categories = [],map = {};emotions.forEach(emotion => {var cate = emotion.category.length > 0 ? emotion.category : '默认';if (!groups[cate]) {groups[cate] = [];categories.push(cate);}groups[cate].push(emotion);map[emotion.phrase] = emotion.icon;});return {groups,categories,map};},//替换表情符号为图片replaceEmoji(str) {// 这里处理 链接   换行符let replacedStr = str.replace(/\[([^(\]|\[)]*)\]/g, (item, index) => {return '<img src="' + this.emojiList.map[item] + '" width="18rpx">';});return replacedStr.replace(/(\r\n)|(\n)/g, '<br>');},// 发送文字消息sendText() {// console.log('9999999')this.hideDrawer(); //隐藏抽屉if (!this.textMsg) {return;}let msg = {text: this.textMsg};let params = {// wqWorkComment: {commentType: 1,commentedId: this.obj.id,isDel: 0,originalType: this.obj.originalType,commentedType: 1,commentContent: this.textMsg// },}console.log(params)this.$api.post('', params).then(res => {console.log(res)if (res.code == 200) {this.getdata()this.hidepl()}}).catch(res => {})this.textMsg = ''; //清空输入框},tabSelect(e) {this.TabCur = e.currentTarget.dataset.id;},// callMethod(){//   console.log('调用子组件')//   this.hideDrawer()// },// 打开抽屉openDrawer() {// console.log(this.focus)this.emptybottom = true;this.popupLayerClass = true;},// 隐藏抽屉hideDrawer() {this.emptybottom = false;this.popupLayerClass = false;setTimeout(() => {this.hideMore = true;this.hideEmoji = true;}, 150);},// 选择表情chooseEmoji() {this.hideMore = true;if (this.hideEmoji) {this.hideEmoji = false;this.openDrawer();} else {this.hideDrawer();}},// 失去焦点textareaBlur() {this.emptybottom = false;},//获取焦点，如果不是选表情ing,则关闭抽屉textareaFocus() {this.emptybottom = true;if (this.popupLayerClass && this.hideMore == false) {this.hideDrawer();}},//添加表情addEmoji(em) {this.textMsg += em;},hideinput() {this.status = false},//表情1111}}
</script><style lang="scss" scoped>//底部.bottombutton {display: flex;width: 100%;min-height: 100rpx;align-items: center;position: fixed;z-index: 2000;background-color: #FFFFFF;bottom: -2rpx;transition: all 0.15s linear;border-bottom: 1px solid #F0F0F0;>view:nth-child(1) {text-align: center;width: 50%;border-right: 1px solid #CCCCCC;.img_one {margin-right: 20rpx;width: 40rpx;}}>view:nth-child(2) {text-align: center;width: 50%;.imgs {width: 40rpx;// margin-right: 20rpx;}// border-right: 1px solid #CCCCCC;}}.input-box {width: 100%;min-height: 100rpx;padding-bottom: env(safe-area-inset-bottom);background-color: #f7f7fa;display: flex;align-items: flex-end;position: fixed;z-index: 3000;bottom: -2rpx;transition: all 0.15s linear;}.input-box [class*='wlIcon-'] {font-size: 50rpx;color: #4c4c4c;}.input-box .wlIcon-zhifeiji {color: #fe6600;}.input-box.showLayer {transform: translate3d(0, -480rpx, 0);}.input-box .voice,.input-box .more {flex-shrink: 0;width: 90rpx;height: 100rpx;display: flex;justify-content: center;align-items: center;}.input-box .send {flex-shrink: 0;width: 90rpx;height: 100rpx;display: flex;justify-content: center;align-items: center;}.input-box .send .btn {width: 110rpx;height: 70rpx;display: flex;justify-content: center;align-items: center;border-radius: 16rpx;font-size: 32rpx;}.input-box .textbox {width: 100%;}.input-box .textbox .voice-mode {width: calc(100% - 2upx);height: 80rpx;margin: 10rpx 0;border-radius: 16rpx;display: flex;justify-content: center;align-items: center;font-size: 28rpx;background-color: #fff;color: #555;}.input-box .textbox .voice-mode.recording {background-color: #e5e5e5;}.input-box .textbox .text-mode {width: 100%;min-height: 80rpx;margin: 10rpx 0;display: flex;background-color: #ffffff;border-radius: 16rpx;}.input-box .textbox .text-mode .box {width: 100%;padding-left: 30rpx;min-height: 80rpx;display: flex;align-items: center;}.input-box .textbox .text-mode .box textarea {width: 100%;}.input-box .textbox .text-mode .em {flex-shrink: 0;width: 80rpx;padding-left: 10rpx;height: 80rpx;display: flex;justify-content: center;align-items: center;}.popup-layer {transition: all 0.15s linear;width: 100%;height: 480rpx;background-color: #f7f7fa;position: fixed;z-index: 3000;top: 100%;}.popup-layer.showLayer {transform: translate3d(0, -480rpx, 0);}.popup-layer .emoji .emojinav {background-color: #f8f8f8;}.popup-layer .emoji .emojinav .item {display: flex;align-items: center;height: 100rpx;padding-left: 10rpx;}.popup-layer .emoji .emojinav .item .emojibg {background-color: #dedede;}.popup-layer .emoji .emojinav .item>view {margin: 0 25rpx;width: 60rpx;height: 60rpx;border-radius: 18rpx;background-repeat: no-repeat;background-size: 80%;background-position: center;}.popup-layer .emoji .subject {height: 380rpx;background-color: #f1f1f1;}.popup-layer .emoji .subject .item {padding: 25rpx;}.popup-layer .emoji .subject .item>view {background-repeat: no-repeat;background-size: 56%;background-position: center;width: 12.5%;height: 100rpx;}.post-footer {background-color: #FFFFFF;// padding: 10rpx 40rpx;.footer_content {padding: 8rpx 10rpx;margin: 4rpx 0;border-radius: 10rpx;font-size: 12px;background-color: #ffffff;display: flex;align-items: center;// transition: all 0.25s linear;.liked {width: 30rpx;}.nickname {margin-left: 4rpx;}}.border {border-radius: 10rpx;}.footer_content_pl {padding: 8rpx 10rpx;// border-bottom: 1px solid #F2F6FC;border-top: 1px solid #F2F6FC;border-radius: 10rpx;font-size: 12px;background-color: #ffffff;display: flex;align-items: center;}.footer_content_pl:last-child {border-bottom: none;}}
</style>

uniapp实现表情包发送相关推荐

Emoji-Chat emoji表情包发送及显示兼容web端、移动端
Emoji-Chat emoji表情包发送及显示兼容web端.移动端序言在如今聊天表情包满天飞的当下,聊天过程中想发送个表情感慨一下情绪在所难免,当下我就遇到这么个需求,希望在web端聊天室中可以 ...
前端emojs_Emoji-Chat emoji表情包发送及显示兼容web端、移动端
序言在如今聊天表情包满天飞的当下,聊天过程中想发送个表情感慨一下情绪在所难免,当下我就遇到这么个需求,希望在web端聊天室中可以发送表情,还得在web端.微信H5.app端.微信公众号里均可以正常显 ...
表情包受保护无法发送怎么破解和制作gif表情包
找到表情包的文件,把文件后缀修改为gif,用photoshop打开它,导出gif格式的文件. 微信的表情包,我写了这篇文章几天就对表情包原文件进行加密了.不过若大家有表情包原文件,虽然不能直接使用可以 ...
Python爬取20w+表情包，微信斗图谁怕谁！
源 / python教程文 / 小雨有一次想要斗图就在网上搜索表情包然后发现了一个表情巨多的网站不小心动起了邪念产生了兴趣那就把它们存下来吧用 requests 请求了一 ...
【爬虫】Yhen手把手教你爬取表情包，让你成为斗图界最靓的仔！
以下内容为本人原创,欢迎大家观看学习,禁止用于商业用途,转载请说明出处,谢谢合作! ·作者:@Yhen ·原文网站:CSDN ·原文链接:https://blog.csdn.net/Yhen1/art ...
python恶搞表情包-关于python表情包
广告关闭 2017年12月,云+社区对外发布,从最开始的技术博客到现在拥有多个社区产品.未来,我们一起乘风破浪,创造无限可能. 来源:python开发id:pythonpush作为一个数据分析师,应该 ...
python自动发表情包
Python 自动斗图小老弟,听说你喜欢斗图,来来来,我们来PK一下,谁的图少算谁输! 我一句话来几十张图,就问你怕不怕! 这个怎么实现呢,我们要分三步: 下载表情包到本地设计查询表情包自动根据 ...
python恶搞表情包-python绘制表情包
广告关闭 2017年12月,云+社区对外发布,从最开始的技术博客到现在拥有多个社区产品.未来,我们一起乘风破浪,创造无限可能. python爱好者社区 , 作者盛光晓表情包是当代社交生态中的战略性武 ...
微信发表情包测试点【杭州多测师】【杭州多测师_王sir】
一.功能测试 1.打开微信聊天界面,点击发表情图标是否进入到表情包界面 2.发表情包输入框指针是否一直跳转 3.是否可以选择1个表情发送 4.是否可以选择2个表情发送 5.假设最高发送的表情包上限为1 ...

uniapp实现表情包发送

uniapp实现表情包发送相关推荐

最新文章

热门文章