实现小程序 uniapp 输入框展示自定义表情包

前言

无需任何在线工具，一条命令生成 .ttf；前端只用 ，就能实时显示高清彩色表情。把 PNG 表情包变成 Web 字体：_input __也能展示丰富的自定义表情。

一、为什么要“把图变成字”

在我遇到的问题背景下，核心是因为 input 不支持 UI 切出来的的表情图片，尤其是在 uniApp 或者小程序使用富文本编辑器较为复杂的背景下，侧面的一个实现方案。

二、整体流程

PNG 文件夹 → 映射表 → nanoemoji → TTF → CDN → @font-face →  里打字出 Emoji

三、本地打包：png → ttf（30 秒）

1. 安装依赖（一次性）

# mac / Linux / WSL 均可
# 创建并进入 Python 隔离环境，避免包污染系统
python -m venv venv && source venv/bin/activate
# 升级安装 nanoemoji 工具：把 PNG/SVG 打包成彩色字体
pip install -U nanoemoji

2. 准备素材

emojis/
 ├─ grin.png
 ├─ cool.png
 └─ …

透明 PNG，建议 64×64 或 128×128。

3. 生成映射表（自动）

cd emojis/
# 把当前目录下所有 png 文件列出来，自动生成“文件名→Unicode私有码位”映射表，保存为 config.csv
ls *.png | awk '{printf "%s,U+C%04X\n",$0,NR+0xC000}' > config.csv

示例输出

grin.png,U+C001
cool.png,U+C002

码位用私有区 U+C000 ～ U+CFFF，不与系统 Emoji 冲突。

4. 一键打包

nanoemoji \
  --config config.csv \
  --output_file emojifont.ttf \
  --color_format sbix        # 彩色位图，兼容主流浏览器

得到：

• emojifont.ttf （彩色）

• emojifont.woff2 （自动压缩，更小）

5. 上传 CDN

# 上传至阿里云 OSS（提前安装并配置 ossutil）
ossutil cp emojifont.ttf oss://yourbucket/font/

外链示例

https://cdn.yourdomain.com/font/emojifont.ttf

四、前端：只在  里渲染 Emoji

1. 引入字体

@font-face {
  font-family: "iconfont";
  src: url("https://cdn.yourdomain.com/font/emojifont.ttf") format("truetype");
}

2. 输入框样式

.emoji-input {
  font-family: iconfont, system-ui, sans-serif;
  font-size: 24px;
  line-height: 1.2;
  width: 100%;
  padding: 8px;}

3. HTML 结构

biaoqing




发送

4. 插入逻辑

5. 效果

• 用户点 （biaoqing） → input 立即出现彩色 grin 表情

• 继续敲普通字母无缝混合

• 全程只用 ，没有额外 

   或 

  ---

  五、常见坑 & 速查表

  问题	解决方式
  字体跨域 403	CDN 加 Access-Control-Allow-Origin:*
  码位冲突	坚持私有区 U+C000 ～ U+CFFF
  小程序 web-view	白名单 + base64 内嵌（<30 KB）

  ---

  六、一条命令总结

  # ① 安装
  pip install -U nanoemoji
  
  # ② 进目录
  cd emojis/
  
  # ③ 自动生成映射表
  ls *.png | awk '{printf "%s,U+C%04X\n",$0,NR+0xC000}' > config.csv
  
  # ④ 打包
  nanoemoji --config config.csv -o emojifont.ttf --color_format sbix
  
  # ⑤ 上传
  上传至你的CDN服务

  
  

  七、示例效果

  

  相关文档：

  • 注册环信即时通讯IM：https://console.easemob.com/user/register