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

本帖将聚合一些跟emoji表情有关的知识；
相关文章：“i爱记帐” 小程序后端开发小结
第7条经验前端传过来的昵称和备注信息必定要通过严格的正则表达式过滤，放置出现XSS等攻击，另外emoji字体表情库应该使用base64_encode编码，拿信息的时候base64_decode解码便可。

相关组件：
wxParse：集成了emoji表情组件；
WxEmojiView-微信小程序Emoji展现输入组件
纯微信小程序 emoji解析组件

相关demo：
小程序学习用demo推荐：雨碎江南；emoji，评论(适用1221)

相关讨论：
小程序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>

相关讨论：带图片的微信昵称存数据库乱码或存不进去的解决办法（做者：刘冰华）不少用户的昵称都带有小图标 

若是将emoji表情直接存入utf8编码的数据库，会报错，存不进去。

由于编码方式不一样

解决方法：

存以前base64_encode()，取的时候base64_decode()

顺道提醒：

存用户昵称时要考虑表情图片这个因素，不必定===字符串

字段编码设置为utf8mb4以后，并无什么用，读取显示的时候都是一堆问号；

相关讨论：微信小程序没法发送的emoji表情在作一个聊天小程序，发言的时候须要发送输入法中的emoji表情，可是在后端接收的时候收到的确实空字符串。不知道你们遇到过这样的问题吗？
须要从网上找一个js把emoji转换成指定文字的库而后从显示端再转换回来

这样的话服务端须要作处理吗？另外有什么好的js库能够提供吗？
这样的话服务端能够不用处理了，由于编码和反编码都在前端进行了，库github找找，我也没用过，也是提供一个思路，不过我以为必定是有这样的库的

相关讨论：
我想请问一下各位在开发小程序的时候有遇到过获取nickName昵称时遇到有emoji表情时，存到数据库emoji表情就变成了“？？？”这样的状况吗？
能够这个编码，后台识别编码找表情

有个办法能够解决，把数据格式blob类型储存

我用个简单方式解决你问题吧，
一、String 转 Blob: 
   
    String content = "Hello World!";  
   
    Blob blob = Hibernate.createBlob(content.getBytes());  
   
二、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高版本也支持