微信小程序、uniapp、H5——发送、显示emoji表情

小伙伴们，在开发中有没有遇到过发布帖子或者实时聊天需要发送到一些emoji表情的。

但是每当我们直接将emoji表情提交到后台的接口又会报错，因为字符串的格式不一致导致数据无法添加致数据库。
那么作为前端的我们就要将我们要提交的数据，通过如下方法正则获取所有的emoji表情，将其转成 base64 。

// 将emoji表情其转成 base64
utf16toEntities:function(str) {var patt = /[\ud800-\udbff][\udc00-\udfff]/g; // 检测utf16字符正则str = str.replace(patt, function (char) {var H, L, code;if (char.length === 2) {H = char.charCodeAt(0); // 取出高位L = char.charCodeAt(1); // 取出低位code = (H - 0xD800) * 0x400 + 0x10000 + L - 0xDC00; // 转换算法return "&#" + code + ";";} else {return char;}});return str;
},

这样我们就可以成功的将emoji表情提交到后台并加入数据库中了
那么怎么显示的时候是一串字符串呢？
那是因为你这里没有在转一下字符串类型导致现在显示出来的不是emoji表情，而是一串字符串
接着我们就要在显示前使用如下方法将该字段解码

// 解码emoji表情
uncodeUtf16:function(str){var reg = /\&#.*?;/g;var result = str.replace(reg, function (char) {var H, L, code;if (char.length == 9) {code = parseInt(char.match(/[0-9]+/g));H = Math.floor((code - 0x10000) / 0x400) + 0xD800;L = (code - 0x10000) % 0x400 + 0xDC00;return unescape("%u" + H.toString(16) + "%u" + L.toString(16));} else {return char;}});return result;
},

以上是小编的一个解决方案，如果小伙伴们还有什么好的方法请在下方评论，告知一下小编哦！

微信小程序、uniapp、H5——发送、显示emoji表情相关推荐

记录--微信小程序,uniapp,H5端发送,显示emoji表情
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助小伙伴们,在开发中有没有遇到过发布帖子或者实时聊天需要发送到一些emoji表情的. 但是每当我们直接将emoji表情提交到后台的接口又会报 ...
uni-app开发微信小程序，H5 关于压缩上传图片的问题
文章目录前言一.为什么要压缩图片二.图片压缩方式 1. 微信小程序 2. H5 总结前言关于微信小程序.H5兼容性问题,今天就压缩以及上传图片做一个可实现方法的简要阐述. 一. ...
Shopro商城高级版 Fastadmin和Uniapp进行开发的多平台商城（微信公众号、微信小程序、H5网页、Android-App、IOS-App）
Shopro商城无加密的开源源码(可用于自营+外包项目(多主体).可用于外包定制开发项目) shopro 商城,一款基于 uni-app 的前端模板商城.目前适配了(小程序+app+h5+公众号). ...
Shopro商城,基于Fastadmin和Uniapp进行开发的多平台（微信公众号、微信小程序、H5网页、Android-App、IOS-App）购物商城
Shopro商城基于Fastadmin和Uniapp进行开发的多平台(微信公众号.微信小程序.H5网页.Android-App.IOS-App)购物商城,拥有强大的店铺装修.小程序直播.自定义模板. ...
uniapp实现微信小程序全局【发送给朋友】、【分享到朋友圈】、【复制链接】
在开发微信小程序的时候,发现[发送给朋友].[分享到朋友圈].[复制链接]功能,灰色不可用. 很常见的功能,但是这几个功能,并不是你项目建起来了就有的. 1.[发送给朋友]使用 onShareAppM ...
json 微信小程序筛选_GitHub - zhengyangkang/sl-filter: uni -app 一款使用简单的筛选组件，适配app、微信小程序、H5。...
sl-filter 筛选筛选组件,组件名:sl-filter dcloud插件市场地址 sl-filter 简介一款使用简单的筛选组件,适配app.微信小程序.H5. 感谢分享效果图并列菜单 ...
微信小程序uni-app
文章目录一.微信小程序uni-app 二.下载微信开发者工具三.小程序开发一.微信小程序uni-app 小程序是一种不需要下载.安装即可使用的应用,它实现了应用触手可及的梦想,用户扫一扫或者搜一 ...
html5苹果x底部满屏,iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配...
最近写小程序时,遇到了 iPhoneX 底部小黑线与内容重叠的问题,实际上是iPhoneX安全区域的适配问题,了解清楚这个问题花了挺多时间的,也实操出了结果,忍不住来总结总结. 前言在苹果 iPho ...
iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配
最近写小程序时,遇到了 iPhoneX 底部小黑线与内容重叠的问题,实际上是iPhoneX安全区域的适配问题,了解清楚这个问题花了挺多时间的,也实操出了结果,忍不住来总结总结. 本文目录前言 ...
开发微信小程序(uniapp)
@2021SC@SDUSC WebStorm开发微信小程序(uniapp) 创建项目采用cli方式创建的项目 vue create -p dcloudio/uni-preset-vue my-pro ...

微信小程序、uniapp、H5——发送、显示emoji表情

微信小程序、uniapp、H5——发送、显示emoji表情相关推荐

最新文章

热门文章