还在为跨框架的微信表情包烦恼？我写了个通用的，拿去吧！🚀

嘿，各位在代码世界里摸爬滚打的兄弟姐妹们，大家好！👋

这个周末，我没有选择"躺平"，而是潜心打磨了一个小工具，今天就来跟大家分享一下这个热乎乎的周末结晶！

不知道你们有没有遇到过这样一个场景：产品经理笑眯眯地走过来说，"我们来做一个聊天功能吧，要能像微信那样发表情哦！😉" 你心想这不简单？然后一头扎进 npm 的海洋里，结果发现事情并不简单。尤其当你的技术栈里既有 React 又有 Vue 的时候，那种抓狂的感觉，谁懂啊！😫

今天，我就想跟大家聊聊我在这个"小黄脸"表情上踩过的坑，以及我是如何亲手终结这个烦恼的。

不堪回首：我们曾经用过的 react-wechat-emoji 📜

在很久很久以前，当我的项目还是纯纯的 React 16 时，我发现了一个叫 react-wechat-emoji 的库。在当时，它就像一道光，轻松解决了文本里 [微笑] 这类代码转换成表情图标的问题。

但好景不长，随着技术迭代，它的问题也越来越致命：

1. 框架"焊死"了 🔗：它的名字就说明了一切，react-wechat-emoji，只能在 React 里用。如果我手头另一个项目是 Vue 的，对不起，您得另请高明。这导致不同项目里的表情方案五花八门，维护起来那叫一个心累。
2. 版本"石化"了 🗿：这是最要命的。它死死地依赖着 React 16。现在都什么年代了？React 18 都满地跑了，大家都在愉快地用着 Hooks。想在现代项目里用它？不是报这个错就是报那个错，基本上就是告诉你："小伙子，你太年轻了，我带不动。"

就这样，一个原本挺好用的工具，慢慢变成了历史的尘埃。

是时候跟"旧时代"说再见了 👋

所以，问题很明显了。我们需要的根本不是一个只能在特定框架、特定版本下工作的"瘸腿"工具。我们需要的是一个能跟上前端发展步伐，能无缝穿梭于不同框架之间 ，体验顺滑的"全能型选手"。

在 npm 里搜寻无果后，我萌生了一个朴素的想法：既然没有好用的轮子，那我就自己造一个！ 😤

闪亮登场：wechat-emoji-renderer，为现代前端而生 ✨

于是，wechat-emoji-renderer 诞生了！它是我倾注了无数心血（和头发）打造的全新解决方案，目的只有一个：让你在任何主流前端框架中，都能优雅地处理微信表情。😎

它有啥不一样？

• 一个顶仨 👑：原生 JS、React、Vue 3通吃，代码和体验高度统一。
• 与时俱进 ⚙️：完全使用 TypeScript 构建，提供完善的类型定义，让你的代码智能提示拉满，健壮性 up up！
• 简单到没朋友 👌：无论是渲染带表情的文本，还是弹出一个表情选择器，都给你封装成了即插即用的组件。
• 高度灵活 🎨：支持自定义表情大小、雪碧图等，满足你的一切定制化需求。

口说无凭，上代码！👇

在 React 里用是这样：

import { WechatEmojiRenderer, EmojiPicker } from 'wechat-emoji-renderer/react';
import 'wechat-emoji-renderer/dist/vue/style.css'; // 别忘了样式

function App() {
  const [text, setText] = useState('你好[微笑]，今天天气不错[太阳]');

  return (
    <div>
      <WechatEmojiRenderer text={text} />
      <EmojiPicker onSelectEmoji={(emoji) => setText(prev => prev + emoji.code)} />
    </div>
  );
}

在 Vue 3 里用是这样：

<template>
  <div>
    <WechatEmojiRenderer :text="text" />
    <EmojiPicker @emoji-click="onClickEmoji" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { WechatEmojiRenderer, EmojiPicker } from 'wechat-emoji-renderer/vue';
import 'wechat-emoji-renderer/dist/vue/style.css'; // 同样需要样式

const text = ref('你好[微笑]，今天天气不错[太阳]');
const onClickEmoji = (emoji) => {
  text.value += emoji.code;
};
</script>

是不是感觉就像呼吸一样自然？

我们最终想要的是什么？🤔

从最初被老旧的库折磨，到下定决心自己动手，我深刻地体会到：一个好的开源工具，不应该成为开发者的束缚，而应该是解放生产力的翅膀。🕊️

wechat-emoji-renderer 就是基于这个理念诞生的。它希望能帮你抹平不同框架带来的差异，让你能更专注于业务逻辑本身，而不是在这些琐碎的基础建设上反复横跳。

如果你也曾为微信表情的问题而烦恼，那么，请务必试试它！

把它带走吧：👇

• GitHub 仓库 : https://github.com/wangtager/wechat-emoji-renderer

欢迎大家试用、提 Issue、甩 PR！让我们一起让前端开发变得更简单、更纯粹一点。Peace & Love! ❤️