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

小伙伴们,在开发中有没有遇到过发布帖子或者实时聊天需要发送到一些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. 【译】发布 .NET Aspire 预览版 2(一)

    原文 | Damian Edwards 翻译 | 郑子铭 自上个月宣布并推出 .NET Aspire 以来,我们收到的反馈非常惊人!通过问题和拉取请求对回购协议的参与一直激励着团队.我们正在深入了解开 ...

  2. 好书推荐之《Java 核心技术:卷 1 基础知识》

    大佬推荐 <Java 核心技术:卷 1 基础知识>,这本书本来是 Sun 公司的官方用书,是一本 Java 的入门参考书. 对于 Java 初学者来说,是一本非常不错的值得时常翻阅的技术手 ...

  3. NAND Flash 寿命算法——Wear leveling

    由于闪存的可擦写次数是有限的,当某些数据被频繁修改时容易导致对应的块很快被耗尽使用寿命,从而导致整块盘无法使用,所以需要有一种技术来将这些块的擦写均摊一下,延长使用寿命. 首先看几个相关的基本概念: ...

  4. VueRouter导航守卫

    VueRouter导航守卫 vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫导航,简单来说导航守卫就是路由跳转过程中的一些钩子函数,路由跳转是一个大的过程,这个大的过程分为跳转前中后 ...

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

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

  6. Oracle如何限制非法调用包中过程

    原文:http://www.oracle.com/technetwork/issue-archive/2015/15-jan/o15plsql-2398996.html 假如我有一个包P_A,其中封装 ...

  7. live555开发笔记(一):live555介绍、windows上msvc2017编译和工程模板

    前言   在pc上搭建流媒体服务器软件,打开视频接受推流,使用live555方案.   live555介绍   Live555是一个为流媒体提供解决方案的跨平台的C++开源项目,它实现了标准流媒体传输 ...

  8. 重点:递归函数,数学模块,随机模块---day14

    1.递归函数 自己调用自己的函数是递归函数 递:去 归:回 一去一回叫作递归 简单递归 def digui(n): print(n,'<==1==>') if n > 0: digu ...

  9. mysql安装及增删改查操作---day35

    # ### mysql ''' 命令可以用tab来补全 d: D:\>cd MySQL5.7 D:\>cd D:\MySQL5.7\mysql-5.7.25-winx64\bin 直接切换 ...

  10. 详解SSL证书系列(3)如何选择SSL证书

    我们知道了在网站部署 SSL 证书后,不管是对网站本身还是对网站的用户都能够带来许多好处.那么随着 HTTPS的普及,市面上也出现了各种不同的 SSL 证书.并且由于 SSL 证书的多样性,很多人对于 ...