大家好，我是动次动次，一名全栈软件开发工程师。之前在看公众号文章的时候，看到一篇表情包的相关文章，感觉封面图很有趣就点进去了。进去一看，原来有这么多好看的表情图片。
想着全部下来，但是感觉一个一个图片的保存太麻烦了，如果能一键选中并保存那就太好了，而且公众号封面图也是比较难获取到的。刚开始，搜了一下，没有找到类似的小程序。后来搜到了，但发现广告太多了，实在是影响使用体验。
于是就有了开发这个小程序的想法。方便自己，也方便他人使用。
一、如何挖掘需求
1、解决自己的问题
2、解决别人的问题
3、在使用时有什么不舒服的地方，可以通过什么技术来解决一下
二、需求分析
是否可以把微信公众号文章里的表情包一键全部下载到本地。
是否可以把本地的图片一键添加到微信的表情包里。
三、Trae 开发一键获取表情包详解
一）项目初始化明确自己的需求
1、技术栈
前端：JavaScript + WXML + WXSS
后端：前期通过搜索相关的实现方式，发现微信提供对应的接口来获取图片，所以就不需要添加后端了
2、核心功能
根据输入框填写的微信公众号文章链接，对文章做解析
点击提取图片，获取微信公众号文章里的全部表情包图片
选中图片，点击保存选中图片，可以把图片保存到本地
可以把提取到的图片直接保存到微信的表情包里
可以把本地的图片直接添加到微信的表情包里
3、前期准备
可以先使用多个 AI 搜索相关功能的实现方式，以及在开发中可能遇到的问题
我这里是直接向豆包提问，结合豆包的深度思考了解更多的实现背景信息
提问内容如下：
我想开发一个一键获取表情包的小程序，他有两个功能：
1. 把微信公众号文章的图片下载到本地
2. 把本地的图片一键提取到微信表情包
帮我分析一下以上功能是否可以实现，以及该怎么实现？
通过提问了解到，微信公众号文章图片是网页资源，可通过解析网页获取图片链接并下载。但微信表情包有固定格式要求，未开放直接通过 API 添加表情包的接口。
也就是说目前只能实现把表情包提取到本地的功能。
二）梳理 Trae 能理解的需求文档
1、对上述核心功能进行总结
输入微信公众号链接后，点击提取图片，可以解析公众号文章，并提取文章内的全部图片
可以选择要保存的表情包，以及全选所有表情包图片
点击保存按钮，可以把图片直接保存到本地
总结好之后，直接打开 Trae，进入到 Builder 模式，然后把需求内容告诉它。
2、构建出大致的 UI
这里我是让 AI 自己发挥的。由于功能没有那么复杂，所以也没有设计对应的 UI 样式。
三）开发实操
1、开发小程序
帮我开发一个微信小程序，根据输入的微信公众号链接，可以把微信公众号文章内的所有图片下载到本地。
要求：
1. 不请求后台服务器。
2、解决无法获取到域名问题
重新编译后再次运行，发现报错：不在以下 request 合法域名列表中
mp.weixin.qq.com 不在以下 request 合法域名列表中，请参考文档：developers.weixin.qq.com/miniprogram…: macOS，mp，1.06.2503281； lib: 2.19.4)
刚开始我是不知道怎么解决这个问题的。但这种提问方式，可以比较好的解决问题：
报错+参考文档（微信小程序开发的官方文档）
因为我们是基于微信小程序平台进行开发的，很多规则需要满足其官方要求，这样才能更快的完成开发任务
@ Web https://developers.weixin.qq.com/miniprogram/dev/framework/ability/network.html https://mp.weixin.qq.com 不在以下 request 合法域名列表中，请参考文档： https://developers.weixin.qq.com/miniprogram/dev/framework/ability/network.html
是否可以访问微信公众号文章链接，以及该如何解决
解决办法：（本地）
正式需要登录小程序后台，然后在服务器域名这里修改
我们可以通过报错信息了解到缺失哪些域名，也可以直接向豆包提问“要从公众号文章中获取图片需要访问哪些域名”来作为补充。
微信公众号图片的域名：
https://mp.weixin.qq.com
https://mmbiz.qpic.cn
https://mmbiz.qlogo.cn
https://res.wx.qq.com
https://wx.qlogo.cn
https://thirdwx.qlogo.cn
3、提交到 git 仓库
为了方便代码的版本管理，建议大家每开发完一部分内容，可以先把这部分内容添加到 git 仓库里。这样即使后续的代码破坏了现有的程序，也能很快恢复。
gitee 是我们国内的一个代码管理平台，没有网络限制，而且还可以免费创建公开或私有仓库，非常方便。
下面详细讲解一下 git 仓库从创建到上传代码的全流程，方便大家快速应用。
1）注册账号、登录官网
以上是 gitee 官网的网址，访问该网址，使用手机号或者邮箱就可以注册。
2）新建仓库
在右上角头像附近，点 + 来新建仓库
完整操作步骤如下：
复制仓库地址
3）把代码提交到仓库
然后直接告诉 Trae，让它帮我们把代码提交到对应地址的仓库中。它会自动帮我们对本地进行初始化，并把项目提交到仓库。（第一次可能需要输入用户名、密码进行验证）
帮我把代码提交到gitee上 https://gitee.com/xxx/bqb.git
后面，每次某部分功能开发完成后，直接告诉它让它给把代码提交到仓库中。
当代码不符合预期的时候，就可以直接把当前修改的内容全部回退，然后回到上一个版本。然后再基于上一个版本再重新进行开发。
使用 git 后，还有一个好处是可以直接查看当前修改了什么内容。双击文件就可以查看，红色的是删除的内容，绿色的是新增的内容。也可以直接在这个基础上进行调整，非常方便。
4）在 gitee 上查看代码
查看仓库
查看仓库详细内容
以上就是 gitee 的相关操作，它是一个非常强大的项目版本管理工具，对于个人开发非常实用。如果需要多个人一起开发项目，那它更是不可或缺的一部分了。推荐大家使用起来！！！
四）优化功能
1、备选项添加
程序内部有文字说明（Trae 自动创建的），但还不够易用。为了方便别人快速了解这个小程序。
于是挑选了三篇公众号表情包文章作为备选项添加到小程序中，方便别人下载，也方便第一次使用的人知道该如何操作。（既有操作描述，又有备选案例）
https://mp.weixin.qq.com/s/c7BLG4sNF2nig14CiRLEUg
https://mp.weixin.qq.com/s/02LEBLKjpjrIXZc0lhVQjw
https://mp.weixin.qq.com/s/pyB57cd866DYXwXDcDqx9Q
请帮我把这三个微信公众号链接作为备选项，一点就可以直接添加到输入框。
再帮我添加一个清除按钮，用来清空输入框里的内容。
如果要调整按钮的位置，可以直接说：
请把清除按钮放到提取图片的下面
这样一个简单易用的一键获取表情包小程序就开发好了。
2、空白图问题解决
在实际使用中，发现每次第一张图都是一张空白图。刚开始我以为这个问题很难解决，想着等备案完在处理。结果备案时间太长了。于是直接提问，没想到 Trae 直接就解决了。
提取出来的图片，第一张是一张空白图，请你分析一下是什么原因导致的
3、转发给朋友、转发到朋友圈
刚开始以为小程序转发给朋友或者转发到朋友圈是自带功能，上线后才发现，哎，我的小程序怎么不能转发给别人😂。
【参考文档】请你结合参考文档帮我添加小程序分享给朋友以及分享到朋友圈的代码，如果需要我提供什么信息也可以直接告诉我
五）报错解决
1、文件报错解决
在使用 Trae 开发过程中，经常会遇到的一个问题是当 AI 生成新代码的时候，可能会引起括号不匹配问题。
之前直接告诉他 xx 文件有问题或者 xx 文件的括号配对有问题，解决一下。解决不了，或者需要多轮提问才能解决。现在可以直接把文件拖入到输入框，然后说：
解决一下文件报错
2、正式版本无法下载图片
这个是请教小林哥后才解决的😄。因为之前有看到小林哥有写自己也遇到过微信小程序无法下载图片问题。所以遇到问题后，就直接请教了，效率非常高。
点击头像——> 账号设置——>用户内容声明，更新一下用户隐私保护指引，就可以解决啦。
3、转发朋友圈、转发给朋友功能问题
这个功能刚开始直接提问了四五次，始终都修改不对。后来想到，这个可能需要参考官方手册才行。于是把官方手册内容直接添加到文档中，然后引用文档，再说明自己要添加的功能。就可以实现了。
四、常用解决问题的方法
一）模型切换策略，模型能力决定下限
Gemini-2.5-Pro > Claude-3.7-Sonnet > GPT-4.1 > Claude-3.5- Sonnet > GPT-4o > DeepSeek-Reasoner （R1） > DeepSeek-V3（及 DeepSeek - V3 - 0324）
在使用过程中，大家可以多切换，多感受，慢慢就了解哪个 AI 模型针对什么类型的问题更好用了
二）提问黄金公式
出现的问题+辅助信息
辅助信息如：报错信息 / 代码片段 / 问题截图 / 网站链接 / 官方文档等
三）问题拆解三板斧
1、让 AI 分析报错的代码位置【帮我找到引起 xx 问题的代码位置】
2、先让 DeepSeek 分析问题根源
3、再用 Claude 执行解决方案。
定位问题，才能更好的解决问题。
四）网上搜索
我们遇到的 99% 的问题，在网上基本都有对应的解决方式。之前我们通过百度、谷歌、csdn 等网站进行搜索。现在直接 AI 可以直接根据我们的问题做出针对性的解答，效率超高。
五）问问其他人
在使用 AI 编程中，自己也尝试只用自然语言来进行开发，但实际发现当遇到一些问题时，还是需要懂一些编程，才能更好更快的解决。如果实在不会了，也可以多向他人询问，说不定别人会有更简单的解决方法。
总结：
1、AI 思维，不管遇到什么问题，都可以问 AI，他就像一个小老师，问的越多，了解的也就越全面。
2、在实现某个功能的时候，可以先让 AI 分析一下是否可以实现，以及有哪几种方式实现。了解的越充分，发给 AI 的提示词越准确，他生成的代码效率越高，错误越少。
3、遇到问题后，可以通过切换模型、改变描述方式、提供更多信息（网站、图片）、问题拆解、网上搜索、问问其他人等方式来解决。
现在的 AI 编程工具已经非常强大了，我们只需要简单的描述，他就能直接帮我们实现对应的功能。
但在实际使用过程中，我发现还是需要我们对编程有一些理解，才能更快更好的完成任务。有时候出现问题后，可能就是需要阅读一下代码的实现逻辑，才能解决这个问题。
但大家也不用担心，有什么不懂的，直接问 AI 就可以了，没有人生来就全知全能，兴趣才是最好的老师。未来 AI 编程的进一步发展，也会让编程的下限不断提高，那个时候最重要的可能就是想法了。
先练起来，勇敢的人先享受世界。
最后，祝愿大家在 AI 编程的道路上痛并快乐着🐶！！！
