1. 搭建云开发工程结构与环境配置#

在微信开发者工具中创建云开发模板工程，project.config.json 中通过两个字段划分前后端边界：miniprogramRoot: "miniprogram/" 指向小程序端代码，cloudfunctionRoot: "cloudfunctions/" 指向云函数代码。在开发者工具中开通云开发环境（环境 ID cloud1-d6gkat5lc7d387014），并创建三个集合：photos（照片）、users（用户资料）、favorites（收藏）。

app.json 注册全部七个页面并配置全局窗口样式，导航栏标题为「图享社区」：

1
{
2
  "pages": [
3
    "pages/index/index",
4
    "pages/homepage/homepage",
5
    "pages/favorites/favorites",
6
    "pages/login/login",
7
    "pages/register/register",
8
    "pages/detail/detail",
9
    "pages/add/add"
10
  ],
11
  "window": {
12
    "navigationBarBackgroundColor": "#FFFFFF",
13
    "navigationBarTitleText": "图享社区"
14
  },
15
  "lazyCodeLoading": "requiredComponents"
16
}

app.js 在 onLaunch 中完成云能力初始化，环境 ID 集中放在 globalData 里，同时维护三个全局登录态字段：openid（微信/设备级身份）、accountId（当前登录账号 = users 集合记录的 _id）、userInfo（当前账号的资料）。ensureLogin 先通过云函数拿 openid，再顺带把云端「我的资料」拉下来缓存：

1
onLaunch() {
2
  wx.cloud.init({
3
    env: this.globalData.env,
4
    traceUser: true,
5
  });
6
  this.ensureLogin();
7
}

全局样式 app.wxss 以 CSS 变量定义设计 tokens（主色 --ha-primary: #45a7c8、强调色、圆角、阴影等），并提供 .ha-card 通用白卡片样式，各页面统一引用，保证视觉风格一致。

2. 云函数与数据访问层 utils/api.js#

openid 是用户在小程序里的唯一身份标识，前端拿不到，只能在云函数里通过 cloud.getWXContext() 获取——这是本项目中唯一必须走服务端的能力。云函数 quickstartFunctions 按 event.type 分发：

1
const getOpenId = async () => {
2
  const wxContext = cloud.getWXContext();
3
  return { openid: wxContext.OPENID, appid: wxContext.APPID, unionid: wxContext.UNIONID };
4
};
5

6
exports.main = async (event) => {
7
  switch (event.type) {
8
    case "getOpenId":
9
      return await getOpenId();
10
    default:
11
      return { errMsg: "unknown type: " + event.type };
12
  }
13
};

前端所有数据库 / 存储操作集中在 utils/api.js，全部走 wx.cloud.*，不依赖任何自建后端，共封装二十余个方法：照片的增删查（listPhotos / listMyPhotos / getPhoto / addPhoto / deletePhoto）、收藏的增删查（isFavorited / addFavorite / removeFavorite / listMyFavorites）、用户资料的读写（getMyProfile / saveMyProfile / getProfileById）、存储上传下载（uploadPhoto / uploadAvatar / resolveTempUrls）以及登录注册（loginByPhone / registerByPhone）。

云存储上传用 wx.cloud.uploadFile，cloudPath 按目录 + 时间戳 + 随机数生成，避免同名覆盖：

1
function uploadFile(filePath, folder) {
2
  const ext = (filePath.split(".").pop() || "jpg").toLowerCase();
3
  const cloudPath = `${folder}/${Date.now()}_${Math.floor(Math.random() * 1e6)}.${ext}`;
4
  return wx.cloud.uploadFile({ cloudPath, filePath }).then((res) => res.fileID);
5
}

fileID 转临时链接：数据库里存的是 cloud:// 开头的 fileID（永久有效但 previewImage / saveImageToPhotosAlbum 等 API 不通用），展示和下载前需要通过 wx.cloud.getTempFileURL 批量换成 https 临时链接。resolveTempUrls 同时处理照片（photoUrl → tempUrl）和头像（avatarUrl → avatarTempUrl）两类字段，列表页只需在渲染前调用一次。

3. 登录与注册：双通道身份体系#

登录页提供两种方式。微信授权登录使用基础库的 button open-type="chooseAvatar" + input type="nickname" 组件拉起微信头像昵称资料，用户确认后将头像上传到云存储 avatars/ 目录，并通过 saveMyProfile 把资料写入 users 集合（该集合权限为「所有人可读」，因此别人才能看你主页）。手机号密码登录在 users 集合中按 phone + password 查询匹配记录（实验环境明文存储，生产环境应改为 SHA-256 或 bcrypt），校验通过后将该记录的 _id 记入 globalData.accountId。

注册页 register.js 做完整的表单校验（手机号 /^1\d{10}$/、密码至少 6 位、两次密码一致），registerByPhone 先查询该手机号是否已注册，不存在则向 users 集合新增一条记录并返回其 _id：

1
registerByPhone({ phone, password, nickName }).then((user) => {
2
  // 注册成功 = 已写入 users 集合，accountId 必须指向新账号的记录
3
  app.globalData.accountId = user._id;
4
  app.globalData.userInfo = { nickName: user.nickName || "", loginMethod: "phone" };
5
});

这里的关键设计是区分 openid 与 accountId 两级身份：openid 是微信/设备级的，同一台设备换手机号登录 openid 不变；而「我的照片」「我的收藏」要按登录账号隔离，就必须用 accountId（users 记录 _id），否则换账号后旧账号的照片还会出现。

4. 社区首页与 photo-card 自定义组件#

首页 index.js 在每次 onShow 时刷新数据：先 ensureLogin，再调用 listPhotos 按 createdAt（毫秒时间戳）倒序取前 50 条照片，resolveTempUrls 批量转换临时链接后渲染。支持下拉刷新（onPullDownRefresh），空列表时显示引导文案。

照片卡片封装为自定义组件 photo-card，通过 properties 接收数据、triggerEvent 向外冒泡事件：

1
Component({
2
  options: {
3
    multipleSlots: true,
4
    // 允许 app.wxss 里的 .ha-card 全局卡片样式作用到组件内部
5
    styleIsolation: "apply-shared",
6
  },
7
  properties: {
8
    photo: { type: Object, value: {} },
9
    showUploader: { type: Boolean, value: true },
10
  },
11
  methods: {
12
    onTapImage() { this.triggerEvent("tapimage", { id: this.data.photo._id }); },
13
    onTapAvatar() {
14
      this.triggerEvent("tapavatar", {
15
        openid: this.data.photo._openid,
16
        ownerId: this.data.photo.ownerId,
17
      });
18
    },
19
  },
20
});

组件结构分三层：页眉（头像 + 昵称 + 所在地）、主体（widthFix 模式的照片，点击进详情）、页脚（上传日期）。styleIsolation: "apply-shared" 让全局卡片样式能穿透进组件，省去重复定义。

首页底部是浮动按钮组：左侧「我的」按钮显示当前登录用户的头像和昵称，点击进个人中心；右侧「+ 上传」按钮跳转上传页。点击卡片头像时，页面向 homepage 传递 ownerId 参数（旧数据没有该字段时退回按 openid 区分），点自己则进个人中心、点别人进 TA 的主页。

5. 上传页：多图上传与历史记录#

上传页 add.js 顶部显示登录状态条（未登录则提供「去登录」入口），中间是大号上传热区，底部是「已上传图片历史记录」宫格。点击上传热区触发 wx.chooseImage 选择最多 9 张图，随后对每张图并行执行「上传云存储 → 写数据库记录」两步：

1
uploadPhoto(filePath)
2
  .then((fileID) => addPhoto({
3
    photoUrl: fileID,
4
    ownerId: app.globalData.accountId,
5
    avatarUrl: u.avatarUrl || "",      // 存 cloud:// fileID，临时链接会过期
6
    nickName: u.nickName || "匿名",
7
    addDate: formatDate(new Date()),
8
    createdAt: Date.now(),             // 毫秒时间戳，用于排序
9
  }))

多张上传用 Promise.allSettled 汇总结果，期间通过 wx.showLoading 实时显示进度（「上传中 2/3」），完成后按成功/失败数量分别提示并刷新历史宫格。addPhoto 写库时云开发会自动向记录写入 _openid 字段，配合集合「仅创建者可写」的权限规则，天然实现了「只有上传者本人能修改/删除自己的照片」。历史宫格中的图片点击调用 wx.previewImage 全屏预览。

6. 详情页：下载、收藏、分享与权限删除#

详情页从路由参数取照片 _id，getPhoto 单条查询后展示大图、上传者信息和日期，导航栏标题动态设为「昵称的照片」。操作按钮组包含五项：

• 下载到本地：wx.cloud.downloadFile 按 fileID 拉取云存储原图，再 wx.saveImageToPhotosAlbum 存入相册；用户拒绝授权时弹出引导弹窗。
• 收藏 / 取消收藏：写 favorites 集合（权限「仅创建者可读写」，记录结构 { ownerId, photoId, addDate, createdAt }），按钮随 isFav 状态在「☆ 收藏」和「★ 已收藏」间切换，并加了 favToggling 锁防止连点重复提交。
• 分享给好友：button open-type="share" 触发，onShareAppMessage 返回自定义标题、直达路径（/pages/detail/detail?id=xxx）和封面图。
• 全屏预览：wx.previewImage。
• 删除照片：仅当 photo.ownerId === globalData.accountId（即本人）时渲染此按钮。点击后二次确认，先删数据库记录、再删云存储文件避免留下孤儿文件：

1
deletePhoto(id) {
2
  const tasks = [db().collection(COLLECTION).doc(id).remove()];
3
  if (fileID) {
4
    tasks.push(wx.cloud.deleteFile({ fileList: [fileID] })
5
      .catch((err) => console.warn("云存储文件删除失败（记录已删）", err)));
6
  }
7
  return Promise.all(tasks);
8
}

客户端 remove 受集合权限约束——「仅创建者可读写」规则下删除 _openid 不是自己的记录会直接报 permission denied，数据库权限本身就是「上传者才能删」的兜底保证，前端隐藏按钮只是交互层的体验优化。

7. 个人中心、他人主页与收藏管理#

homepage 页面用一份代码支持两种模式：不带参数进入是「我的个人中心」（蓝色渐变头图 + 头像昵称卡片 + 照片数 / 登录方式统计 + 我的收藏 / 编辑资料 / 退出登录三个操作按钮 + 我的照片宫格）；带 ?ownerId= 或 ?openid= 参数进入则是「TA 的主页」，隐藏所有管理操作，只展示对方资料和照片。查别人资料时优先用 getProfileById（精确到账号，同一设备多账号也能区分），旧数据才退回 getProfileByOpenid。

资料编辑弹窗复用微信头像昵称组件，保存时若本地头像是临时路径则先上传云存储，再 saveMyProfile 更新 users 集合并调用 app.refreshProfile() 刷新全局缓存。退出登录只清空 globalData 中的登录态，云端资料保留，下次登录继续使用。

收藏页 favorites.js 展示当前账号收藏的照片。由于云数据库没有 join，采用两段查询：先按 ownerId 倒序取收藏记录记住顺序，再用 _.in(ids) 批量取照片详情、以字典映射还原顺序；已被作者删除的照片在映射时取不到，用 .filter(Boolean) 自动跳过。每条收藏提供二次确认后的取消收藏操作。

8. 编译运行#

在微信开发者工具中填入环境 ID、部署云函数、创建三个集合并配置好权限后编译运行。启动后首页正确显示「图享社区」欢迎条和照片卡片流，卡片页眉展示上传者头像、昵称与所在地，页脚显示上传日期；右上角浮动按钮组显示我的头像与「+ 上传」入口。进入个人中心，头部统计显示「3 张我的照片、微信登录」，下方宫格列出我上传的全部照片；点击他人头像进入「TA 的主页」，只展示对方资料和 TA 的 1 张照片，没有任何管理按钮，多用户隔离生效。