【移动软件开发】微信小程序云开发

一、实验内容

实验目标

实验过程

1、实验准备

(1) 创建云模板项目

首先创建一个云开发项目，填入AppID，选中小程序云开发，删除以下模版代码：
（1）删除 cloudFunctions 文件夹下的默认云函数 login 的全部内容；
（2）打开 app.json，只保留 pages/index/index；
（3）删除 pages 文件夹下的除了 index 以外的所有目录；
（4）删除 index 文件夹中的多余图片，清空 index.js、index.wxml、index.wxss 中的全部代码，在 index.js 中输入 page，让编辑器自动生成 Page({}) 函数；
（5）打开 app.wxss，删除所有样式代码，保留空文件即可；
（6）删除 images 文件夹中的所有图片文件，保留空文件夹。

(2) 部署云数据库

（1）打开云开发控制台，创建一个新的数据集photos； （2）检查数据集权限，确认是“所有用户可读，仅创建者及管理员可写”

(3) 创建页面文件

在app.json文件内添加以下代码，保存即可自动创建页面目录：

{
 "pages": [
   "pages/index/index",
   "pages/homepage/homepage",
   "pages/detail/detail",
   "pages/add/add"
]
}

(4) 初始化云开发

在 app.js 中写入以下代码，初始化云开发环境：

// app.js
App({
 onLaunch() {
   wx.cloud.init({
     env: 'your-env-id',  // 替换为实际云环境ID
     traceUser: true
  })
}
})

2、首页（index）开发

(1) 页面设计

首页采用上下结构：顶部是“标题和用户头像入口”，中部是“图片卡片列表”，右下角是“浮动上传按钮”

(2) 数据加载

从云数据库 photos 集合中按照时间倒序获取所有图片数据

// pages/index/index.js
loadPhotoList() {
 wx.showLoading({ title: '加载中…' })
 
 const db = wx.cloud.database()
 const photos = db.collection('photos')
 
 photos.orderBy('timestamp', 'desc').get({
   success: (res) => {
     const list = res.data.map(item => ({
       id: item._id,
       avatar: item.avatarUrl || '/images/08.jpg',
       nickName: item.nickName || '用户',
       address: item.province || '未知',
       image: item.photoUrl,
       date: item.addDate || ''
    }))
     this.setData({ cardList: list })
     wx.setStorageSync('cardList', list)
  }
})
}

(3) 交互功能

（1）点击顶部头像跳转个人主页
（2）点击卡片头像或昵称跳转该作者的个人主页
（3）点击卡片图片跳转图片详情页
（4）点击浮动按钮跳转上传页面

// 跳转到上传页面（携带用户信息）
goToAddPage() {
 const userInfo = wx.getStorageSync('userInfo') || {}
 const openid = wx.getStorageSync('openid') || ''
 
 if (!userInfo.nickName) {
   wx.showModal({
     title: '提示',
     content: '请先完善个人信息',
     success: (res) => {
       if (res.confirm) wx.navigateTo({ url: '/pages/homepage/homepage' })
    }
  })
   return
}
 wx.navigateTo({ url: '/pages/add/add' })
}

3. 用户登录与个人主页（homepage）开发

(1) 登录弹窗设计和登录逻辑

首次进入个人主页时弹出登录弹窗，收集用户信息。用户确认登录后生成唯一ID，保存到本地存储和云数据库。

confirmLogin() {
 const { tempNickName, tempLocation, tempGender, tempAvatar } = this.data
 
 // 验证必填项
 if (!tempNickName?.trim()) {
   wx.showToast({ title: '请输入昵称', icon: 'none' })
   return
}
 
 const openid = 'user_' + Date.now() + '_' + Math.random().toString(36).slice(2, 6)
 
 const userInfo = {
   avatar: tempAvatar || '/images/08.jpg',
   nickName: tempNickName.trim(),
   location: tempLocation.trim(),
   gender: tempGender,
   openid: openid
}
 wx.setStorageSync('userInfo', userInfo)
 wx.setStorageSync('isLogin', true)
 wx.setStorageSync('openid', openid)
 
 // 保存到云数据库
 const db = wx.cloud.database()
 db.collection('users').add({ data: { …userInfo, timestamp: Date.now() } })
 
 this.onLoginSuccess(userInfo, openid)
}

(2) 加载用户作品

根据当前用户的 openid 从 photos 集合中筛选该用户的作品

loadUserPhotos() {
 const openid = wx.getStorageSync('openid') || ''
 
 const db = wx.cloud.database()
 db.collection('photos').where({ openid: openid })
  .orderBy('timestamp', 'desc')
  .get({
     success: (res) => {
       const list = res.data.map(item => ({
         id: item._id,
         image: item.photoUrl,
         date: item.addDate
      }))
       this.setData({ userPhotos: list, uploadCount: list.length })
       this.splitWaterfall(list)
    }
  })
}

4. 上传图片（add）开发

(1) 声明云数据库引用

// pages/add/add.js
const db = wx.cloud.database()
const photosCollection = db.collection('photos')

(2) 图片处理

选择图片，生成唯一图片名称，然后发布图片到云存储和云数据库

// 生成图片唯一名称
generateImageName() {
 const timestamp = Date.now()
 const random = Math.floor(Math.random() * 1000000)
 return `${timestamp}_${random}`
}

5. 图片详情（detail）开发

(1) 页面设计

主要分为图片展示区和底部操作栏两大模块。在 onLoad 生命周期中接收上一页面传递的图片 id 参数，通过云数据库 photos 集合查询该图片的完整信息，包括图片地址、作品标题、拍摄地点、作品描述、上传时间、作者昵称和头像等字段，并将数据渲染到页面中；

(2) 核心功能

（1）保存到本地 通过 wx.cloud.downloadFile 下载云存储图片，再调用 wx.saveImageToPhotosAlbum 保存到用户相册；
（2）全屏预览 调用 wx.previewImage 接口实现图片全屏浏览，同时支持多图左右滑动切换； （3）分享给朋友 在按钮上添加 open-type="share" 属性，手机测试时可以长按图片转发给朋友。

6、预览效果

(1) 首页页面

图片分享社区，展示不同户用登录后上传的图片，图片卡片上呈现用户信息和上传时间。如果用户未登录，则只能浏览首页社区，无法上传图片；用户可以点击右上角登录。

(2) 用户登录和个人主页页面

在首页右上角点击登录，输入个人信息，包括头像、昵称、所在地、性别，点击完成注册即可进入个人主页，上传作品之后可以在个人主页“我的作品”部分看到图片。

(3) 上传图片页面

登录后在首页右下角点击上传图片，进入页面，点击上传图片的加号按钮即可上传，从本地添加图片，输入作品名称，拍摄地点和作品描述后，点击上传，回到首页可以在社区看到上传的作品。

(4) 图片展示页面

这个页面主要有三个功能：保存、分享和预览。 用户点击上传后的图片，进入此页面。点击保存交互，可以保存图片到本地；长按图片可以分享给朋友；点击全屏可以预览图片全局。

保存图片到本地：

二、问题总结与体会

遇到的问题和解决

体会和收获

本次实验完成了一个完整的图片分享社区小程序，实现了五个核心功能：

通过本次实验，我掌握了微信小程序云开发的完整流程，包括云数据库操作、云存储文件上传、页面路由跳转、用户数据持久化等核心技术。