【开源分享】wechat-emoji，一个方便使用微信表情的仓库，目前全部 109个 emoji 都已添加

wechat-emojis - 微信表情包集合与组件

项目简介

一个非官方的微信风格表情包开源项目，包含 109 个即用型表情资源及前端组件，助力快速实现微信风格的表情选择器功能。

https://github.com/xxk8/wechat-emojis 项目特点 分类清晰完整 资源即用性强 直接提供 PNG 格式图片 可直接集成到项目中使用 组件集成便捷 支持 JS/TS 语言 可快速集成微信风格表情选择器 可快速集成微信风格表情输入框 项目结构优势 结构清晰易读 便于查找表情资源 利于二次开发 扩展性良好 支持自定义扩展表情 欢迎开发者共同完善组件功能 应用场景广泛：IM 即时通讯应用。富文本编辑场景，评论区表情功能，博客 emoji 添加功能 如果这个项目对你有帮助，欢迎进行以下操作： ⭐ 点击 Star 给予支持 如果有任何使用问题或改进建议，也欢迎通过 GitHub 仓库与项目作者进行交流。

微信表情包

完整的微信内置表情资源库，包含 109 个高清 PNG 图片和类型安全的 TypeScript API。

功能特性

🎯 完整收录 - 109 个微信内置表情，按类别组织🔧 TypeScript 支持 - 完整类型定义，编译时错误检查🚀 即插即用 - 支持 React、Vue、Angular 等主流框架📦 多种导入方式 - ES6 模块、CommonJS、直接文件引用🔍 强大 API - 搜索、分类、随机获取等功能📱 高质量图片 - PNG 格式，适合各种显示场景📚 详细文档 - 完整 API 文档和使用示例

快速开始

安装使用

# 克隆项目

git clone https://github.com/xxk8/wechat-emojis.git

cd wechat-emojis

# TypeScript 项目

npm install typescript # 如果需要编译

基础用法

import { getEmojiPath, getEmojisByCategory, EmojiCategory } from './wechatEmoji';

// 获取单个表情

const smilePath = getEmojiPath('微笑'); // 'assets/face/微笑.png'

// 获取分类表情

const faceEmojis = getEmojisByCategory(EmojiCategory.FACE); // 75个人脸表情

// 搜索表情

const laughEmojis = searchEmojis('笑'); // 包含"笑"的所有表情

项目结构

wechat-emojis/

├── assets/ # 表情图片资源 (109个PNG文件)

│ ├── face/ # 人脸表情 (75个)

│ ├── gesture/ # 手势表情 (10个)

│ ├── animal/ # 动物表情 (4个)

│ ├── blessing/ # 祝福表情 (7个)

│ └── other/ # 其他表情 (13个)

├── wechatEmoji.ts # TypeScript API模块

├── wechatEmoji.js # 编译后的JavaScript文件

├── data.js # 基础数据文件

├── example.ts # 使用示例

├── API.md # 详细API文档

└── tsconfig.json # TypeScript配置

使用指南

React 组件

import React from 'react';

import { getEmojiPath, getEmojisByCategory, EmojiCategory } from './wechatEmoji';

const EmojiPicker: React.FC = () => {

const faceEmojis = getEmojisByCategory(EmojiCategory.FACE);

return (

);

};

Vue 组件

原生 JavaScript

// 编译后使用

const { getEmojiPath, EmojiCategory, searchEmojis } = require('./wechatEmoji.js');

// 创建表情选择器

function createEmojiPicker(containerId) {

const container = document.getElementById(containerId);

const emojis = searchEmojis('笑');

emojis.forEach(emoji => {

const img = document.createElement('img');

img.src = getEmojiPath(emoji.name);

img.alt = emoji.name;

img.onclick = () => console.log(`选择: ${emoji.name}`);

container.appendChild(img);

});

}

直接使用图片

API 参考

核心函数

函数参数返回值说明getEmojiPath(name)EmojiNamestring | null获取表情图片路径getEmojiInfo(name)EmojiNameEmojiInfo | null获取表情详细信息getEmojisByCategory(category)EmojiCategoryEmojiInfo[]按类别获取表情列表getAllEmojis()-EmojiInfo[]获取所有表情searchEmojis(keyword)stringEmojiInfo[]搜索包含关键词的表情hasEmoji(name)stringboolean检查表情是否存在getRandomEmoji(category?)EmojiCategory?EmojiInfo随机获取表情

类型定义

enum EmojiCategory {

FACE = 'face', // 人脸表情

GESTURE = 'gesture', // 手势表情

ANIMAL = 'animal', // 动物表情

BLESSING = 'blessing', // 祝福表情

OTHER = 'other' // 其他表情

}

interface EmojiInfo {

name: string; // 表情名称

category: EmojiCategory; // 表情类别

path: string; // 图片路径

}

数据统计

类别数量示例人脸表情75个微笑、大哭、呲牙、捂脸、奸笑、加油手势表情10个OK、握手、胜利、抱拳、合十、强、弱动物表情4个猪头、跳跳、发抖、转圈祝福表情7个庆祝、红包、烟花、爆竹其他表情13个爱心、啤酒、蛋糕、太阳、炸弹总计109个完整覆盖微信内置表情

技术要求

TypeScript: 4.0+ (可选，用于类型检查)Node.js: 12+ (用于编译，可选)浏览器: 支持 ES2017+ 的现代浏览器框架: React 16+, Vue 3+, Angular 12+ 或原生 JavaScript

编译和构建

# 编译 TypeScript

npx tsc wechatEmoji.ts --target es2017 --module commonjs

# 或使用配置文件

npx tsc

# 生成类型声明文件

npx tsc --declaration

常见问题

Q: 如何在 Webpack 项目中使用？

// webpack.config.js

module.exports = {

resolve: {

extensions: ['.ts', '.js']

}

};

Q: 如何自定义表情路径？

const customPath = getEmojiPath('微笑')?.replace('assets/', 'my-assets/');

Q: 支持哪些图片格式？ 所有表情均为 PNG 格式，透明背景，适合各种使用场景。

版权声明

本项目为非官方项目，与腾讯公司及微信团队无关表情图片版权归腾讯公司所有本项目仅供个人学习和非商业用途使用任何商业用途请事先获得腾讯公司的授权如有侵权问题，请联系作者删除

贡献

欢迎提交 Issue 和 Pull Request 来改进项目。

wechat-emojis