本次完成中国海洋大学《移动软件开发》的云开发实验使用微信云数据库、云存储和云函数搭建一个图片分享社区并在基础要求上增加 AI 照片点评与作品删除。下面按照开发过程记录页面实现和遇到的问题。一、实验内容1. 实验目标本次实验学习微信小程序云开发在前面页面布局和交互的基础上使用云数据库、云存储和云函数完成一个图片分享小程序。我将项目命名为“海边相册”希望它既能满足上传、浏览和下载图片的实验要求也能像一个简单的摄影社区一样使用。应用采用浅绿色背景、白色卡片和深绿色按钮。首页浏览大家发布的照片点击作者进入个人主页点击图片查看详情上传页面负责选图、填写信息和查看上传历史。在基础功能之外我还加入了 AI 照片点评、模型选择和删除作品功能。2. 云开发环境与页面组织本次使用微信开发者工具开发原生小程序。WXML 负责页面结构WXSS 负责样式JavaScript 处理交互与云端请求。项目将页面、数据服务和云函数分开避免每个页面都重复编写上传和查询逻辑。云存储保存图片文件云数据库保存标题、昵称、作者和上传时间云函数负责取得微信身份、提供图片访问地址以及执行 AI 请求和删除操作。图片文件与作品记录相互关联页面读取记录后再显示对应图片。初始化时指定当前项目的云环境wx.cloud.init({ env: config.envId, traceUser: false })数据库使用 lab06_photos 集合与同一环境中的其他项目区分。集合允许社区读取作品修改权限限定给创建者。云存储保持私有由云函数核对作品及图片路径后返回临时访问地址。列表按上传时间排序个人主页再增加作者条件因此分别建立了对应的查询索引。3. 社区首页与个人主页首页用卡片展示照片、标题、地点和作者昵称按上传时间倒序排列支持下拉刷新和继续加载。点击图片打开详情点击作者信息进入对应的个人相册。个人主页沿用首页的卡片风格只展示该账号发布的作品。这里需要区分“昵称”和“账号”。昵称是展示文字可以修改也可能与别人重复作品归属使用微信提供的 OPENID。查询个人主页时使用作者的身份标识作为条件而不是按照昵称搜索。同一个账号之前可能用不同昵称发布过照片因此展示时统一采用该账号最近一张未删除作品的昵称。这样首页、详情和个人主页不会看起来像几个不同的人。删除最新作品后展示名会取下一张仍保留作品的昵称。社区首页按时间浏览照片个人主页查看同一账号的作品4. 选择图片与发布作品上传页面调用微信原生选图能力用户可以从相册选择图片也可以拍照。选图后填写昵称和标题地点可以留空。页面先检查必填信息再将图片上传到云存储拿到文件标识后写入数据库。只有作品记录得到确认页面才提示发布成功。图片路径按作者和作品组织便于后续查询和删除。下面是上传文件的核心调用const { fileID } await wx.cloud.uploadFile({ cloudPath: lab06/photos/ openid / id . ext, filePath: file.tempFilePath })上传过程还需要考虑网络中断请求报错不一定表示数据库没有写入。如果直接让用户重新发布可能出现重复作品。因此程序会保留待确认记录写入响应异常时按原来的作品编号查询确认避免重复创建。上传页面同时提供历史记录方便回看自己已经发布的内容。调用微信原生界面选择照片上传历史与已发布作品5. 图片详情、预览与分享详情页面展示大图和作品信息并提供下载、全屏预览和分享入口。全屏预览使用微信原生图片浏览界面下载时先取得图片文件再调用保存到相册的接口。如果用户尚未允许相册访问页面会提示前往设置。分享卡片携带当前作品的详情路径打开后可以直接查看这张照片不必从首页重新寻找。相关页面跳转与分享配置如下onShareAppMessage() { const p this.data.photo return p ? { title: p.title, path: /pages/detail/detail?id encodeURIComponent(p._id) } : { title: 海边相册, path: /pages/index/index } }照片的全屏预览微信分享卡片预览6. AI 照片点评与模型选择为了让图片社区更有互动性我在自己的照片详情中增加了 AI 点评入口。用户填写自己的 DeepSeek API Key选择支持图片的模型后可以按“摄影建议”“温暖短评”或“社交配文”生成不同用途的文字。返回内容作为草稿展示由用户判断是否采用不会自动发布为公开评论。模型选择不能只显示名称还需要说明是否支持图片。设置页将视觉模型和文本模型区分开来如果选择了文本模型程序会提示更换模型避免把照片请求发给不支持图片的接口。当前模型清单以项目配置为准后续新增模型时需要同步更新。Key 使用密码输入框填写只保存在本次运行的内存中不写入应用的本地存储、数据库或源码。生成前会提示照片和标题将经云函数发送给 DeepSeek并使用用户自己的账户额度。重新启动小程序后需要重新填写 Key。交互上取消了固定等待间隔。一次请求结束后可以立即再次点击只有上一条还在生成时才阻止重复提交。无论成功、失败还是取消都会释放忙碌状态避免按钮一直无法使用。7. 删除自己发布的作品自己的照片详情底部提供“删除这张作品”按钮点击后先确认再由云函数核对作者身份。删除过程先让作品从列表中移除再清理对应云图片。如果文件清理没有完成上传页会提供重试入口不把部分完成直接提示为全部成功。AI 设置填写 Key 并选择模型自己的作品可生成点评也可删除二、问题总结与体会1. 云文件可以上传不代表其他用户就能看见刚开始容易把“上传成功”和“社区可访问”当成一回事。实际上数据库记录与云存储文件各有权限。我的处理方式是保留云存储的私有权限通过云函数确认作品有效后提供临时地址而不是直接把整个存储空间改成公开。这个过程让我理解了页面展示、数据记录和文件访问之间的关系。2. 用户昵称不能作为作品归属依据调试个人主页时同一账号用不同昵称发布的照片会一起出现看起来像混入了其他人的内容。检查后发现账号归属没有因为修改昵称而变化问题在于历史昵称的展示不一致。调整为按微信身份查询、按当前规则统一显示昵称后页面更容易理解。同名的不同账号也不会因此合并。3. 防止重复提交也要考虑操作体验AI 点评最初设置了固定等待间隔导致上一条请求已经结束用户仍然不能再次生成。这个限制影响体验因此改为只判断是否存在未结束的请求。同时区分 Key 被拒绝、余额不足和模型不支持图片等情况让错误提示更接近实际原因而不是统一显示“请稍后再试”。4. 删除功能需要考虑中途失败删除一条数据库记录并不等于图片文件也被删除。如果网络或云服务中断页面和存储可能出现不同状态。因此我为删除保留了清理状态和重试入口也在云端检查作品归属。这样既能避免误删他人的照片也能让失败后的处理有明确入口。5. 实验体会本次实验把前面学过的页面、事件、表单和页面跳转连接到了真实云端。相比只在本地改变显示内容云开发还需要考虑身份、权限、网络异常和操作结果是否确认。我也体会到功能是否完整不能只看“按钮能不能点”还要看出错后能否恢复、用户能否理解当前状态。后续可以在保持页面简洁的基础上增加作品分类和搜索让照片较多时也容易找到。对我来说这次实验最大的收获是开始从完整使用流程考虑一个小程序而不只是分别完成几个页面。项目源码GitHub海边相册图片分享社区