微信表情怎么在自己的项目使用微信表情?-> [开源仓库]wechat-emoji

最近搞了个开源小项目------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 来改进项目。

wechat-emojis

相关推荐
像风一样自由20202 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
wuk9982 小时前
基于MATLAB编制的锂离子电池伪二维模型
linux·windows·github
aiprtem3 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊3 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术3 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
GISer_Jing3 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止3 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall3 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴3 小时前
简单入门Python装饰器
前端·python
ai小鬼头4 小时前
AIStarter如何助力用户与创作者?Stable Diffusion一键管理教程!
后端·架构·github