中国海洋大学计算机学院2026夏季学期《移动软件开发》本科课程实验-实验六：微信小程序云开发

姓名：钟志炜 学号：24020007172

姓名和学号？	钟志炜，24020007172
本实验属于哪门课程？	中国海洋大学26夏《移动软件开发》
实验名称？	实验6：微信小程序云开发
代码仓库地址	https://github.com/eureka137285/mobile_software_projects

一、实验内容

一、实验目的

1. 综合掌握微信小程序云开发完整流程，熟悉云数据库、云存储、云函数三者的联合使用方法。
2. 学会创建云开发项目，完成项目初始化清理、数据集创建与权限配置，掌握页面创建与页面路由配置。
3. 完成小程序多页面视图布局，熟练使用view、image、button、navigator等基础组件，掌握 WXSS 样式编写。
4. 实现微信用户信息获取，通过云函数获取用户openid，理解openid用于区分用户身份的原理。
5. 实现图片上传至云存储，同时在云数据库保存图片元数据；实现图片列表展示、个人主页、图片详情页。
6. 掌握图片下载、分享、全屏预览等功能接口调用，理解云开发数据读取、条件查询、排序查询的使用。

二、实验步骤

1. 初始化云开发项目 新建小程序项目，选择小程序‑云开发模式；清理项目默认模板代码，删除多余云函数、页面、资源文件。打开云开发控制台，新建photos数据集，权限设置为所有用户可读，仅创建者及管理员可写。在app.json中配置index、homepage、detail、add四个页面路径，自动生成对应页面文件目录。修改window配置自定义导航栏标题、背景色、文字颜色。
2. 页面视图设计 分别完成首页、个人主页、图片展示页、上传图片页的 WXML 结构编写，使用 view 搭建容器、卡片布局；image 组件展示头像与图片；button 实现功能按钮；app.wxss 编写公共容器、卡片样式，各页面 wxss 编写页面私有样式。首页设计卡片列表与固定定位的上传浮动按钮；个人主页设计顶部用户信息区与图片卡片列表；图片详情页设计图片展示区域以及下载、分享、全屏预览按钮；上传页设计上传按钮与图片历史记录九宫格。
3. 云函数编写与用户信息获取 新建getOpenid云函数，调用cloud.getWXContext()获取用户 openid，上传部署云函数。首页上传按钮配置open‑type="getUserInfo"获取用户头像昵称等基础信息，存入小程序全局变量；调用云函数拿到 openid 保存到全局数据；给按钮绑定跳转事件，点击后跳转上传图片页面。
4. 上传图片页面逻辑开发 引入云数据库集合对象，编写日期格式化函数；绑定上传按钮点击事件，调用wx.chooseImage选择本地图片；使用wx.cloud.uploadFile将图片上传云存储；上传成功后向photos集合新增记录，保存图片 fileID、用户信息、上传日期；编写条件查询函数，根据当前用户 openid 查询自己上传的图片记录，wx:for循环渲染图片历史记录；页面加载完成、图片上传完成都刷新历史记录。
5. 首页列表与页面跳转逻辑 首页 onShow 生命周期内调用云数据库，按照上传日期降序读取全部图片数据，循环渲染卡片列表。给头像添加导航跳转，携带目标用户 openid 参数跳转到个人主页；图片卡片主体绑定跳转，携带图片_id跳转到图片详情页。
6. 个人主页逻辑开发 接收路由传递过来的用户 openid，条件查询该用户全部上传图片，按日期降序展示；利用返回数据渲染页面顶部的头像昵称；图片同样支持跳转至详情页面。
7. 图片详情页功能实现 接收路由图片 id，读取单条图片记录渲染图片；实现下载图片功能：云存储下载文件，保存到手机相册；配置分享按钮，自定义分享消息；调用wx.previewImage实现全屏图片预览；增加喜欢与收藏功能，实时显示点赞数与收藏数。
8. 整体联调测试 依次测试：用户信息获取、图片上传、数据库与云存储生成记录；首页列表渲染；头像跳转个人主页；图片跳转详情；下载、分享、全屏预览功能；个人主页仅展示对应用户图片。

三、实验结果

1. 项目初始化完成，云开发环境正常，photos数据集权限配置正确，4 个页面完整生成，导航栏样式显示正常。

   

2. 点击首页上传按钮，可以成功获取微信用户昵称、头像等基础信息，调用云函数成功拿到用户 openid 并保存全局变量，正常跳转上传图片页面。

   

3. 在上传图片页面，能够从相册选择图片上传；上传成功后云存储出现图片文件，云数据库photos集合生成对应记录，包含图片地址、用户信息、上传日期；页面九宫格正确展示当前用户上传图片历史记录。

   

4. 首页按时间倒序展示全部用户分享图片卡片，卡片正确渲染头像、昵称、地区、上传日期；点击头像跳转对应个人主页；点击图片跳转图片详情页面。

5. 个人主页正确展示该用户头像昵称，展示该用户上传的全部图片以及喜欢、收藏记录。

   

6. 图片详情页可以加载目标图片；下载按钮可以把图片保存本地相册；分享按钮支持把图片分享微信好友；全屏预览按钮可以唤起系统图片预览；新增喜欢和收藏功能可以实时看到喜欢数和收藏数。

   

7. 各个页面跳转、数据刷新正常，返回首页会重新加载最新图片列表。

二、问题总结与体会

一、问题总结

1. 无法获取用户信息 问题：直接打开上传页面，全局userInfo、openid为空，上传图片时报错。 原因：用户信息与 openid 必须点击首页上传按钮授权获取，直接进入上传页面没有执行授权逻辑。 解决：必须从首页按钮跳转进入上传页面，完成授权流程；增加非空判断可以优化健壮性。
2. 云数据库读取不到数据 问题：数据集创建完成，但是页面查询返回空数据。 原因：数据集权限设置错误，不允许普通用户读取；或者查询字段、_openid拼写错误。 解决：把 photos 权限设置为所有用户可读，仅创建者及管理员可写，核对代码中集合名称、字段名。
3. 图片上传后页面不刷新 问题：图片上传成功，数据库已经新增记录，但是上传页历史记录不更新。 原因：上传成功回调没有调用getHistoryPhotos()刷新数据。 解决：在 upload 函数 complete 回调中调用获取历史记录函数，更新页面 data。
4. 个人主页打开报错 问题：当用户没有上传任何图片，访问个人主页页面报错。 原因：代码直接读取photoList[0]获取顶部头像昵称，数组为空时报错。 解决：实际项目需要增加数组长度判断，数组为空时渲染空白提示。
5. 云函数调用失败 问题：调用 getOpenid 云函数拿不到 openid。 原因：云函数修改后没有执行 “上传并部署：云端安装依赖”。 解决：修改云函数代码后右键执行云端部署，等待部署完成后测试。

二、体会

本次实验完整实现图片分享社区小程序，把云数据库、云存储、云函数三个云开发核心能力结合起来。我理解了云开发不需要自建后端服务器，小程序直接调用云端接口完成业务开发的优势。

在开发过程中，认识到openid是识别微信小程序用户的关键标识，数据库通过_openid字段区分不同上传者，实现个人主页、个人上传记录等业务。同时体会小程序页面生命周期的作用，使用onShow可以保证每次回到首页都会重新拉取云端最新数据。

调试过程中很多问题来源于权限配置、云函数部署、数据为空边界情况。这提醒我写代码不能只考虑理想运行场景，要考虑用户没有数据、授权失败等异常情况，增加容错判断。

通过本次实验，熟悉小程序组件、路由传参、云开发增查操作，为后续复杂小程序项目打下基础。