微信小程序中使用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.改造方法buildTextObjsfunction 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高版本也支持