这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助

小伙伴们,在开发中有没有遇到过发布帖子或者实时聊天需要发送到一些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表情的更多相关文章

  1. 用 React 编写的基于Taro + Dva构建的适配不同端(微信小程序、H5、React-Native 等)的时装衣橱

    前言 Taro 是一套遵循 React 语法规范的 多端开发 解决方案.现如今市面上端的形态多种多样,Web.React-Native.微信小程序等各种端大行其道,当业务要求同时在不同的端都要求有所表 ...

  2. 从0到1构建适配不同端(微信小程序、H5、React-Native 等)的taro + dva应用

    从0到1构建适配不同端(微信小程序.H5.React-Native 等)的taro + dva应用 写在前面 Taro 是一套遵循 React 语法规范的 多端开发 解决方案.现如今市面上端的形态多种 ...

  3. 承接微信小程序外包 H5外包就找北京动点软件开发团队

    承接小程序外包 微信小程序外包 H5外包 就找北京动点软件 长年承接微信小程序.微信公众号开发 全职的H5开发团队,开发过几十款微信小程序公众号案例 欢迎来电咨询,索取案例! QQ:372900288 ...

  4. 承接小程序外包 微信小程序外包 H5外包 就找北京动点软件

    承接小程序外包 微信小程序外包 H5外包 就找北京动点软件 长年承接微信小程序.微信公众号开发 全职的H5开发团队,开发过几十款微信小程序公众号案例 欢迎来电咨询 QQ:372900288 微信:li ...

  5. 利用函数计算构建微信小程序的Server端

    10分钟上线 - 利用函数计算构建微信小程序的Server端-博客-云栖社区-阿里云 https://yq.aliyun.com/articles/435430 函数计算  读写 oss import ...

  6. 喜大普奔 | 微信小程序支持PC端打开了

    微信小程序可以在PC端打开啦 微信PC版发布了v2.7.0测试版,其中一个重磅的功能就是:支持打开聊天中分享的小程序 咖啡君这么喜欢尝鲜的人自然是在第一时间下载进行了体验 安装成功,会有功能更新说明 ...

  7. 微信小程序与H5数据传递

    这的场景是 小程序webview 加载 H5应用 需求点: 1. 小程序的登录code 需要与H5应用的sessionId建立绑定关系 2.H5内发起微信小程序支付,支付参数传递到小程序,支付结果传递 ...

  8. 用微信小程序做H5游戏尝试

    微信小程序发布后,公司虽然没有拿到第一批内测资格,但作为微信亲密合作伙伴,一定要第一时间去尝试啦.现在微信小程序刚发布还在测试阶段,可以说是1.0版本,所以框架和结构内容都还不多,相关的文档跟微信AP ...

  9. 深入分析:微信小程序与H5的区别

    作为前端工程师,从前端的视角,为大家分析下微信小程序和HTML5与之间的主要区别 第一条是运行环境的不同. 传统的HTML5的运行环境是浏览器,包括webview,而微信小程序的运行环境并非完整的浏览 ...

  10. 如何使用css来让图片居中不变形 微信小程序和web端适用

    图片变形很多人祭奠出了妖魔鬼怪般的各种大法,比如使用jq来写,或者使用css表达式来写.今天我总结的是使用css3来写,唯一最大缺点就是对一些浏览器版本不够兼容.下面就是关于如何使用css来让图片居中 ...

随机推荐

  1. 鹏程杯子2023 pwn

    主要就是修改stdin的最后几位,使他变为write,然后泄露libc,为所欲为即可. 本人是卡在不知道stdin那里可以修改. 然后使用一下jmp qword rbp这个gadget 0x400a9 ...

  2. NC51216 花店橱窗

    题目链接 题目 题目描述 小q和他的老婆小z最近开了一家花店,他们准备把店里最好看的花都摆在橱窗里. 但是他们有很多花瓶,每个花瓶都具有各自的特点,因此,当各个花瓶中放入不同的花束时,会产生不同的美学 ...

  3. RocketMQ—RocketMQ消息重复消费问题

    RocketMQ-RocketMQ消息重复消费问题 重复消费问题的描述 什么情况下会发生重复消费的问题: 生产者多次投递消息:如果生产者发送消息时,连接有延迟,MQ还没收到消息,生产者又发送了一次消息 ...

  4. Linux证书问题:curl#60 - “The certificate issuer‘s certificate has expired

    问题说明 最近在centos7上打算安装php7版本,需要下载一个外网https的yum源,结果报错如下: 执行命令 rpm -Uvh https://mirror.webtatic.com/yum/ ...

  5. 面试官:什么是Java内存模型?

    当问到 Java 内存模型的时候,一定要注意,Java 内存模型(Java Memory Model,JMM)它和 JVM 内存布局(JVM 运行时数据区域)是不一样的,它们是两个完全不同的概念. 1 ...

  6. python运算符---day04

    1.python运算符 (1)算数运算符: + - * / // % ** (2)比较运算符: > < >= <= == != (3)赋值运算符:= += -= *= /= / ...

  7. 【LeetCode链表#10】删除链表中倒数第n个节点(双指针)

    删除链表倒数第N个节点 力扣题目链接(opens new window) 给你一个链表,删除链表的倒数第 n 个结点,并且返回链表的头结点. 进阶:你能尝试使用一趟扫描实现吗? 示例 1: 输入:he ...

  8. 【Azure APIM】解决APIM Self-hosted Gateway在AKS上,最开始访问时候遇见的404问题

    问题描述 根据APIM官方文档,创建Self-hosted 网关在AKS中( 使用 YAML 将自承载网关部署到 Kubernetes :https://docs.azure.cn/zh-cn/api ...

  9. 【Azure 应用服务】Function App / App Service 连接 Blob 报错

    问题描述 因 Blob 启用了防火墙功能,但是当把App Service 或 Function App的出站IP地址都加入到Blob的白名单中,为什么访问还是403错误呢? 问题解答 Azure St ...

  10. 【Azure Redis 缓存】Azure Cache for Redis 服务的导出RDB文件无法在自建的Redis服务中导入

    问题描述 使用微软云的Redis服务,导出它的RDB文件后,想把数据恢复到本地自建的Redis服务中,发现出现如下错误: 15000:S 21 Jun 08:14:11.199 * Retrying ...