本帖将聚合一些跟emoji表情有关的知识;前端传过来的昵称和备注信息一定要经过严格的正则表达式过滤,放置出现XSS等攻击,另外emoji字体表情库应该使用base64_encode编码,拿信息的时候base64_decode解码即可。
相关文章:“i爱记账” 小程序后端开发小结
相关组件:
wxParse:集成了emoji表情组件;
WxEmojiView-微信小程序Emoji展示输入组件
纯微信小程序 emoji解析组件
**相关demo: **
小程序学习用demo推荐:雨碎江南;emoji,评论(适用1221)
**相关讨论1: **小程序Emoj解析 现在在采用Emoj这套组件开发 改装后台返回的表情数据 遇到个问题就是 循环出来的数据始终是一样的 不知道还需要从哪儿修改.请大神指点
var WxEmoji = require('../../WxEmojiView/WxEmojiView.js');
var list = [{
microblog_id: "274", //主微博ID
sendUserInfo:{
content: "数据1 ~![01][02]"
}
},{
microblog_id: "274",
sendUserInfo:{
content: "数据2 ~![03][04]"
}
},{
microblog_id: "274",
sendUserInfo:{
content: "数据3~![05][06]"
}
}];
//先将中括号替换为可解析的::
for(var i = 0;i<list.length;i++){
var dt = list;
var str = dt.sendUserInfo.content;
// var str2 = str.replace(/[\[\]]/g,':');
var str2 = str.replace(/\[([^\[\]]+)\]/g,':$1:');
dt.sendUserInfo.content = str2;
}
Page({
data:{
list:""
},
onLoad: function(){
var that = this;
WxEmoji.bindThis(this);
for(var i = 0;i<list.length;i++){
WxEmoji.buildTextObjs(that,list.sendUserInfo.content);//使用生成文字
list.sendUserInfo.content = "";//清空默认的原文字
}
that.setData({
list:list
});
},
})
//模板文件循环
<block wx:for="{{list}}">
<view class="msg">
<view class="ty flex-1">
<view class="user_name">
张三
<text class="user_sex_level_male">21</text>
<text class="time">刚刚</text>
</view>
<view class="user_apartment">
天通北苑店
</view>
</view>
<view class="ty user_msg mt0">
<import src="../../WxEmojiView/WxEmojiView.wxml"/>
<template is="WxEmojiView" data="{{WxEmojiObjs}}"/>
</view>
</view>
</block>
回答者:Di 目前WxEmojiView我一直没有更新,目前处于alpha0.1版本,所以不建议直接使用。
比较好的方案是,你从WxEmojiView的处理过程中借鉴并改造在你的小程序中,既然已经使用,那么问题定位 这个问题是因为我当时并没有考虑多行使用的方案,所以我当时暴漏的时候没有暴漏出相关多数据方法
WxEmoji.buildTextObjs(that,list.sendUserInfo.content);//使用生成文字
wxEmojiView的源码中我只做了但数据处理,所以只会显示最后一条数据,而且都是一样的
function buildTextObjs(e,str){
var temObjs = {};
temObjs.WxEmojiTextArray = transEmojiStr(str);
__this.setData({
WxEmojiObjs:temObjs//这里直接返回了一个WxEmojiObjs
});
}
解决方案 改造方法,是建立在你不是用其他功能的基础上
//1.改造方法buildTextObjs
function buildTextObjs(e,str){
var temObjs = {};
temObjs.WxEmojiTextArray = transEmojiStr(str);
return temObjs;
}
//2.使用方法
Page({
data:{
list:""
},
onLoad: function(){
var that = this;
WxEmoji.bindThis(this);
for(var i = 0;i<list.length;i++){
//改造这里
list.sendUserInfo.content = WxEmoji.buildTextObjs(that,list.sendUserInfo.content);
}
that.setData({
list:list
});
},
//3: 模版使用
<block wx:for="{{list}}">
<view class="msg">
<view class="ty flex-1">
<view class="user_name">
张三
<text class="user_sex_level_male">21</text>
<text class="time">刚刚</text>
</view>
<view class="user_apartment">
天通北苑店
</view>
</view>
<view class="ty user_msg mt0">
<import src="../../WxEmojiView/WxEmojiView.wxml"/>
<template is="WxEmojiView" data="{{WxEmojiObjs:item.sendUserInfo.content}}"/>
</view>
</view>
</block>
相关讨论2:带图片的微信昵称存数据库乱码或存不进去的解决办法(作者:刘冰华)很多用户的昵称都带有小图标
如果将emoji表情直接存入utf8编码的数据库,会报错,存不进去。因为编码方式不同
解决方法:
存之前base64_encode(),取的时候base64_decode()
顺道提醒:
存用户昵称时要考虑表情图片这个因素,不一定===字符串字段编码设置为utf8mb4之后,并没有什么用,读取显示的时候都是一堆问号;
相关讨论3:微信小程序无法发送的emoji表情在做一个聊天小程序,发言的时候需要发送输入法中的emoji表情,但是在后端接收的时候收到的确实空字符串。不知道大家遇到过这样的问题吗?
需要从网上找一个js把emoji转换成指定文字的库然后从显示端再转换回来,这样的话服务端需要做处理吗?另外有什么好的js库可以提供吗? 这样的话服务端可以不用处理了,因为编码和反编码都在前端进行了,库github找找,我也没用过,也是提供一个思路,不过我觉得一定是有这样的库的。
相关讨论4: 我想请问一下各位在开发小程序的时候有遇到过获取nickName昵称时遇到有emoji表情时,存到数据库emoji表情就变成了“???”这样的情况吗? 可以这个编码,后台识别编码找表情.
解决方法:有个办法可以解决,把数据格式blob类型储存
我用个简单方式解决你问题吧
1、String 转 Blob: String content = "Hello World!"; Blob blob = Hibernate.createBlob(content.getBytes());
2、Blob 转 String: Blob blob; try{ String content = new String(blob.getBytes((long)1, (int)blob.length())); } catch(SQLException e) { e.printStackTrace(); }
,就变成那样了,不知道怎么把他搞出来;如果我不存进数据库,就是先用json_encode然后马上用json_decode,返回微信显示是正常的;但是存到数据库之后拿出来json_decode也是有问题,就转不回去了先用urlencode下,取出的时候用urldecode
这个可以,我刚才试了,base64_encode这个函数其实也是可以,这两个其实会不会有什么兼容问题? 不会存在兼容问题,php高版本也支持