上篇写到《用AI写了个微信小程序，春节期间玩疯了！》,主要介绍了我的 “花猫作图神器” 微信小程序(文末有小程序码可以体验)，有不少小伙伴想了解如何通过AI完成这样一个微信小程序，这篇就来给给大家介绍一下，让大家一起来愉快玩耍AI编程！
Start Up
Step1：安装初始开发环境
1. 微信小程序的开发环境初始化
微信小程序的开发文档已经非常简单直接了，这里我不过多赘述。---> 【微信小程序官方入门文档】
核心就是注册小程序账号（拿到AppId）、安装小程序IDE，初始化一个小程序工程
（参考下图就行）
2. 安装Cursor
访问Cursor官网：www.cursor.com/ 下载Cursor的IDE，顺便注册个账号
注意：Cursor是有50次免费试用额度限制的，注册账号之后，在官网个人信息中的ACCOUNT SETTINGS中可以查看免费额度使用的情况（不过也有无限白嫖Cursor的法子，有兴趣的可以自己搜搜或者下次我发一个教程😁）
安装好Cursor IDE之后，用它打开前面初始化好的微信小程序的工程目录。
Step2：用Cursor进行AI编程的基础介绍
1. 直接给Cursor提需求开始写代码
用Cursor IDE打开微信小程序的代码工程后，可以看到如下的编辑界面
如果没有右侧COMPOSER界面，就点击右上角的UI操作按钮
COMPOSER 就是主要用来让AI来帮你写代码的操作界面，左右两边的CHAT和BUG FINDER顾名思义就是用来和AI聊天以及查问题用的，暂时用不上。
提示词示例：（方便懒人直接复制，大家可以自行改改，随意发挥😄）
这是一个微信小程序的代码工程，我要制作一款AI生成图片的微信小程序，先帮我设计并开发小程序的主界面。主界面包含元素：上方是一个正方形的图片展示组件，图片组件下方是文本输入框，用来输入文生图的prompt内容，页面底部是一个“确定”按钮，点击后先模拟请求loading效果，loading完成后给上方图片组件执行一个卡片翻转的效果。页面内元素保持在一个屏幕范围可见，不要上下滑动。UI设计要求：请你参考apple和google等大厂的设计规范，设计神秘酷炫的交互界面，增加丰富的交互动效，要让用户感觉到惊喜和愉悦。
在COMPOSER输入框点击回车或者点击这个submit，就可以看到AI开始屁颠屁颠地帮你写代码了！
看到如上界面，表示AI帮你写完了这部分需求的代码了，接下来操作，先点左边箭头的 Save All，表示临时保存AI写的代码（先别点蓝色按钮的Accept All），然后去微信小程序原生IDE查看AI写的代码在微信小程序模拟器上运行的效果。
可以看到左侧模拟器界面上已经有了我们需要的图片展示组件、文本输入组件和底部的生成图片的按钮了（UI虽然还有一些瑕疵，可以后续继续让他优化！调试界面看到有红字，意思是需要在工程中添加一张placeholder.png的图片资源，这个Cursor暂时没法帮你自动生成，得自己手动添加一下），并且点击按钮也有符合预期的loading效果和图片卡片翻转动画了，第一次看到这样的效果，我是已经很欣喜了。
按提示把placeholder.png图片放一张到assets的文件夹中，就可以得到如下效果啦！
如果不满意本次代码生成，可以点击Reject All放弃本次生成的代码；如果觉得这次AI生成的代码还算满意，再点击那个蓝色按钮Accept All来确定应用本次执行（注意，Cursor暂时没有直接回退的功能，可以自行用git来管理代码仓库）
接下来可以继续在COMPOSER输入框写你的需求，让AI继续优化UI交互和增加功能了。 Cursor还有一些其他功能，大家可以自行研究看看（比如Agent模式）。
2. 让Cursor更加适合当你的AI编程助手：Rules for AI
这里再插一个小tip，就是给Cursor配置全局的Rules for AI(相当于给Cursor的AI设置一个全局的规则)
贴出来大家拿去参考参考吧，通用版本，写别的代码也可以用这个
# Role
你是一名极其优秀具有20年经验的产品经理和精通所有编程语言的工程师。与你交流的用户是不懂代码的初中生，不善于表达产品和代码需求。你的工作对用户来说非常重要，完成后将获得10000美元奖励。
# Goal
你的目标是帮助用户以他容易理解的方式完成他所需要的产品设计和开发工作，你始终非常主动完成所有工作，而不是让用户多次推动你。
在理解用户的产品需求、编写代码、解决代码问题时，你始终遵循以下原则：
## 第一步
- 当用户向你提出任何需求时，你首先应该浏览根目录下的readme.md文件和所有代码文档，理解这个项目的目标、架构、实现方式等。如果还没有readme文件，你应该创建，这个文件将作为用户使用你提供的所有功能的说明书，以及你对项目内容的规划。因此你需要在readme.md文件中清晰描述所有功能的用途、使用方法、参数说明、返回值说明等，确保用户可以轻松理解和使用这些功能。
## 第二步
你需要理解用户正在给你提供的是什么任务
### 当用户直接为你提供需求时，你应当：
- 首先，你应当充分理解用户需求，并且可以站在用户的角度思考，如果我是用户，我需要什么？
- 其次，你应该作为产品经理理解用户需求是否存在缺漏，你应当和用户探讨和补全需求，直到用户满意为止；
- 最后，你应当使用最简单的解决方案来满足用户需求，而不是使用复杂或者高级的解决方案; 代码要适当增加注释，让用户容易看懂代码逻辑。
### 当用户请求你编写代码时，你应当：
- 首先，你会思考用户需求是什么，目前你有的代码库内容，并进行一步步的思考与规划
- 接着，在完成规划后，你应当选择合适的编程语言和框架来实现用户需求，你应该选择solid原则来设计代码结构，并且使用设计模式解决常见问题；
- 再次，编写代码时你总是完善撰写所有代码模块的注释，并且在代码中增加必要的监控手段让你清晰知晓错误发生在哪里；
- 最后，你应当使用简单可控的解决方案来满足用户需求，而不是使用复杂的解决方案。
### 当用户请求你解决代码问题是，你应当：
- 首先，你需要完整阅读所在代码文件库，并且理解所有代码的功能和逻辑；
- 其次，你应当思考导致用户所发送代码错误的原因，并提出解决问题的思路；
- 最后，你应当预设你的解决方案可能不准确，因此你需要和用户进行多次交互，并且每次交互后，你应当总结上一次交互的结果，并根据这些结果调整你的解决方案，直到用户满意为止。
## 第三步
在完成用户要求的任务后，你应该对改成任务完成的步骤进行反思，思考项目可能存在的问题和改进方式，并更新在readme.md文件中
Step3：用扣子Coze.cn搭建一个文生图的API接口
1. 注册Coze.cn平台账号（这里需要注册的是火山引擎账号）
访问 www.coze.cn 扣子平台操作，具体步骤这里不赘述，平台的入门十分友好。注意：这里需要注册扣子专业版的账号，不然无法使用api的能力（不知道后面有没有改过这逻辑）。
2. 搭建一个文生图的工作流
注册好之后，在后台界面找到个人资源库界面，如下
新建一个工作流
进入工作流编辑界面，点“添加节点”，选择“图像生成”节点
把“开始”节点和“图像生成”节点以及“结束”节点连接起来
点击“图像生成”节点，选择模型，配置节点入参参数和大模型提示词。
这里还是给伸手党贴一下提示词吧（注意{{input}}要手动重新输入一下）。
# 角色
你是一位专业的表情包图片制作大师，擅长精准剖析用户输入内容，深度理解用户需求，并创作出符合用户期望的高质量表情包图片。
## 技能
### 技能 1: 制作表情包图片
1. 仔细分析用户输入的内容{{input}}，提炼关键元素和风格需求。
2. 通过专业的图像生成工具和自身精湛技艺，生成一张符合用户期望的表情包图片。
3. 以直观易懂的方式向用户展示生成的表情包图片（若支持图片展示）。
## 限制:
- 仅围绕表情包图片制作相关内容进行交流，拒绝回答与表情包图片制作无关的话题。
- 所输出的内容应逻辑清晰、简洁明了。
- 生成的表情包图片需紧密贴合用户输入的需求。
还有“结束”节点也要配置好大模型最终输出的内容字段
好了！这下基础的工作流搭建好了，可以点击编辑页面下方的试运行来看看效果啦！
运行结果
这样，一个文生图的工作流就完成了，可以点击右上角“发布”了。
3. 获取工作流的API接口
参考扣子官方文档：www.coze.cn/open/docs/d… 拿到 Access_Token（注意：要勾选workflow的run权限）和workflow_id （接口访问的必备参数） 不用太仔细看文档里面的其他内容，因为下面要让AI直接帮你看文档写API调用逻辑了嘿嘿。
在Cursor中输入一段需求，让AI帮你根据文档来写接口逻辑（ @ 选择add link）
@Codebase 下面是文生图调用工作流的api接口文档：参考扣子官方文档： @www.coze.cn/open/docs/d… ，Access_Token是xxxx（自己改一下），workflow_id是xxxxx（自己改一下），请帮我参考以上信息，完成这个微信小程序的AI文生图的接口请求逻辑。
这样AI就会帮你把接口调用逻辑写完，不过肯定会先遇到一个提示
先去微信小程序后台配置API域名白名单（路径：管理->开发管理->开发设置->服务器域名->request合法域名，添加 api.coze.cn )
这样就完成了一个AI生成表情包的微信小程序的基础版本啦，大家可以自己继续优化界面和功能，如果遇到bug报错了，直接复制报错信息丢给AI让它帮你解决，非常方便的！
AI很好用，但是也要花时间和耐心去一步步尝试和调教它，驯服它以后，就可以为所欲为啦！
先这样，水了这么一篇帖子，希望有小伙伴能用上，，，有问题可以留言我哈！
下面这个是过年前制作的“花猫作图神器”的微信小程序，大家可以扫码体验一下哈！
