记录--微信小程序,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;
},
本文转载于:
https://blog.csdn.net/XujiRe/article/details/123186801
如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

记录--微信小程序,uniapp,H5端发送,显示emoji表情的更多相关文章
- 用 React 编写的基于Taro + Dva构建的适配不同端(微信小程序、H5、React-Native 等)的时装衣橱
前言 Taro 是一套遵循 React 语法规范的 多端开发 解决方案.现如今市面上端的形态多种多样,Web.React-Native.微信小程序等各种端大行其道,当业务要求同时在不同的端都要求有所表 ...
- 从0到1构建适配不同端(微信小程序、H5、React-Native 等)的taro + dva应用
从0到1构建适配不同端(微信小程序.H5.React-Native 等)的taro + dva应用 写在前面 Taro 是一套遵循 React 语法规范的 多端开发 解决方案.现如今市面上端的形态多种 ...
- 承接微信小程序外包 H5外包就找北京动点软件开发团队
承接小程序外包 微信小程序外包 H5外包 就找北京动点软件 长年承接微信小程序.微信公众号开发 全职的H5开发团队,开发过几十款微信小程序公众号案例 欢迎来电咨询,索取案例! QQ:372900288 ...
- 承接小程序外包 微信小程序外包 H5外包 就找北京动点软件
承接小程序外包 微信小程序外包 H5外包 就找北京动点软件 长年承接微信小程序.微信公众号开发 全职的H5开发团队,开发过几十款微信小程序公众号案例 欢迎来电咨询 QQ:372900288 微信:li ...
- 利用函数计算构建微信小程序的Server端
10分钟上线 - 利用函数计算构建微信小程序的Server端-博客-云栖社区-阿里云 https://yq.aliyun.com/articles/435430 函数计算 读写 oss import ...
- 喜大普奔 | 微信小程序支持PC端打开了
微信小程序可以在PC端打开啦 微信PC版发布了v2.7.0测试版,其中一个重磅的功能就是:支持打开聊天中分享的小程序 咖啡君这么喜欢尝鲜的人自然是在第一时间下载进行了体验 安装成功,会有功能更新说明 ...
- 微信小程序与H5数据传递
这的场景是 小程序webview 加载 H5应用 需求点: 1. 小程序的登录code 需要与H5应用的sessionId建立绑定关系 2.H5内发起微信小程序支付,支付参数传递到小程序,支付结果传递 ...
- 用微信小程序做H5游戏尝试
微信小程序发布后,公司虽然没有拿到第一批内测资格,但作为微信亲密合作伙伴,一定要第一时间去尝试啦.现在微信小程序刚发布还在测试阶段,可以说是1.0版本,所以框架和结构内容都还不多,相关的文档跟微信AP ...
- 深入分析:微信小程序与H5的区别
作为前端工程师,从前端的视角,为大家分析下微信小程序和HTML5与之间的主要区别 第一条是运行环境的不同. 传统的HTML5的运行环境是浏览器,包括webview,而微信小程序的运行环境并非完整的浏览 ...
- 如何使用css来让图片居中不变形 微信小程序和web端适用
图片变形很多人祭奠出了妖魔鬼怪般的各种大法,比如使用jq来写,或者使用css表达式来写.今天我总结的是使用css3来写,唯一最大缺点就是对一些浏览器版本不够兼容.下面就是关于如何使用css来让图片居中 ...
随机推荐
- android mvvm实例解析
MVVM架构,将整个应用分为三层,View层,VM层,Model层.其中View层单向引用VM层,VM层单向引用Model层.如上图. 单向引用,而非双向引用,这是MVVM与MVP最大的区别.View ...
- spring boot读取json文件并实现接口查询
0.源码下载 https://download.csdn.net/download/IndexMan/84238085 1.说明 最近需要在spring boot项目启动时读取json文件并保存到Li ...
- 文心一言 VS 讯飞星火 VS chatgpt (204)-- 算法导论15.3 3题
三.考虑矩阵链乘法问题的一个变形:目标改为最大化矩阵序列括号化方案的标量乘法运算次数,而非最小化.此问题具有最优子结构性质吗?需要写代码的时候,请用go语言. 文心一言,代码正常运行: 首先,我们要明 ...
- Redis动态配制,限内存,免重启
p.p1 { margin: 0; font: 14px Menlo; color: rgba(0, 255, 255, 1); background-color: rgba(0, 0, 0, 0.8 ...
- 【Azure 事件中心】如何查看Event Hub的生产者或者是消费者端的IP地址呢?
问题描述 哪些客户端 IP 正在向/从Azure Event Hub发送/接收事件?如何来查看Event Hub的生产者端,消费者端的IP地址呢? 问题解答 如果需要查看Event Hub 服务端的日 ...
- 【Azure 应用服务】调用Azure REST API来获取 App Service的访问限制信息(Access Restrictions)以及修改
问题描述 昨天的博文中(https://www.cnblogs.com/lulight/p/17099179.html)介绍了使用Python SDK 来获取App Service的访问限制信息,那么 ...
- 面试必备:一线大厂Redis缓存设计规范与性能优化
说在前面 你是否在使用Redis时,不清楚Redis应该遵循的设计规范而苦恼? 你是否在Redis出现性能问题时,不知道该如何优化而发愁? 你是否被面试官拷问过Redis的设计规范和性能优化而回答不出 ...
- linux网络编程基础知识汇总(更新中)
阿帕网 arpanet 阿帕网为美国国防部高级研究计划署开发的世界上第一个运营的封包交换网络,它是全球互联网的始祖. 局域网 LAN(Local Area Network ):通过路由器和交换机把计算 ...
- 想做大模型开发前,先来了解一下MoE
为了实现大模型的高效训练和推理,混合专家模型MoE便横空出世. 大模型发展即将进入下一阶段但目前仍面临众多难题.为满足与日俱增的实际需求,大模型参数会越来越大,数据集类型越来越多,从而导致训练难度大增 ...
- vscode编译多个C/CPP文件
修改vscode里面的tasks.json文件,下面是修改好的,参考 "args": [ "-fdiagnostics-color=always", " ...