最近搞了个开源小项目------wechat-emojis,专门收集和整理了微信风格的表情包(共109个),还顺手做了个前端组件,方便大家直接用在自己的项目里。
项目内容很简单:
- 分类齐全,动物、祝福、表情、手势、其他都有,直接用 PNG 图片,拎包即用。
- 自带 JS/TS 组件,想集成微信风格表情选择器或者输入框,几分钟就能搞定。
- 结构清晰,方便查找和二次开发,适合各种前端项目集成。
- 支持自定义扩展,欢迎大家按需添加自己的表情或者一起完善组件功能。
- 适合 IM、富文本、评论区等各种需要表情的场景。
项目地址在这里:GitHub - xxk8/wechat-emojis: 微信表情包集合,包含即用型表情资源和组件,方便实现微信风格的表情选择器。
微信表情包
完整的微信内置表情资源库,包含 109 个高清 PNG 图片和类型安全的 TypeScript API。
功能特性
- 🎯 完整收录 - 109 个微信内置表情,按类别组织
- 🔧 TypeScript 支持 - 完整类型定义,编译时错误检查
- 🚀 即插即用 - 支持 React、Vue、Angular 等主流框架
- 📦 多种导入方式 - ES6 模块、CommonJS、直接文件引用
- 🔍 强大 API - 搜索、分类、随机获取等功能
- 📱 高质量图片 - PNG 格式,适合各种显示场景
- 📚 详细文档 - 完整 API 文档和使用示例
快速开始
安装使用
bash
# 克隆项目
git clone https://github.com/xxk8/wechat-emojis.git
cd wechat-emojis
# TypeScript 项目
npm install typescript # 如果需要编译
基础用法
typescript
import { getEmojiPath, getEmojisByCategory, EmojiCategory } from './wechatEmoji';
// 获取单个表情
const smilePath = getEmojiPath('微笑'); // 'assets/face/微笑.png'
// 获取分类表情
const faceEmojis = getEmojisByCategory(EmojiCategory.FACE); // 75个人脸表情
// 搜索表情
const laughEmojis = searchEmojis('笑'); // 包含"笑"的所有表情
项目结构
text
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 组件
tsx
import React from 'react';
import { getEmojiPath, getEmojisByCategory, EmojiCategory } from './wechatEmoji';
const EmojiPicker: React.FC = () => {
const faceEmojis = getEmojisByCategory(EmojiCategory.FACE);
return (
<div className="emoji-grid">
{faceEmojis.map(emoji => (
<img
key={emoji.name}
src={getEmojiPath(emoji.name)}
alt={emoji.name}
className="emoji-item"
onClick={() => console.log(`选择: ${emoji.name}`)}
/>
))}
</div>
);
};
Vue 组件
vue
<template>
<div class="emoji-picker">
<img
v-for="emoji in emojis"
:key="emoji.name"
:src="getEmojiPath(emoji.name)"
:alt="emoji.name"
@click="selectEmoji(emoji)"
/>
</div>
</template>
<script setup lang="ts">
import { getEmojisByCategory, getEmojiPath, EmojiCategory } from './wechatEmoji';
const emojis = getEmojisByCategory(EmojiCategory.FACE);
const selectEmoji = (emoji) => console.log(`选择: ${emoji.name}`);
</script>
原生 JavaScript
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);
});
}
直接使用图片
html
<!-- 直接引用图片文件 -->
<img src="assets/face/微笑.png" alt="微笑" />
<img src="assets/gesture/OK.png" alt="OK" />
<img src="assets/animal/猪头.png" alt="猪头" />
API 参考
核心函数
函数 | 参数 | 返回值 | 说明 |
---|---|---|---|
getEmojiPath(name) |
EmojiName |
`string | null` |
getEmojiInfo(name) |
EmojiName |
`EmojiInfo | null` |
getEmojisByCategory(category) |
EmojiCategory |
EmojiInfo[] |
按类别获取表情列表 |
getAllEmojis() |
- | EmojiInfo[] |
获取所有表情 |
searchEmojis(keyword) |
string |
EmojiInfo[] |
搜索包含关键词的表情 |
hasEmoji(name) |
string |
boolean |
检查表情是否存在 |
getRandomEmoji(category?) |
EmojiCategory? |
EmojiInfo |
随机获取表情 |
类型定义
typescript
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
编译和构建
bash
# 编译 TypeScript
npx tsc wechatEmoji.ts --target es2017 --module commonjs
# 或使用配置文件
npx tsc
# 生成类型声明文件
npx tsc --declaration
常见问题
Q: 如何在 Webpack 项目中使用?
javascript
// webpack.config.js
module.exports = {
resolve: {
extensions: ['.ts', '.js']
}
};
Q: 如何自定义表情路径?
typescript
const customPath = getEmojiPath('微笑')?.replace('assets/', 'my-assets/');
Q: 支持哪些图片格式? 所有表情均为 PNG 格式,透明背景,适合各种使用场景。
版权声明
- 本项目为非官方项目,与腾讯公司及微信团队无关
- 表情图片版权归腾讯公司所有
- 本项目仅供个人学习和非商业用途使用
- 任何商业用途请事先获得腾讯公司的授权
- 如有侵权问题,请联系作者删除
贡献
欢迎提交 Issue 和 Pull Request 来改进项目。