微信小程序中使用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高版本也支持