最近在做一个在线教育类小程序项目时，遇到了一个典型需求：学员在学习视频课程后，需要有一个地方来展示自己的学习成果和创作的作品。市面上通用的教育小程序往往侧重于课程播放和购买，缺少一个轻量、美观且能激励学员的作品集模块。为此，我设计并实现了一套基于微信小程序的在线视频教育系统作品集展示模块，今天将完整的实现思路、核心代码以及部署避坑指南分享给大家。

无论你是想为自己的教育类小程序增加粘性功能，还是学习微信小程序的全栈开发流程，这篇文章都能提供从0到1的实战参考。我们将覆盖小程序前端页面开发、云开发数据库设计、云存储使用以及前后端交互的全过程，并提供完整的、可运行的源码示例。

1. 项目背景与核心概念

1.1 什么是教育小程序的“作品集展示”？

在在线视频教育场景中，学员完成一个课程或项目后，通常会产出一些成果，例如：编程作业、设计图、短视频剪辑、绘画作品、文章笔记等。传统的做法是学员私下保存，缺乏成就感和社区互动。

作品集展示模块就是为了解决这个问题而生。它允许学员：

1. 上传成果：将学习成果（图片、视频、文档链接等）发布到平台。
2. 分类管理：按课程、技能标签对作品进行分类。
3. 社区互动：其他学员和老师可以浏览、点赞、评论，形成正向激励。
4. 个人名片：优秀的作品集可以作为学员的技能证明，增强学习动力和就业竞争力。

1.2 技术栈选型：为什么选择微信小程序 + 云开发？

对于这样一个轻量级、重交互、需要快速迭代的项目，我选择了微信小程序结合微信云开发的方案，理由如下：

• 开发效率高：云开发提供了现成的数据库、存储、云函数能力，无需自建后端服务器，极大降低了运维和部署成本。
• 生态闭环：用户授权、支付、内容安全等都可以在微信生态内无缝完成，体验流畅。
• 成本可控：云开发有免费额度，适合项目初期验证。
• 前后端一体：开发者可以使用熟悉的JavaScript语言同时编写前端逻辑和后端云函数，上下文统一。

本项目的核心架构如下：

• 前端：微信小程序原生框架 (WXML, WXSS, JS)
• 后端服务：微信云开发 (CloudBase)
  • 云数据库：存储用户信息、作品数据、评论点赞记录。
  • 云存储：存储用户上传的图片、视频等文件。
  • 云函数：处理复杂业务逻辑，如内容安全校验、消息推送、数据聚合。
• 管理端：可额外开发一个简单的云函数后台或使用云开发控制台进行内容审核。

2. 环境准备与项目初始化

2.1 开发环境与账号准备

1. 注册微信小程序账号：访问微信公众平台，注册一个小程序账号，获取唯一的AppID。
2. 安装开发者工具：下载并安装最新版本的 微信开发者工具 。
3. 开通云开发：
   • 在开发者工具中创建新项目，填入你的AppID，并选择“不使用云服务”（我们先创建项目再开通）。
   • 项目创建后，在开发者工具顶部菜单栏找到“云开发”按钮，点击开通。开通后会得到一个环境ID（如env-xxx）。

2.2 初始化项目结构

使用微信开发者工具创建一个新的小程序项目，项目结构初始化如下：

miniprogram-education-portfolio/ ├── cloudfunctions/ # 云函数目录 │ ├── addPortfolio/ # 发布作品云函数 │ ├── getPortfolioList/ # 获取作品列表云函数 │ └── ... # 其他云函数 ├── miniprogram/ # 小程序前端代码 │ ├── pages/ │ │ ├── index/ # 首页（作品流） │ │ ├── portfolioDetail/# 作品详情页 │ │ ├── publish/ # 发布作品页 │ │ └── my/ # 个人中心页 │ ├── components/ # 自定义组件（如作品卡片） │ ├── images/ # 静态图片资源 │ ├── app.js # 小程序入口文件 │ ├── app.json # 全局配置 │ ├── app.wxss # 全局样式 │ └── project.config.json # 项目配置 └── project.private.config.json # 私有配置（包含环境ID）

2.3 初始化云开发环境

在app.js的onLaunch生命周期中，初始化云开发环境。

// miniprogram/app.js App({ onLaunch: function () { // 初始化云开发环境 if (!wx.cloud) { console.error('请使用 2.2.3 或以上的基础库以使用云能力'); } else { wx.cloud.init({ // 此处替换为你的云开发环境ID env: 'your-env-id', traceUser: true, // 记录用户访问 }); } // 其他初始化逻辑... }, globalData: { userInfo: null, openid: null } });

3. 数据库设计与核心业务拆解

3.1 云数据库集合设计

我们主要需要以下几个核心数据集合（Collection）：

1. portfolios(作品集表)

   • 作用：存储所有作品的核心信息。
   • 字段设计：

     { _id: “作品唯一ID，自动生成”, _openid: “发布者的openid，系统自动添加”, title: “作品标题，String”, description: “作品描述，String”, // 作品类型：image(图片)、video(视频)、link(链接)、text(图文) type: “String”, // 资源地址，type为image/video时，存储云存储fileID mediaUrl: “String”, // 封面图，用于列表展示 coverUrl: “String”, // 关联的课程ID courseId: “String”, // 技能标签数组 tags: [“前端”, “UI设计”], // 点赞用户openid数组 likes: [“openid1”, “openid2”], likeCount: 0, // 点赞数，用于排序和展示 commentCount: 0, // 评论数 viewCount: 0, // 浏览数 // 发布者信息（冗余存储，避免频繁联表查询） publisherInfo: { avatarUrl: “String”, nickName: “String” }, createTime: “Date”, // 创建时间 updateTime: “Date” // 更新时间 }

2. comments(评论表)

   • 作用：存储作品下的评论。
   • 字段设计：_id,portfolioId(作品ID),_openid,content,avatarUrl,nickName,createTime。

3. users(用户信息表)

   • 作用：存储用户的扩展信息（云开发自带openid，此表用于存储头像、昵称等，可与微信用户信息同步）。
   • 注意：用户首次授权后，将其信息写入此表。

3.2 核心业务流程拆解

1. 作品发布流程：
   • 前端：用户填写表单，选择文件上传至云存储，获取fileID。
   • 云函数：接收数据，进行内容安全校验（调用微信安全接口），将数据写入portfolios集合。
   • 触发更新：更新相关课程的统计信息（可选）。
2. 作品列表浏览流程：
   • 前端：分页查询portfolios集合，按createTime或likeCount排序。
   • 优化：使用数据库索引、云函数聚合查询来提升性能。
3. 点赞/评论互动流程：
   • 点赞：使用数据库的原子操作db.command.inc和db.command.push/pull来更新likeCount和likes数组，保证并发安全。
   • 评论：在comments集合中新增记录，并原子更新portfolios中的commentCount。

4. 完整实战：实现作品发布功能

这是整个系统的核心功能，我们分步骤实现。

4.1 前端页面：发布页 (publish)

首先，创建发布页面的文件：pages/publish/publish.js,publish.wxml,publish.wxss,publish.json。

1. 页面布局 (publish.wxml):

<!-- pages/publish/publish.wxml --> <view class="publish-container"> <form bindsubmit="formSubmit"> <view class="form-item"> <text class="label">作品标题</text> <input name="title" placeholder="请输入作品标题" maxlength="20" /> </view> <view class="form-item"> <text class="label">作品描述</text> <textarea name="description" placeholder="详细描述你的作品..." maxlength="200" auto-height /> </view> <view class="form-item"> <text class="label">作品类型</text> <picker name="type" range="{{typeRange}}" value="{{typeIndex}}" bindchange="typeChange"> <view class="picker">{{typeRange[typeIndex]}}</view> </picker> </view> <view class="form-item" wx:if="{{showMediaUpload}}"> <text class="label">上传作品</text> <view class="upload-area" bindtap="chooseMedia"> <image wx:if="{{tempMediaUrl}}" src="{{tempMediaUrl}}" mode="aspectFit"></image> <text wx:else>点击上传图片或视频</text> </view> <text class="tip">支持jpg, png, mp4格式，大小不超过10MB</text> </view> <view class="form-item"> <text class="label">技能标签</text> <view class="tags"> <block wx:for="{{tagList}}" wx:key="index"> <text class="tag {{selectedTags.indexOf(item) >= 0 ? 'active' : ''}}" >// pages/publish/publish.js Page({ data: { typeRange: ['图片', '视频', '图文', '链接'], typeIndex: 0, showMediaUpload: true, // 默认图片类型需要上传 tempMediaUrl: '', // 临时预览地址 tempFileID: '', // 上传后得到的云存储fileID tagList: ['前端', '后端', 'UI设计', '产品', '运营', '数据分析', '编程', '摄影'], selectedTags: [], uploading: false }, onLoad() { // 可以预加载用户信息、课程列表等 }, // 切换作品类型 typeChange(e) { const index = e.detail.value; this.setData({ typeIndex: index, showMediaUpload: index < 2, // 0:图片，1:视频需要上传，2/3不需要 tempMediaUrl: '', tempFileID: '' }); }, // 选择媒体文件 chooseMedia() { const { typeIndex } = this.data; const sourceType = ['album', 'camera']; const maxSize = 10 * 1024 * 1024; // 10MB wx.chooseMedia({ count: 1, mediaType: typeIndex === 0 ? ['image'] : ['video'], sourceType, maxDuration: 30, // 视频最大30秒 success: (res) => { const tempFilePath = res.tempFiles[0].tempFilePath; const size = res.tempFiles[0].size; if (size > maxSize) { wx.showToast({ title: '文件大小超过限制', icon: 'none' }); return; } this.setData({ tempMediaUrl: tempFilePath }); this.uploadFileToCloud(tempFilePath); } }); }, // 上传文件到云存储 uploadFileToCloud(filePath) { wx.showLoading({ title: '上传中...' }); // 生成云存储路径，按日期分类 const cloudPath = `portfolios/${Date.now()}-${Math.floor(Math.random() * 1000)}${filePath.match(/\.[^.]+?$/)[0]}`; wx.cloud.uploadFile({ cloudPath, filePath, success: res => { console.log('上传成功', res.fileID); this.setData({ tempFileID: res.fileID }); wx.hideLoading(); }, fail: err => { console.error('上传失败', err); wx.hideLoading(); wx.showToast({ title: '上传失败', icon: 'none' }); } }); }, // 切换标签选择 toggleTag(e) { const tag = e.currentTarget.dataset.tag; let selectedTags = this.data.selectedTags; const index = selectedTags.indexOf(tag); if (index >= 0) { selectedTags.splice(index, 1); } else { if (selectedTags.length >= 3) { wx.showToast({ title: '最多选择3个标签', icon: 'none' }); return; } selectedTags.push(tag); } this.setData({ selectedTags }); }, // 表单提交 async formSubmit(e) { const formData = e.detail.value; const { title, description } = formData; const { typeIndex, tempFileID, selectedTags } = this.data; // 1. 基础校验 if (!title.trim()) { wx.showToast({ title: '请输入标题', icon: 'none' }); return; } if ((typeIndex === 0 || typeIndex === 1) && !tempFileID) { wx.showToast({ title: '请上传作品文件', icon: 'none' }); return; } if (selectedTags.length === 0) { wx.showToast({ title: '请至少选择一个标签', icon: 'none' }); return; } this.setData({ uploading: true }); // 2. 获取用户信息 const userInfo = await this.getUserInfo(); if (!userInfo) { this.setData({ uploading: false }); return; } // 3. 构造提交数据 const submitData = { title: title.trim(), description: (description || '').trim(), type: ['image', 'video', 'text', 'link'][typeIndex], // 映射为英文 mediaUrl: tempFileID || '', coverUrl: tempFileID, // 简单处理，图片/视频用原文件，其他类型可设默认图 tags: selectedTags, publisherInfo: { avatarUrl: userInfo.avatarUrl, nickName: userInfo.nickName }, createTime: new Date(), updateTime: new Date() }; // 4. 调用云函数提交 wx.cloud.callFunction({ name: 'addPortfolio', data: submitData, success: (res) => { console.log('发布成功', res); wx.showToast({ title: '发布成功！' }); setTimeout(() => { wx.navigateBack(); // 返回上一页 }, 1500); }, fail: (err) => { console.error('发布失败', err); wx.showToast({ title: '发布失败，请重试', icon: 'none' }); }, complete: () => { this.setData({ uploading: false }); } }); }, // 获取用户信息（简化版，实际需处理授权逻辑） getUserInfo() { return new Promise((resolve) => { const app = getApp(); if (app.globalData.userInfo) { resolve(app.globalData.userInfo); } else { wx.getUserProfile({ desc: '用于发布作品时显示', success: (res) => { const userInfo = res.userInfo; app.globalData.userInfo = userInfo; resolve(userInfo); }, fail: () => { wx.showToast({ title: '需要授权才能发布', icon: 'none' }); resolve(null); } }); } }); } });

4.2 后端服务：发布作品云函数 (addPortfolio)

云函数负责更复杂的业务逻辑，如内容安全校验、数据库写入。

1. 创建云函数：在开发者工具中，右键点击cloudfunctions文件夹，选择“新建Node.js云函数”，命名为addPortfolio。

2. 编写云函数逻辑 (index.js):

// cloudfunctions/addPortfolio/index.js const cloud = require('wx-server-sdk'); cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV }); const db = cloud.database(); const _ = db.command; // 内容安全检测（异步，可选） async function checkContentSecurity(content) { try { const result = await cloud.openapi.security.msgSecCheck({ content: content }); return result.errCode === 0; // 0表示内容正常 } catch (err) { console.error('内容安全检测失败', err); // 根据业务需求决定检测失败时的策略：严格模式可拒绝，宽松模式可放行 return false; // 此处示例为严格模式，检测失败则拒绝 } } exports.main = async (event, context) => { const wxContext = cloud.getWXContext(); const { title, description, type, mediaUrl, coverUrl, tags, publisherInfo } = event; // 1. 参数基础校验 if (!title || title.length > 20) { return { code: 400, msg: '标题不能为空且不超过20字' }; } if (description && description.length > 200) { return { code: 400, msg: '描述不超过200字' }; } if (!tags || tags.length === 0 || tags.length > 3) { return { code: 400, msg: '请选择1-3个标签' }; } // 2. 内容安全校验（对标题和描述） const titleValid = await checkContentSecurity(title); const descValid = description ? await checkContentSecurity(description) : true; if (!titleValid || !descValid) { return { code: 403, msg: '内容包含违规信息，请修改后重试' }; } // 3. 构建数据库记录 const portfolioRecord = { _openid: wxContext.OPENID, // 云数据库自动添加，此处也可显式写入 title, description: description || '', type, mediaUrl, coverUrl: coverUrl || 'cloud://default-cover-id', // 默认封面图 tags, likes: [], likeCount: 0, commentCount: 0, viewCount: 0, publisherInfo: { avatarUrl: publisherInfo.avatarUrl, nickName: publisherInfo.nickName }, createTime: new Date(), updateTime: new Date() }; try { // 4. 写入数据库 const result = await db.collection('portfolios').add({ data: portfolioRecord }); console.log('作品发布成功，ID:', result._id); return { code: 200, msg: '发布成功', data: { portfolioId: result._id } }; } catch (err) { console.error('数据库写入失败', err); return { code: 500, msg: '服务器异常，发布失败' }; } };

3. 配置云函数权限：云函数需要调用openapi.security.msgSecCheck接口，需要在云开发控制台-设置-全局设置中，开启“内容安全”权限。

4. 上传并部署云函数：在开发者工具中，右键点击addPortfolio云函数目录，选择“上传并部署：云端安装依赖”。

4.3 运行与验证

1. 在微信开发者工具中，切换到“发布页”页面。
2. 填写表单，选择一张图片上传。
3. 点击发布，观察控制台网络请求和云函数日志。
4. 发布成功后，可以在云开发控制台的“数据库”和“存储”中查看新增的数据和文件。

5. 核心功能扩展：作品列表与详情页

5.1 首页作品流列表

首页 (pages/index/index) 需要展示最新的或最热门的作品。

核心查询逻辑 (index.js):

// pages/index/index.js - 获取作品列表 Page({ data: { portfolioList: [], page: 0, pageSize: 10, hasMore: true, loading: false }, onLoad() { this.loadPortfolios(); }, // 下拉刷新 onPullDownRefresh() { this.setData({ portfolioList: [], page: 0, hasMore: true }); this.loadPortfolios().finally(() => wx.stopPullDownRefresh()); }, // 上拉加载更多 onReachBottom() { if (!this.data.hasMore || this.data.loading) return; this.loadPortfolios(); }, // 加载作品列表 async loadPortfolios() { if (this.data.loading) return; this.setData({ loading: true }); const { page, pageSize } = this.data; try { const res = await wx.cloud.callFunction({ name: 'getPortfolioList', data: { page, pageSize, orderBy: 'createTime', // 可按'likeCount'切换为热门排序 order: 'desc' } }); const { data, total } = res.result; const newList = this.data.portfolioList.concat(data); this.setData({ portfolioList: newList, page: page + 1, hasMore: newList.length < total, loading: false }); } catch (err) { console.error('加载失败', err); this.setData({ loading: false }); wx.showToast({ title: '加载失败', icon: 'none' }); } } });

云函数 getPortfolioList (优化查询):

// cloudfunctions/getPortfolioList/index.js const cloud = require('wx-server-sdk'); cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV }); const db = cloud.database(); const _ = db.command; const $ = db.command.aggregate; exports.main = async (event, context) => { const { page = 0, pageSize = 10, orderBy = 'createTime', order = 'desc' } = event; const skip = page * pageSize; // 使用聚合操作，一次查询完成数据获取和总数统计 const aggregation = db.collection('portfolios').aggregate(); // 1. 排序 aggregation.sort({ [orderBy]: order === 'desc' ? -1 : 1 }); // 2. 分页 aggregation.skip(skip).limit(pageSize); // 3. 查询总数（使用facet在聚合中同时获取列表和总数，更高效） const result = await aggregation .facet({ list: $.push('$$ROOT'), total: $.group({ _id: null, count: $.sum(1) }) }) .end(); const list = result.list[0] ? result.list[0].list : []; const total = result.list[0] && result.list[0].total[0] ? result.list[0].total[0].count : 0; // 4. 处理图片/视频的临时链接（可选，也可在前端用wx.cloud.getTempFileURL获取） // 这里演示在云函数中批量获取临时链接，减轻前端压力 const processedList = await Promise.all(list.map(async item => { if (item.coverUrl && item.coverUrl.startsWith('cloud://')) { try { const { fileList } = await cloud.getTempFileURL({ fileList: [item.coverUrl] }); item.coverUrl = fileList[0].tempFileURL; } catch (err) { console.error('获取临时链接失败', err); } } return item; })); return { data: processedList, total }; };

5.2 作品详情页与互动功能

详情页 (pages/portfolioDetail/portfolioDetail) 需要展示作品完整信息、评论列表，并处理点赞、评论操作。

点赞功能的核心安全实现：点赞需要防止用户重复点赞，并保证计数准确。必须在云函数中使用数据库的原子操作。

// cloudfunctions/toggleLike/index.js const cloud = require('wx-server-sdk'); cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV }); const db = cloud.database(); const _ = db.command; exports.main = async (event, context) => { const wxContext = cloud.getWXContext(); const { portfolioId } = event; const openid = wxContext.OPENID; if (!portfolioId) { return { code: 400, msg: '参数错误' }; } try { // 1. 先查询当前用户是否已点赞 const portfolio = await db.collection('portfolios').doc(portfolioId).get(); if (!portfolio.data) { return { code: 404, msg: '作品不存在' }; } const likes = portfolio.data.likes || []; const isLiked = likes.includes(openid); // 2. 使用原子操作更新点赞数组和计数 const updateData = {}; if (isLiked) { // 取消点赞：从数组中移除用户openid，计数-1 updateData.likes = _.pull(openid); updateData.likeCount = _.inc(-1); } else { // 添加点赞：向数组添加用户openid，计数+1 updateData.likes = _.push(openid); updateData.likeCount = _.inc(1); } const result = await db.collection('portfolios').doc(portfolioId).update({ data: updateData }); return { code: 200, msg: isLiked ? '已取消点赞' : '点赞成功', data: { liked: !isLiked, newLikeCount: (portfolio.data.likeCount || 0) + (isLiked ? -1 : 1) } }; } catch (err) { console.error('点赞操作失败', err); return { code: 500, msg: '操作失败，请重试' }; } };

前端调用示例：

// pages/portfolioDetail/portfolioDetail.js async onLikeTap() { const { portfolioId, isLiked } = this.data; wx.showLoading({ title: '处理中...' }); try { const res = await wx.cloud.callFunction({ name: 'toggleLike', data: { portfolioId } }); if (res.result.code === 200) { this.setData({ isLiked: res.result.data.liked, likeCount: res.result.data.newLikeCount }); } else { wx.showToast({ title: res.result.msg, icon: 'none' }); } } catch (err) { wx.showToast({ title: '网络错误', icon: 'none' }); } finally { wx.hideLoading(); } }

6. 常见问题与排查思路 (FAQ)

在开发过程中，你可能会遇到以下典型问题：

7. 最佳实践与工程建议

将项目从“跑起来”提升到“好用、稳定、易维护”的级别，需要注意以下工程化细节：

7.1 数据库设计与优化

• 索引是性能的关键：务必为常用的查询字段创建索引。例如，在portfolios集合中，为createTime(降序)、likeCount(降序)、courseId、tags建立复合索引，能极大提升列表查询和筛选速度。可以在云开发控制台-数据库-集合-索引管理中添加。
• 避免过度冗余：publisherInfo是合理的冗余，避免了每次查作品都要联表查用户信息。但要注意用户更新头像昵称时，需要同步更新所有相关作品（可通过云函数触发器实现）。
• 读写分离思想：像likeCount、commentCount这种频繁更新的计数器，应与主体信息放在同一个文档内，利用原子操作保证一致性。对于复杂的聚合查询（如每周热门），可考虑使用定时云函数将结果计算好存入单独的统计集合。

7.2 云函数与性能

• 单一职责：每个云函数应只做一件事。不要写一个庞大的main函数处理所有业务。将发布、查询、点赞、评论拆分为独立的云函数。
• 冷启动优化：云函数有冷启动时间。对于核心接口（如获取列表），可以：
  1. 适当增加函数内存配置（在cloudfunctions/函数名/config.json中设置）。
  2. 使用定时触发器定期预热（每分钟调用一次空函数）。
  3. 将不常变化的配置、SDK初始化放在函数外部。
• 错误处理与日志：云函数内必须使用try-catch包裹核心逻辑，并使用console.log或cloud.logger记录关键信息、错误堆栈和输入参数，便于在云开发控制台-日志中排查问题。

7.3 前端体验与优化

• 图片/视频优化：
  • 上传前，使用wx.compressImage对图片进行压缩。
  • 列表页使用懒加载(image组件的lazy-load属性) 和低质量预览（先显示模糊图，加载完成后再显示原图）。
  • 视频封面图至关重要，上传视频时可提取第一帧作为封面。
• 列表页性能：
  • 使用wx:for渲染列表时，务必指定唯一的wx:key。
  • 对于超长列表，考虑使用虚拟列表（如官方recycle-view组件）来减少DOM节点数量。
  • 分页加载时，添加loading和no-more状态提示，提升用户体验。
• 缓存策略：
  • 用户信息、配置信息等不常变化的数据，可存储在wx.setStorageSync中，减少网络请求。
  • 作品详情页内容可适当缓存，但要注意点赞、评论状态需实时更新。

7.4 安全与合规

• 内容安全：用户生成的任何内容（文本、图片、视频）都必须经过安全检测。除了使用微信的security.msgSecCheck接口，对于图片和视频，还应调用相应的imgSecCheck和mediaCheckAsync接口。
• 数据库权限：切勿长期使用“所有用户可读，所有用户可写”这种宽松规则。上线前，必须根据业务编写详细的安全规则。例如：

  // portfolios 集合安全规则示例 { "read": "true", // 所有人可读 "write": "auth != null && doc._openid == auth.openid" // 仅创建者可写 }

• 敏感信息保护：云函数中不要硬编码密钥。敏感配置（如第三方API密钥）应放在云开发-环境-环境变量中，通过process.env读取。
• 防止刷接口：对点赞、评论等高频写操作，可在云函数中加入简单的频率限制逻辑，例如检查同一openid在短时间内对同一作品的重复操作。

7.5 可维护性

• 配置集中管理：将页面路径、云函数名、集合名、错误码等常量统一放在一个配置文件（如miniprogram/config.js）中。
• 组件化开发：将作品卡片(portfolio-card)、评论组件(comment-item)、标签选择器(tag-selector)等复用性高的UI部分抽离成自定义组件。
• 统一的请求封装：封装一个统一的request函数或使用wx.cloud.callFunction的封装，统一处理加载状态、错误提示、登录态校验等。

至此，一个具备核心功能的在线视频教育系统作品集展示小程序就搭建完成了。从环境准备、数据库设计、前后端功能实现，到性能优化与安全实践，我们走完了完整的开发闭环。这套方案不仅适用于教育场景，稍作修改（如替换分类和标签）也能用于设计社区、编程学习、摄影分享等多种作品展示类应用。

源码获取：本文涉及的所有前端页面、云函数代码均已整理成项目模板。你可以直接在此基础上进行二次开发，快速构建属于自己的作品集小程序。