小程序聊天加入emoji表情

1、从网上下载好表情包文件---------点击前往下载高清emoji表情包
2、搜索相应表情包的string类型表现形式---------点击前往查询表情代码表现形式
3、表情包代码如下

//表情
emojiChar: "☺-😋-😌-😍-😏-😜-😝-😞-😔-😪-😭-😁-😂-😃-😅-😆-👿-😒-😓-😔-😏-😖-😘-😚-😒-😡-😢-😣-😤-😢-😨-😳-😵-😷-😸-😻-😼-😽-😾-😿-🙊-🙋-🙏-✈-🚇-🚃-🚌-🍄-🍅-🍆-🍇-🍈-🍉-🍑-🍒-🍓-🐔-🐶-🐷-👦-👧-👱-👩-👰-👨-👲-👳-💃-💄-💅-💆-💇-🌹-💑-💓-💘-🚲",
//0x1f---
emoji: [
  "60a", "60b", "60c", "60d", "60f",
  "61b", "61d", "61e", "61f",
  "62a", "62c", "62e",
  "602", "603", "605", "606", "608",
  "612", "613", "614", "615", "616", "618", "619", "620", "621", "623", "624", "625", "627", "629", "633", "635", "637",
  "63a", "63b", "63c", "63d", "63e", "63f",
  "64a", "64b", "64f", "681",
  "68a", "68b", "68c",
  "344", "345", "346", "347", "348", "349", "351", "352", "353",
  "414", "415", "416",
  "466", "467", "468", "469", "470", "471", "472", "473",
  "483", "484", "485", "486", "487", "490", "491", "493", "498", "6b4"
]

emojichar 为表情相应的string
emoji为表情的名称后面遍历为到view中,如下代码所示

<view class="emoji-box {{isShow ? 'emoji-move-in' : 'emoji-move-out'}} {{isLoad ? 'no-emoji-move' : ''}}">
  <scroll-view scroll-y="true" bindscroll="emojiScroll" style="height:200px">
    <block wx:for="{{emojis}}" wx:for-item="e" wx:key="index">
      <view class="emoji-cell">
        <image class="touch-active" catchtap="emojiChoose" src="http://.................../emoji/{{e.emoji}}.png" data-emoji="{{e.char}}" data-oxf="{{e.emoji}}"></image>
      </view>
    </block>
  </scroll-view>
</view>

利用for循环遍历出来后如下


图一

注意:

emoji存入utf-8编码的数据库,因编码方式不同,可能会报错存不了。
解决方法如下:

function Base64() {
 // private property  
  const _keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";

// public method for encoding  
this.encode = function (input) {
var output = "";
var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
var i = 0;
input = _utf8_encode(input);
while (i < input.length) {
  chr1 = input.charCodeAt(i++);
  chr2 = input.charCodeAt(i++);
  chr3 = input.charCodeAt(i++);
  enc1 = chr1 >> 2;
  enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
  enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
  enc4 = chr3 & 63;
  if (isNaN(chr2)) {
    enc3 = enc4 = 64;
  } else if (isNaN(chr3)) {
    enc4 = 64;
  }
  output = output +
    _keyStr.charAt(enc1) + _keyStr.charAt(enc2) +
    _keyStr.charAt(enc3) + _keyStr.charAt(enc4);
}
return output;
}

// public method for decoding  
this.decode = function (input) {
var output = "";
var chr1, chr2, chr3;
var enc1, enc2, enc3, enc4;
var i = 0;
input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");
while (i < input.length) {
  enc1 = _keyStr.indexOf(input.charAt(i++));
  enc2 = _keyStr.indexOf(input.charAt(i++));
  enc3 = _keyStr.indexOf(input.charAt(i++));
  enc4 = _keyStr.indexOf(input.charAt(i++));
  chr1 = (enc1 << 2) | (enc2 >> 4);
  chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
  chr3 = ((enc3 & 3) << 6) | enc4;
  output = output + String.fromCharCode(chr1);
  if (enc3 != 64) {
    output = output + String.fromCharCode(chr2);
  }
  if (enc4 != 64) {
    output = output + String.fromCharCode(chr3);
  }
}
output = _utf8_decode(output);
return output;
}

// private method for UTF-8 encoding  
const _utf8_encode = function (string) {
string = string.replace(/\r\n/g, "\n");
var utftext = "";
for (var n = 0; n < string.length; n++) {
  var c = string.charCodeAt(n);
  if (c < 128) {
    utftext += String.fromCharCode(c);
  } else if ((c > 127) && (c < 2048)) {
    utftext += String.fromCharCode((c >> 6) | 192);
    utftext += String.fromCharCode((c & 63) | 128);
  } else {
    utftext += String.fromCharCode((c >> 12) | 224);
    utftext += String.fromCharCode(((c >> 6) & 63) | 128);
    utftext += String.fromCharCode((c & 63) | 128);
  }

}
return utftext;
}

// private method for UTF-8 decoding  
const _utf8_decode = function (utftext) {
var string = "";
var i = 0;
// var c = c1 = c2 = 0;
var c = 0;
var c1 = 0;
var c2 = 0;
var c3 = 0;
while (i < utftext.length) {
  c = utftext.charCodeAt(i);
  if (c < 128) {
    string += String.fromCharCode(c);
    i++;
  } else if ((c > 191) && (c < 224)) {
    c2 = utftext.charCodeAt(i + 1);
    string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
    i += 2;
  } else {
    c2 = utftext.charCodeAt(i + 1);
    c3 = utftext.charCodeAt(i + 2);
    string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
    i += 3;
  }
}
return string;
}
}

//对小程序暴露接口 这个一定要有
module.exports = {
  Base64: Base64,
}

引用base.js文件

var base = require('../base64.js')
var base64 = new base.Base64();
let baseEncode = base64.encode(content);  //加密
let baseDecode = base64.decode(baseEncode); // 解密

参考链接:https://blog.csdn.net/qq_33744228/article/details/80335440
https://blog.csdn.net/qq_39734584/article/details/90116892?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。