前阵子《牛来》这个电影爆火，群里有人做了一个牛的表情包网站，点开就能用。
我一看，这东西更适合做成小程序——微信里直接打开，不用跳浏览器，做完还能直接存到相册发朋友圈。
于是我在自己的小程序里加了这个小功能。
01 素材怎么解决
第一步是图片素材。
我自己用 GPT 单独做了 10 张不同表情的牛图。微笑、生气、尴尬、流泪、得瑟，风格统一，卡通粗线条，透明背景。
![[assets/2026-08-18-niulai-emoji-list.png]]
出来之后自己看着还挺舒服。
02 功能怎么实现的
素材准备好之后，剩下的就是跟 AI 描述清楚我要什么。
我把 10 张图丢给 AI，告诉它功能需求：选表情、写文字、调字号、调位置、保存到相册。它根据我小程序既有的页面规范，自己拼出一整个工具页。
实现逻辑不复杂：
底图用 image 组件渲染，文字用 text 组件绝对定位叠在上面，用户拖滑块调位置，文字跟着动。点保存的时候，用 canvas 按两倍分辨率把底图和文字画到一起，导出成图片存到相册。
![[assets/2026-08-18-niulai-edit.png]]
预览和导出是分开的——预览不走 canvas，省掉了真机上坐标换算的麻烦；导出才用 canvas 画一次。
文字样式上，白字加细黑边，这是表情包最经典的搭配，背景怎么换都看得清。
代码一轮跑通，测试全过。
03 注意事项
有几个点值得说一下。
素材格式用 PNG，别用 webp。 webp 体积小，但微信真机上 canvas 画 webp 可能静默失败，电脑上看着正常，手机上空白。
体积大的素材单独拆分包。 10 张图放主包容易超 2MB 上限，单独开个分包，上限 20MB，不用担心。
预览和导出分开做。 预览用原生组件渲染就够了，不要硬用 canvas 做预览。小程序 canvas 的触摸事件坑很多，坐标换算容易出错。导出时再用 canvas 画一次落盘，干净利落。
04 可以试试
现在这个工具已经上线了，在我的小程序里。
选一张牛表情，写一段话，调一下字号和位置，点保存就能下到相册。做完直接发微信、发朋友圈都行。
![[assets/2026-08-18-niulai-share.png]]
如果你也看过《牛来》，或者就想用这只牛做个表情包玩玩，可以试试。
/// 写在最后
这个工具从想法到上线，前后没花多少时间。素材用 GPT 做，代码用 AI 写，我只负责描述需求和做判断。
AI 编程做小工具就是这么个节奏：你想清楚要什么，它帮你干完。剩下的就是上线，让人用起来。