前言

很久没有更新博文了，最近因为开发并上线了一个工具类小程序——小杨图像压缩和分辨率修改助手，为了记录开发过程，因此写下这篇博客。

一、开发动机

1. 自己有相应的图片压缩和分辨率修改需求，虽然经过一番搜索也能找到相应工具，但感觉还是比较麻烦，因此想做一个专门的图像助手工具小程序
2. 想通过开发小程序增加一些收入养家糊口
3. 因为我在小程序开发方面并没有多少经验（此前仅了解过一些基本的小程序知识并做过一个体验版未上线的demo)，这次主要想借助AI编程实现开发

二、前期准备

1. 注册微信小程序账号
   • 登录微信公众平台，完成个人或企业认证，获取唯一的小程序ID。
   • 如小程序有后端，还需在“开发设置”中配置服务器域名（需支持HTTPS），用于线上环境的API请求、文件上传等操作。
2. 安装必要工具
   • 微信开发者工具：用于项目创建、调试和预览（下载地址）。
   • Cursor IDE：通过官网下载安装，支持AI代码生成与协作（官网链接）。
   • 云开发环境（可选）：若需数据库或存储功能，可在微信开发者工具中开通云开发服务（首月免费）。

三、项目初始化

1. 创建小程序项目
   • 在微信开发者工具中新建项目，填写项目名称、目录和AppID（可暂用测试号）。
   • 模板选择：根据需求选择“基础模板”或“云开发模板”（如商城模板可快速生成UI框架），这里我选择的是基础模板。
2. 配置Cursor项目
   • 用Cursor打开微信开发者工具创建的项目目录，确保代码同步更新。
   • 若需结合uniapp开发，可通过命令行初始化Vue3项目（如npx degit dcloudio/uni-preset-vue#vite my-vue3-project），再通过Cursor编辑代码。

四、需求编写与代码生成

1. 明确功能需求

   • 在项目根目录创建README.md或design.md，详细描述功能模块。例如图像助手小程序的初步需求如下：

     # 小程序需求文档
     1. 核心功能：用户选择本地图片后自动对图片压缩并展示压缩前后的预览图及图片大小信息，支持调节压缩比例和图片保存。
     2. 界面要求：简约风格，包含图片选择框、图片压缩前后展示区、图片压缩比例调节按钮、图片保存按钮。
     3. 技术要求：纯前端实现，无需存储用户文件。
     

2. 使用Cursor生成代码
   在Cursor右侧聊天窗口中选择Agent代理模式，然后选择使用的AI大模型（选能够使用的最强模型，例如claud-3.7-sonet)，最后输入需求提示词，例如：

   你是一个微信小程序开发工程师，根据README.md描述的需求修改项目代码。
   

   随后，大模型就会分析需求，给出修改代码，点击“✔️”就能将AI给出的代码应用到源文件中（如果不点，等待几秒后Cursor也会自动应用），如下图所示。
   

3. AI交互优化代码

   • 若代码报错，将错误信息粘贴至Cursor，AI会分析并提供修复建议（如缺少组件引用、API未配置等），如下图所示。
   • 通过多次迭代优化功能，例如添加分辨率修改功能、调整UI布局等。
     

五、调试与优化

1. 本地预览与测试
   • 在微信开发者工具中编译并预览效果，支持模拟器和手机扫码调试。
   • 使用真机测试时，注意检查网络请求、图片加载等兼容性问题。
2. 性能优化
   • 界面优化：通过Cursor的AI设计建议调整配色、布局（如参考苹果设计风格）。

六、发布与上线

1. 代码打包与上传
   • 通过微信开发者工具上传代码至小程序后台，填写版本号和更新说明。
   • 若使用uniapp，需运行npm run build:mp-weixin生成编译包，再在开发者工具中导入。
   • 上传后代码默认成为开发版本。
2. 审核、备案与发布
   开发版本经过审核后成为审核版本，再进行发布后成为线上版本。
   • 提交审核前检查功能合规性（如有些功能需企业资质）。
   • 发布上线前还要去工业和信息化部官网进行小程序的ICP备案。
   • 审核通过后，设置线上版本并发布，用户可通过小程序码扫码使用。
   • 如需通过小程序搜索找到发布的小程序，还要花钱进行微信认证。

注意事项

1. 审核风险：涉及AI生成内容（如文生图）需符合微信政策，个人开发者可能受限。

2. 权限问题：注意小程序如果有涉及到读取/保存图片等需要获取用户手机某些权限的功能时，不仅要在代码中相应的实现部分调用微信的wx.authorize等权限API，还要在小程序提交审核时，在“用户隐私保护指引设置“中勾选”采集用户隐私“并更新用户隐私保护指引，否则发布上线后可能会出现读取/保存失败的现象。

3. 技术选型：零代码开发适合简单功能，复杂项目建议结合手动调整代码。

通过以上流程，即使是非专业开发者也能借助Cursor快速实现小程序开发。

最近又利用AI开发了另一个小程序“小杨的睡眠解压白噪音助手”，可以播放帮助睡眠和解压的各种自然音效及白噪音，也欢迎体验。