微信小程序中使用emoji表情相关说明

本帖将聚合一些跟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(); }

但存进服务器mysql就不行是的,因为你数据库的varchar不支持这个字符,你这个字符有可能是一种三字节的数据你可以选择把那些不规则的字符给过滤,但是这样会缺斤少两,不建议 我现在就是用过滤的,看上去就不全了,所以想看有什么方法能把它存起来,php+mysql那个emoji我通过php的json_encode,

,就变成那样了,不知道怎么把他搞出来;如果我不存进数据库,就是先用json_encode然后马上用json_decode,返回微信显示是正常的;但是存到数据库之后拿出来json_decode也是有问题,就转不回去了先用urlencode下,取出的时候用urldecode
这个可以,我刚才试了,base64_encode这个函数其实也是可以,这两个其实会不会有什么兼容问题? 不会存在兼容问题,php高版本也支持

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,736评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,167评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,442评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,902评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,302评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,573评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,847评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,562评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,260评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,531评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,021评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,367评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,016评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,068评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,827评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,610评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,514评论 2 269

推荐阅读更多精彩内容