在线视频教育系统与作品集展示是当前微信小程序开发中两个常见且实用的场景前者聚焦于知识传递与学习管理后者则用于个人或机构的能力展示。将两者结合可以构建一个既能承载课程内容又能展示教学成果的综合性平台。对于开发者而言理解如何从零开始搭建这样一个系统掌握其核心模块的设计与实现是提升微信小程序开发能力的关键路径。本文将以一个“基于微信小程序的在线视频教育系统”为蓝本重点讲解如何在其基础上集成一个“作品集展示”模块。我们将从项目环境搭建、核心功能设计、前后端交互实现到上线前的优化与测试进行完整的梳理。无论你是希望学习微信小程序开发的新手还是想了解如何构建内容型应用的开发者都能通过本文获得一套可复现的实践方案。最终你将得到一个具备视频播放、课程管理、用户交互以及作品展示功能的微信小程序原型。1. 理解微信小程序在线教育系统的核心架构在动手编码之前必须厘清一个在线视频教育小程序需要哪些基本组成部分。这不仅仅是功能列表更是理解数据如何流动、模块如何协作的基础。1.1 核心功能模块拆解一个典型的在线教育小程序至少包含以下四个核心模块用户系统这是所有交互的起点。包括微信授权登录、用户信息管理如昵称、头像、学习进度记录。微信生态提供了便捷的登录能力wx.login,getUserProfile但需要后端配合换取openid和session_key来建立用户唯一标识。内容管理系统CMS用于管理视频课程、图文资料等学习内容。在小程序端这通常表现为课程列表页、课程详情页和视频播放器。后端需要提供课程分类、列表、详情等接口。视频播放直接使用微信小程序的video组件但视频源地址URL需要从后端动态获取。学习交互系统让学习过程可记录、可追踪。包括视频播放进度记录、收藏课程、发表评论或笔记、完成课后练习等。这些交互数据需要与用户ID强关联并持久化到数据库。作品集展示模块这是本文的重点扩展模块。它不同于普通的课程列表更侧重于成果的视觉化、结构化展示。例如学员可以将自己的结业项目、设计作品、代码仓库链接等以图文、视频或链接的形式发布出来形成一个个人作品画廊。1.2 前后端数据流设计小程序采用前后端分离架构。前端小程序负责界面渲染和用户交互后端服务器提供数据接口和业务逻辑处理。前端小程序职责使用 WXML/WXSS/JavaScript 构建页面。调用微信 JS-SDK API如网络请求wx.request、本地存储wx.setStorage。向后端发起 HTTP/HTTPS 请求获取或提交数据。处理用户交互事件点击、滑动等。后端服务器职责提供 RESTful API 接口。处理用户认证与授权验证微信登录凭证。从数据库如 MySQL、MongoDB中存取课程、用户、作品集等数据。处理文件上传如图片、视频封面返回可访问的 URL。实现业务逻辑如更新学习进度、计算作品集浏览量等。数据交互的核心是 API 设计。例如获取作品集列表的接口可能设计为GET /api/portfolio/list提交一个新作品的接口为POST /api/portfolio/create。1.3 技术选型与开发工具准备对于前端微信开发者工具是必备的。对于后端选择非常灵活可以是 Node.js (Express/Koa)、Python (Django/Flask)、Java (Spring Boot)、Go (Gin) 等。为了快速原型开发我们以 Node.js Express 和 MySQL 为例。开发环境清单工具/环境用途备注微信开发者工具小程序代码编写、调试、预览、上传需注册微信小程序账号获取 AppIDNode.js (LTS版本)运行 JavaScript 后端服务器建议版本 16.x 或 18.xMySQL 5.7/8.0关系型数据库存储结构化数据也可使用云数据库服务Postman / ApifoxAPI 接口测试工具用于模拟前端请求调试后端接口代码编辑器 (VS Code)编写前后端代码安装相关插件提升效率注意微信小程序要求后端服务器域名必须经过 ICP 备案且需要在微信公众平台配置合法域名。开发阶段可使用开发者工具的“不校验合法域名”选项进行调试但上线前必须完成配置。2. 从零搭建项目基础框架与核心功能我们将按照“后端先行”的思路先搭建起提供数据服务的基础再实现小程序前端界面。2.1 后端服务初始化与数据库设计首先创建一个新的 Node.js 项目并安装基础依赖。# 创建项目目录 mkdir edu-portfolio-backend cd edu-portfolio-backend # 初始化项目 npm init -y # 安装核心依赖 npm install express mysql2 cors dotenv npm install -D nodemon # 创建基础文件 touch app.js .env mkdir routes models controllers utils在.env文件中配置环境变量如数据库连接信息和微信 AppSecret切勿提交到代码仓库。DB_HOSTlocalhost DB_USERroot DB_PASSWORDyourpassword DB_NAMEedu_portfolio WX_APPIDyour_appid WX_APPSECRETyour_appsecret PORT3000接着设计核心数据表。这里给出users用户、courses课程、portfolio作品集三个表的简化 SQL。-- 用户表 CREATE TABLE users ( id int(11) NOT NULL AUTO_INCREMENT, openid varchar(100) NOT NULL UNIQUE COMMENT 微信用户唯一标识, nickname varchar(100) DEFAULT NULL, avatar_url varchar(500) DEFAULT NULL, created_at timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4; -- 课程表 CREATE TABLE courses ( id int(11) NOT NULL AUTO_INCREMENT, title varchar(200) NOT NULL, description text, cover_img varchar(500) DEFAULT NULL COMMENT 封面图URL, video_url varchar(500) NOT NULL COMMENT 视频地址, duration int(11) DEFAULT NULL COMMENT 视频时长(秒), sort_order int(11) DEFAULT 0, is_published tinyint(1) DEFAULT 1, created_at timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4; -- 作品集表 CREATE TABLE portfolio ( id int(11) NOT NULL AUTO_INCREMENT, user_id int(11) NOT NULL COMMENT 关联用户ID, title varchar(200) NOT NULL, description text, cover_image varchar(500) DEFAULT NULL COMMENT 作品封面, content_type enum(image, video, link, text) NOT NULL DEFAULT image, content_url varchar(500) DEFAULT NULL COMMENT 根据类型可能是图片URL、视频URL或外部链接, views int(11) DEFAULT 0 COMMENT 浏览量, is_public tinyint(1) DEFAULT 1 COMMENT 是否公开, created_at timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (id), FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;在app.js中编写一个简单的 Express 服务器并连接数据库。// app.js const express require(express); const cors require(cors); require(dotenv).config(); const db require(./utils/database); // 假设数据库连接封装在此文件 const app express(); const port process.env.PORT || 3000; // 中间件 app.use(cors()); // 允许跨域开发时使用生产环境需精确配置 app.use(express.json()); // 解析 JSON 请求体 app.use(express.urlencoded({ extended: true })); // 简单的健康检查路由 app.get(/api/health, (req, res) { res.json({ status: ok, message: Server is running }); }); // 在此处引入其他路由例如 // const courseRoutes require(./routes/courses); // const portfolioRoutes require(./routes/portfolio); // app.use(/api/courses, courseRoutes); // app.use(/api/portfolio, portfolioRoutes); // 错误处理中间件 app.use((err, req, res, next) { console.error(err.stack); res.status(500).json({ code: 500, message: 服务器内部错误 }); }); app.listen(port, () { console.log(后端服务运行在 http://localhost:${port}); });2.2 实现微信登录与用户认证接口用户登录是小程序与后端建立信任关系的第一步。流程如下小程序端调用wx.login()获取临时凭证code。小程序将code发送给后端。后端用code、appid、appsecret请求微信接口换取openid和session_key。后端根据openid查询或创建用户记录并生成自己的会话标识如 JWT Token返回给小程序。小程序存储此 Token后续请求在 Header 中携带。后端登录接口示例 (routes/auth.js):const router require(express).Router(); const axios require(axios); const jwt require(jsonwebtoken); // 需安装 jsonwebtoken const db require(../utils/database); router.post(/login, async (req, res, next) { const { code } req.body; if (!code) { return res.status(400).json({ code: 400, message: 缺少code参数 }); } const appid process.env.WX_APPID; const secret process.env.WX_APPSECRET; const url https://api.weixin.qq.com/sns/jscode2session?appid${appid}secret${secret}js_code${code}grant_typeauthorization_code; try { // 1. 向微信服务器请求 openid const response await axios.get(url); const { openid, session_key, errcode, errmsg } response.data; if (errcode) { return res.status(401).json({ code: errcode, message: errmsg }); } // 2. 查找或创建用户 let [users] await db.query(SELECT * FROM users WHERE openid ?, [openid]); let userId; if (users.length 0) { // 新用户插入记录此时可能还没有昵称头像可后续更新 const [result] await db.query(INSERT INTO users (openid) VALUES (?), [openid]); userId result.insertId; } else { userId users[0].id; } // 3. 生成JWT Token示例实际项目需考虑刷新机制 const token jwt.sign({ userId, openid }, process.env.JWT_SECRET, { expiresIn: 7d }); // 4. 返回用户信息和Token res.json({ code: 0, message: success, data: { token, userInfo: users[0] || { id: userId, openid } } }); } catch (error) { console.error(登录失败:, error); next(error); } }); module.exports router;2.3 构建课程列表与视频播放功能课程模块需要列表接口和详情接口。列表接口通常支持分页和筛选。课程列表接口 (routes/courses.js):router.get(/list, async (req, res, next) { const { page 1, pageSize 10 } req.query; const offset (page - 1) * pageSize; try { // 查询已发布的课程总数 const [[{ total }]] await db.query( SELECT COUNT(*) as total FROM courses WHERE is_published 1 ); // 查询课程列表 const [courses] await db.query( SELECT id, title, description, cover_img, duration FROM courses WHERE is_published 1 ORDER BY sort_order DESC, created_at DESC LIMIT ? OFFSET ?, [parseInt(pageSize), offset] ); res.json({ code: 0, message: success, data: { list: courses, pagination: { current: parseInt(page), pageSize: parseInt(pageSize), total } } }); } catch (error) { next(error); } });在小程序端使用wx.request调用此接口并使用wx:for渲染列表。视频播放则使用video组件其src绑定从详情接口获取的video_url。!-- pages/course/list.wxml -- view classcourse-list block wx:for{{courseList}} wx:keyid view classcourse-item bindtapnavigateToDetail>// pages/course/list.js Page({ data: { courseList: [], page: 1, hasMore: true }, onLoad() { this.loadCourses(); }, loadCourses() { if (!this.data.hasMore) return; wx.request({ url: https://your-domain.com/api/courses/list, data: { page: this.data.page }, success: (res) { if (res.data.code 0) { const newList res.data.data.list; const oldList this.data.courseList; this.setData({ courseList: oldList.concat(newList), hasMore: (this.data.page * 10) res.data.data.pagination.total }); } } }); }, navigateToDetail(e) { const id e.currentTarget.dataset.id; wx.navigateTo({ url: /pages/course/detail?id${id} }); } });3. 核心扩展实现作品集展示模块作品集模块是区别于普通课程列表的特色功能它更强调用户的个性化创作和视觉展示。3.1 作品集数据模型与接口设计回顾之前设计的portfolio表它包含了作品标题、描述、封面、内容类型和链接等字段。我们需要创建对应的增删改查接口。GET /api/portfolio/list: 获取作品列表可分页可按用户筛选。GET /api/portfolio/:id: 获取作品详情并增加浏览量。POST /api/portfolio: 创建新作品需要用户认证。PUT /api/portfolio/:id: 更新作品需要验证作者权限。DELETE /api/portfolio/:id: 删除作品需要验证作者权限。创建作品接口示例 (controllers/portfolioController.js):exports.createPortfolio async (req, res, next) { // 假设用户信息已通过JWT中间件附加到req.user const userId req.user.userId; const { title, description, cover_image, content_type, content_url, is_public } req.body; // 基础验证 if (!title || !content_type) { return res.status(400).json({ code: 400, message: 标题和内容类型为必填项 }); } try { const [result] await db.query( INSERT INTO portfolio (user_id, title, description, cover_image, content_type, content_url, is_public) VALUES (?, ?, ?, ?, ?, ?, ?), [userId, title, description || null, cover_image || null, content_type, content_url || null, is_public ! undefined ? is_public : 1] ); res.status(201).json({ code: 0, message: 创建成功, data: { portfolioId: result.insertId } }); } catch (error) { next(error); } };3.2 小程序端作品集页面开发前端需要两个主要页面作品集画廊页 (portfolio/index) 和作品发布/编辑页 (portfolio/edit)。画廊页 (portfolio/index): 以网格或瀑布流形式展示作品。可以设计一个选项卡切换“全部作品”和“我的作品”。!-- pages/portfolio/index.wxml -- view classportfolio-container view classfilter-tabs text classtab {{activeTaball?active:}} bindtapswitchTab>// pages/portfolio/edit.js Page({ data: { contentType: image, // 默认类型 formData: { title: , description: , coverImage: , contentUrl: , isPublic: true } }, onContentTypeChange(e) { const type e.detail.value; this.setData({ contentType: type }); // 切换类型时可以清空之前的内容URL if (type ! this.data.contentType) { this.setData({ formData.contentUrl: }); } }, // 上传封面图 chooseCover() { wx.chooseMedia({ count: 1, mediaType: [image], success: (res) { const tempFilePath res.tempFiles[0].tempFilePath; // 调用后端上传接口获取永久URL后更新formData.coverImage this.uploadFile(tempFilePath, cover).then(url { this.setData({ formData.coverImage: url }); }); } }); }, // 根据类型上传内容文件或直接保存链接 handleContentInput() { if (this.data.contentType image || this.data.contentType video) { wx.chooseMedia({ count: 1, mediaType: [this.data.contentType], success: (res) { const tempFilePath res.tempFiles[0].tempFilePath; this.uploadFile(tempFilePath, content).then(url { this.setData({ formData.contentUrl: url }); }); } }); } // 如果是 link 或 text 类型则通过输入框绑定 formData.contentUrl }, // 提交表单 submitForm() { const { title } this.data.formData; if (!title.trim()) { wx.showToast({ title: 请输入标题, icon: none }); return; } const postData { ...this.data.formData, content_type: this.data.contentType }; wx.request({ url: https://your-domain.com/api/portfolio, method: POST, header: { Authorization: Bearer ${wx.getStorageSync(token)} }, data: postData, success: (res) { if (res.data.code 0) { wx.showToast({ title: 发布成功 }); setTimeout(() wx.navigateBack(), 1500); } } }); } });3.3 文件上传与云存储集成小程序端上传文件使用wx.uploadFileAPI。由于微信小程序对后端域名有严格限制文件通常需要先上传到后端服务器再由后端服务器转存到云存储如腾讯云COS、阿里云OSS或本地。后端文件上传接口示例// routes/upload.js const multer require(multer); // 需安装 multer const path require(path); const fs require(fs); // 配置临时存储 const upload multer({ dest: uploads/temp/ }); router.post(/file, upload.single(file), async (req, res) { if (!req.file) { return res.status(400).json({ code: 400, message: 未上传文件 }); } const { originalname, mimetype, path: tempPath } req.file; const fileExt path.extname(originalname).toLowerCase(); // 1. 此处应进行文件类型、大小校验 // 2. 生成唯一文件名防止冲突 const cloudFileName portfolio/${Date.now()}-${Math.random().toString(36).substr(2)}${fileExt}; // 3. 调用云存储SDK上传文件 (以腾讯云COS为例) // const cos require(../utils/cos-client); // const result await cos.putObject({ // Bucket: your-bucket, // Region: your-region, // Key: cloudFileName, // Body: fs.createReadStream(tempPath) // }).promise(); // const fileUrl https://${result.Location}; // 4. 删除临时文件 fs.unlinkSync(tempPath); // 5. 返回可访问的URL (此处为模拟) const mockFileUrl https://your-cdn-domain.com/${cloudFileName}; res.json({ code: 0, message: 上传成功, data: { url: mockFileUrl } }); });注意生产环境务必对上传文件进行严格的安全检查包括文件类型白名单、大小限制、病毒扫描等并避免将文件存储在应用服务器本地。4. 项目联调、优化与上线前检查功能开发完成后需要进行全面的测试和优化以确保良好的用户体验和符合平台规范。4.1 前后端联调与常见问题排查联调阶段最常见的问题是网络请求失败和数据渲染错误。问题1wx.request报错fail url not in domain list原因请求的域名未在微信公众平台配置。排查登录微信公众平台在“开发”-“开发设置”-“服务器域名”中将你的后端 API 域名如https://api.yourdomain.com添加到request合法域名中。开发阶段可在开发者工具“详情”-“本地设置”中勾选“不校验合法域名、web-view业务域名、TLS 版本以及 HTTPS 证书”但这仅用于调试。问题2登录成功但后续接口返回 401 未授权原因Token 未正确携带或已过期。排查检查登录接口返回的 Token 是否被成功存储wx.setStorageSync。检查后续请求的 Header 是否正确添加了Authorization: Bearer token。在后端中间件中打印接收到的 Token 并验证其有效性。检查 Token 过期时间实现 Token 刷新逻辑。问题3真机预览时图片或视频无法加载原因资源地址是本地路径或内网地址真机无法访问。排查确保所有图片、视频、文件等资源的 URL 都是通过 HTTPS 协议可公开访问的互联网地址。上传功能必须使用能返回公网 URL 的服务。问题4小程序包体积过大无法预览或上传原因主包或某些分包大小超过 2MB 限制。优化使用小程序分包加载功能。将作品集、个人中心等非首页功能放到独立分包中。压缩图片等静态资源使用 WebP 格式。检查是否有未使用的代码或组件利用开发者工具的“代码依赖分析”功能。如果使用 uni-app 等框架注意优化其运行时体积。4.2 性能与体验优化实践图片懒加载列表页中的图片使用image组件的lazy-load属性。视频优化视频列表页使用封面图详情页再加载播放器。对于长视频考虑使用微信的“视频号”或“腾讯云点播”等专业服务以获得更好的播放体验和节省流量。请求缓存对于不常变的数据如课程分类可以使用wx.setStorage进行本地缓存并设置合理的过期时间。下拉刷新与上拉加载列表页务必实现onPullDownRefresh和onReachBottom生命周期函数提供流畅的浏览体验。骨架屏在数据加载前使用骨架屏Skeleton Screen占位避免白屏。4.3 上线前安全检查清单提交微信审核前务必逐项检查以下内容检查项说明自查方法基本信息小程序名称、简介、头像、服务类目是否准确合规。对照《微信小程序平台运营规范》检查。隐私协议是否在必要时机如获取用户信息前弹窗提示并获取用户同意。检查wx.getUserProfile等接口的调用逻辑。权限声明在app.json的requiredPrivateInfos或permission字段中声明了所需的隐私接口如相册、位置。查看开发者工具“详情”-“项目配置”中的权限列表。内容安全用户生成内容UGC如作品标题、描述、评论是否有过滤机制。后端接口对文本内容进行敏感词过滤。支付与虚拟支付如涉及必须使用微信支付。iOS 端禁止虚拟支付。确认支付场景符合规范。域名与证书所有请求的服务器域名均已配置且支持 HTTPS 并具备有效证书。在真机上测试所有网络请求。体验流畅性无明显的卡顿、白屏、错误提示。在多款真机上进行功能遍历。无测试数据清除所有控制台日志、测试账号、模拟数据。检查代码中是否有console.log或写死的测试数据。完成以上检查和优化后便可以在微信开发者工具中点击“上传”填写版本信息提交至微信平台进行审核。审核通过后即可发布上线。通过以上步骤我们完成了一个集在线视频教育与作品集展示于一体的微信小程序从设计到上线的全过程。关键在于理解小程序的生命周期、前后端数据交互、用户认证以及微信平台的各种限制与规范。在实际开发中你可能会遇到更多具体问题如视频播放兼容性、列表页卡顿、文件上传中断等此时需要结合官方文档、社区讨论和具体的错误信息进行针对性排查。这个项目作为一个起点你可以在此基础上继续扩展例如加入社交分享、消息通知、在线支付购买课程、更复杂的作品分类与标签系统等使其功能更加完善。
在线视频教育系统与作品集展示是当前微信小程序开发中两个常见且实用的场景前者聚焦于知识传递与学习管理后者则用于个人或机构的能力展示。将两者结合可以构建一个既能承载课程内容又能展示教学成果的综合性平台。对于开发者而言理解如何从零开始搭建这样一个系统掌握其核心模块的设计与实现是提升微信小程序开发能力的关键路径。本文将以一个“基于微信小程序的在线视频教育系统”为蓝本重点讲解如何在其基础上集成一个“作品集展示”模块。我们将从项目环境搭建、核心功能设计、前后端交互实现到上线前的优化与测试进行完整的梳理。无论你是希望学习微信小程序开发的新手还是想了解如何构建内容型应用的开发者都能通过本文获得一套可复现的实践方案。最终你将得到一个具备视频播放、课程管理、用户交互以及作品展示功能的微信小程序原型。1. 理解微信小程序在线教育系统的核心架构在动手编码之前必须厘清一个在线视频教育小程序需要哪些基本组成部分。这不仅仅是功能列表更是理解数据如何流动、模块如何协作的基础。1.1 核心功能模块拆解一个典型的在线教育小程序至少包含以下四个核心模块用户系统这是所有交互的起点。包括微信授权登录、用户信息管理如昵称、头像、学习进度记录。微信生态提供了便捷的登录能力wx.login,getUserProfile但需要后端配合换取openid和session_key来建立用户唯一标识。内容管理系统CMS用于管理视频课程、图文资料等学习内容。在小程序端这通常表现为课程列表页、课程详情页和视频播放器。后端需要提供课程分类、列表、详情等接口。视频播放直接使用微信小程序的video组件但视频源地址URL需要从后端动态获取。学习交互系统让学习过程可记录、可追踪。包括视频播放进度记录、收藏课程、发表评论或笔记、完成课后练习等。这些交互数据需要与用户ID强关联并持久化到数据库。作品集展示模块这是本文的重点扩展模块。它不同于普通的课程列表更侧重于成果的视觉化、结构化展示。例如学员可以将自己的结业项目、设计作品、代码仓库链接等以图文、视频或链接的形式发布出来形成一个个人作品画廊。1.2 前后端数据流设计小程序采用前后端分离架构。前端小程序负责界面渲染和用户交互后端服务器提供数据接口和业务逻辑处理。前端小程序职责使用 WXML/WXSS/JavaScript 构建页面。调用微信 JS-SDK API如网络请求wx.request、本地存储wx.setStorage。向后端发起 HTTP/HTTPS 请求获取或提交数据。处理用户交互事件点击、滑动等。后端服务器职责提供 RESTful API 接口。处理用户认证与授权验证微信登录凭证。从数据库如 MySQL、MongoDB中存取课程、用户、作品集等数据。处理文件上传如图片、视频封面返回可访问的 URL。实现业务逻辑如更新学习进度、计算作品集浏览量等。数据交互的核心是 API 设计。例如获取作品集列表的接口可能设计为GET /api/portfolio/list提交一个新作品的接口为POST /api/portfolio/create。1.3 技术选型与开发工具准备对于前端微信开发者工具是必备的。对于后端选择非常灵活可以是 Node.js (Express/Koa)、Python (Django/Flask)、Java (Spring Boot)、Go (Gin) 等。为了快速原型开发我们以 Node.js Express 和 MySQL 为例。开发环境清单工具/环境用途备注微信开发者工具小程序代码编写、调试、预览、上传需注册微信小程序账号获取 AppIDNode.js (LTS版本)运行 JavaScript 后端服务器建议版本 16.x 或 18.xMySQL 5.7/8.0关系型数据库存储结构化数据也可使用云数据库服务Postman / ApifoxAPI 接口测试工具用于模拟前端请求调试后端接口代码编辑器 (VS Code)编写前后端代码安装相关插件提升效率注意微信小程序要求后端服务器域名必须经过 ICP 备案且需要在微信公众平台配置合法域名。开发阶段可使用开发者工具的“不校验合法域名”选项进行调试但上线前必须完成配置。2. 从零搭建项目基础框架与核心功能我们将按照“后端先行”的思路先搭建起提供数据服务的基础再实现小程序前端界面。2.1 后端服务初始化与数据库设计首先创建一个新的 Node.js 项目并安装基础依赖。# 创建项目目录 mkdir edu-portfolio-backend cd edu-portfolio-backend # 初始化项目 npm init -y # 安装核心依赖 npm install express mysql2 cors dotenv npm install -D nodemon # 创建基础文件 touch app.js .env mkdir routes models controllers utils在.env文件中配置环境变量如数据库连接信息和微信 AppSecret切勿提交到代码仓库。DB_HOSTlocalhost DB_USERroot DB_PASSWORDyourpassword DB_NAMEedu_portfolio WX_APPIDyour_appid WX_APPSECRETyour_appsecret PORT3000接着设计核心数据表。这里给出users用户、courses课程、portfolio作品集三个表的简化 SQL。-- 用户表 CREATE TABLE users ( id int(11) NOT NULL AUTO_INCREMENT, openid varchar(100) NOT NULL UNIQUE COMMENT 微信用户唯一标识, nickname varchar(100) DEFAULT NULL, avatar_url varchar(500) DEFAULT NULL, created_at timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4; -- 课程表 CREATE TABLE courses ( id int(11) NOT NULL AUTO_INCREMENT, title varchar(200) NOT NULL, description text, cover_img varchar(500) DEFAULT NULL COMMENT 封面图URL, video_url varchar(500) NOT NULL COMMENT 视频地址, duration int(11) DEFAULT NULL COMMENT 视频时长(秒), sort_order int(11) DEFAULT 0, is_published tinyint(1) DEFAULT 1, created_at timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4; -- 作品集表 CREATE TABLE portfolio ( id int(11) NOT NULL AUTO_INCREMENT, user_id int(11) NOT NULL COMMENT 关联用户ID, title varchar(200) NOT NULL, description text, cover_image varchar(500) DEFAULT NULL COMMENT 作品封面, content_type enum(image, video, link, text) NOT NULL DEFAULT image, content_url varchar(500) DEFAULT NULL COMMENT 根据类型可能是图片URL、视频URL或外部链接, views int(11) DEFAULT 0 COMMENT 浏览量, is_public tinyint(1) DEFAULT 1 COMMENT 是否公开, created_at timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (id), FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;在app.js中编写一个简单的 Express 服务器并连接数据库。// app.js const express require(express); const cors require(cors); require(dotenv).config(); const db require(./utils/database); // 假设数据库连接封装在此文件 const app express(); const port process.env.PORT || 3000; // 中间件 app.use(cors()); // 允许跨域开发时使用生产环境需精确配置 app.use(express.json()); // 解析 JSON 请求体 app.use(express.urlencoded({ extended: true })); // 简单的健康检查路由 app.get(/api/health, (req, res) { res.json({ status: ok, message: Server is running }); }); // 在此处引入其他路由例如 // const courseRoutes require(./routes/courses); // const portfolioRoutes require(./routes/portfolio); // app.use(/api/courses, courseRoutes); // app.use(/api/portfolio, portfolioRoutes); // 错误处理中间件 app.use((err, req, res, next) { console.error(err.stack); res.status(500).json({ code: 500, message: 服务器内部错误 }); }); app.listen(port, () { console.log(后端服务运行在 http://localhost:${port}); });2.2 实现微信登录与用户认证接口用户登录是小程序与后端建立信任关系的第一步。流程如下小程序端调用wx.login()获取临时凭证code。小程序将code发送给后端。后端用code、appid、appsecret请求微信接口换取openid和session_key。后端根据openid查询或创建用户记录并生成自己的会话标识如 JWT Token返回给小程序。小程序存储此 Token后续请求在 Header 中携带。后端登录接口示例 (routes/auth.js):const router require(express).Router(); const axios require(axios); const jwt require(jsonwebtoken); // 需安装 jsonwebtoken const db require(../utils/database); router.post(/login, async (req, res, next) { const { code } req.body; if (!code) { return res.status(400).json({ code: 400, message: 缺少code参数 }); } const appid process.env.WX_APPID; const secret process.env.WX_APPSECRET; const url https://api.weixin.qq.com/sns/jscode2session?appid${appid}secret${secret}js_code${code}grant_typeauthorization_code; try { // 1. 向微信服务器请求 openid const response await axios.get(url); const { openid, session_key, errcode, errmsg } response.data; if (errcode) { return res.status(401).json({ code: errcode, message: errmsg }); } // 2. 查找或创建用户 let [users] await db.query(SELECT * FROM users WHERE openid ?, [openid]); let userId; if (users.length 0) { // 新用户插入记录此时可能还没有昵称头像可后续更新 const [result] await db.query(INSERT INTO users (openid) VALUES (?), [openid]); userId result.insertId; } else { userId users[0].id; } // 3. 生成JWT Token示例实际项目需考虑刷新机制 const token jwt.sign({ userId, openid }, process.env.JWT_SECRET, { expiresIn: 7d }); // 4. 返回用户信息和Token res.json({ code: 0, message: success, data: { token, userInfo: users[0] || { id: userId, openid } } }); } catch (error) { console.error(登录失败:, error); next(error); } }); module.exports router;2.3 构建课程列表与视频播放功能课程模块需要列表接口和详情接口。列表接口通常支持分页和筛选。课程列表接口 (routes/courses.js):router.get(/list, async (req, res, next) { const { page 1, pageSize 10 } req.query; const offset (page - 1) * pageSize; try { // 查询已发布的课程总数 const [[{ total }]] await db.query( SELECT COUNT(*) as total FROM courses WHERE is_published 1 ); // 查询课程列表 const [courses] await db.query( SELECT id, title, description, cover_img, duration FROM courses WHERE is_published 1 ORDER BY sort_order DESC, created_at DESC LIMIT ? OFFSET ?, [parseInt(pageSize), offset] ); res.json({ code: 0, message: success, data: { list: courses, pagination: { current: parseInt(page), pageSize: parseInt(pageSize), total } } }); } catch (error) { next(error); } });在小程序端使用wx.request调用此接口并使用wx:for渲染列表。视频播放则使用video组件其src绑定从详情接口获取的video_url。!-- pages/course/list.wxml -- view classcourse-list block wx:for{{courseList}} wx:keyid view classcourse-item bindtapnavigateToDetail>// pages/course/list.js Page({ data: { courseList: [], page: 1, hasMore: true }, onLoad() { this.loadCourses(); }, loadCourses() { if (!this.data.hasMore) return; wx.request({ url: https://your-domain.com/api/courses/list, data: { page: this.data.page }, success: (res) { if (res.data.code 0) { const newList res.data.data.list; const oldList this.data.courseList; this.setData({ courseList: oldList.concat(newList), hasMore: (this.data.page * 10) res.data.data.pagination.total }); } } }); }, navigateToDetail(e) { const id e.currentTarget.dataset.id; wx.navigateTo({ url: /pages/course/detail?id${id} }); } });3. 核心扩展实现作品集展示模块作品集模块是区别于普通课程列表的特色功能它更强调用户的个性化创作和视觉展示。3.1 作品集数据模型与接口设计回顾之前设计的portfolio表它包含了作品标题、描述、封面、内容类型和链接等字段。我们需要创建对应的增删改查接口。GET /api/portfolio/list: 获取作品列表可分页可按用户筛选。GET /api/portfolio/:id: 获取作品详情并增加浏览量。POST /api/portfolio: 创建新作品需要用户认证。PUT /api/portfolio/:id: 更新作品需要验证作者权限。DELETE /api/portfolio/:id: 删除作品需要验证作者权限。创建作品接口示例 (controllers/portfolioController.js):exports.createPortfolio async (req, res, next) { // 假设用户信息已通过JWT中间件附加到req.user const userId req.user.userId; const { title, description, cover_image, content_type, content_url, is_public } req.body; // 基础验证 if (!title || !content_type) { return res.status(400).json({ code: 400, message: 标题和内容类型为必填项 }); } try { const [result] await db.query( INSERT INTO portfolio (user_id, title, description, cover_image, content_type, content_url, is_public) VALUES (?, ?, ?, ?, ?, ?, ?), [userId, title, description || null, cover_image || null, content_type, content_url || null, is_public ! undefined ? is_public : 1] ); res.status(201).json({ code: 0, message: 创建成功, data: { portfolioId: result.insertId } }); } catch (error) { next(error); } };3.2 小程序端作品集页面开发前端需要两个主要页面作品集画廊页 (portfolio/index) 和作品发布/编辑页 (portfolio/edit)。画廊页 (portfolio/index): 以网格或瀑布流形式展示作品。可以设计一个选项卡切换“全部作品”和“我的作品”。!-- pages/portfolio/index.wxml -- view classportfolio-container view classfilter-tabs text classtab {{activeTaball?active:}} bindtapswitchTab>// pages/portfolio/edit.js Page({ data: { contentType: image, // 默认类型 formData: { title: , description: , coverImage: , contentUrl: , isPublic: true } }, onContentTypeChange(e) { const type e.detail.value; this.setData({ contentType: type }); // 切换类型时可以清空之前的内容URL if (type ! this.data.contentType) { this.setData({ formData.contentUrl: }); } }, // 上传封面图 chooseCover() { wx.chooseMedia({ count: 1, mediaType: [image], success: (res) { const tempFilePath res.tempFiles[0].tempFilePath; // 调用后端上传接口获取永久URL后更新formData.coverImage this.uploadFile(tempFilePath, cover).then(url { this.setData({ formData.coverImage: url }); }); } }); }, // 根据类型上传内容文件或直接保存链接 handleContentInput() { if (this.data.contentType image || this.data.contentType video) { wx.chooseMedia({ count: 1, mediaType: [this.data.contentType], success: (res) { const tempFilePath res.tempFiles[0].tempFilePath; this.uploadFile(tempFilePath, content).then(url { this.setData({ formData.contentUrl: url }); }); } }); } // 如果是 link 或 text 类型则通过输入框绑定 formData.contentUrl }, // 提交表单 submitForm() { const { title } this.data.formData; if (!title.trim()) { wx.showToast({ title: 请输入标题, icon: none }); return; } const postData { ...this.data.formData, content_type: this.data.contentType }; wx.request({ url: https://your-domain.com/api/portfolio, method: POST, header: { Authorization: Bearer ${wx.getStorageSync(token)} }, data: postData, success: (res) { if (res.data.code 0) { wx.showToast({ title: 发布成功 }); setTimeout(() wx.navigateBack(), 1500); } } }); } });3.3 文件上传与云存储集成小程序端上传文件使用wx.uploadFileAPI。由于微信小程序对后端域名有严格限制文件通常需要先上传到后端服务器再由后端服务器转存到云存储如腾讯云COS、阿里云OSS或本地。后端文件上传接口示例// routes/upload.js const multer require(multer); // 需安装 multer const path require(path); const fs require(fs); // 配置临时存储 const upload multer({ dest: uploads/temp/ }); router.post(/file, upload.single(file), async (req, res) { if (!req.file) { return res.status(400).json({ code: 400, message: 未上传文件 }); } const { originalname, mimetype, path: tempPath } req.file; const fileExt path.extname(originalname).toLowerCase(); // 1. 此处应进行文件类型、大小校验 // 2. 生成唯一文件名防止冲突 const cloudFileName portfolio/${Date.now()}-${Math.random().toString(36).substr(2)}${fileExt}; // 3. 调用云存储SDK上传文件 (以腾讯云COS为例) // const cos require(../utils/cos-client); // const result await cos.putObject({ // Bucket: your-bucket, // Region: your-region, // Key: cloudFileName, // Body: fs.createReadStream(tempPath) // }).promise(); // const fileUrl https://${result.Location}; // 4. 删除临时文件 fs.unlinkSync(tempPath); // 5. 返回可访问的URL (此处为模拟) const mockFileUrl https://your-cdn-domain.com/${cloudFileName}; res.json({ code: 0, message: 上传成功, data: { url: mockFileUrl } }); });注意生产环境务必对上传文件进行严格的安全检查包括文件类型白名单、大小限制、病毒扫描等并避免将文件存储在应用服务器本地。4. 项目联调、优化与上线前检查功能开发完成后需要进行全面的测试和优化以确保良好的用户体验和符合平台规范。4.1 前后端联调与常见问题排查联调阶段最常见的问题是网络请求失败和数据渲染错误。问题1wx.request报错fail url not in domain list原因请求的域名未在微信公众平台配置。排查登录微信公众平台在“开发”-“开发设置”-“服务器域名”中将你的后端 API 域名如https://api.yourdomain.com添加到request合法域名中。开发阶段可在开发者工具“详情”-“本地设置”中勾选“不校验合法域名、web-view业务域名、TLS 版本以及 HTTPS 证书”但这仅用于调试。问题2登录成功但后续接口返回 401 未授权原因Token 未正确携带或已过期。排查检查登录接口返回的 Token 是否被成功存储wx.setStorageSync。检查后续请求的 Header 是否正确添加了Authorization: Bearer token。在后端中间件中打印接收到的 Token 并验证其有效性。检查 Token 过期时间实现 Token 刷新逻辑。问题3真机预览时图片或视频无法加载原因资源地址是本地路径或内网地址真机无法访问。排查确保所有图片、视频、文件等资源的 URL 都是通过 HTTPS 协议可公开访问的互联网地址。上传功能必须使用能返回公网 URL 的服务。问题4小程序包体积过大无法预览或上传原因主包或某些分包大小超过 2MB 限制。优化使用小程序分包加载功能。将作品集、个人中心等非首页功能放到独立分包中。压缩图片等静态资源使用 WebP 格式。检查是否有未使用的代码或组件利用开发者工具的“代码依赖分析”功能。如果使用 uni-app 等框架注意优化其运行时体积。4.2 性能与体验优化实践图片懒加载列表页中的图片使用image组件的lazy-load属性。视频优化视频列表页使用封面图详情页再加载播放器。对于长视频考虑使用微信的“视频号”或“腾讯云点播”等专业服务以获得更好的播放体验和节省流量。请求缓存对于不常变的数据如课程分类可以使用wx.setStorage进行本地缓存并设置合理的过期时间。下拉刷新与上拉加载列表页务必实现onPullDownRefresh和onReachBottom生命周期函数提供流畅的浏览体验。骨架屏在数据加载前使用骨架屏Skeleton Screen占位避免白屏。4.3 上线前安全检查清单提交微信审核前务必逐项检查以下内容检查项说明自查方法基本信息小程序名称、简介、头像、服务类目是否准确合规。对照《微信小程序平台运营规范》检查。隐私协议是否在必要时机如获取用户信息前弹窗提示并获取用户同意。检查wx.getUserProfile等接口的调用逻辑。权限声明在app.json的requiredPrivateInfos或permission字段中声明了所需的隐私接口如相册、位置。查看开发者工具“详情”-“项目配置”中的权限列表。内容安全用户生成内容UGC如作品标题、描述、评论是否有过滤机制。后端接口对文本内容进行敏感词过滤。支付与虚拟支付如涉及必须使用微信支付。iOS 端禁止虚拟支付。确认支付场景符合规范。域名与证书所有请求的服务器域名均已配置且支持 HTTPS 并具备有效证书。在真机上测试所有网络请求。体验流畅性无明显的卡顿、白屏、错误提示。在多款真机上进行功能遍历。无测试数据清除所有控制台日志、测试账号、模拟数据。检查代码中是否有console.log或写死的测试数据。完成以上检查和优化后便可以在微信开发者工具中点击“上传”填写版本信息提交至微信平台进行审核。审核通过后即可发布上线。通过以上步骤我们完成了一个集在线视频教育与作品集展示于一体的微信小程序从设计到上线的全过程。关键在于理解小程序的生命周期、前后端数据交互、用户认证以及微信平台的各种限制与规范。在实际开发中你可能会遇到更多具体问题如视频播放兼容性、列表页卡顿、文件上传中断等此时需要结合官方文档、社区讨论和具体的错误信息进行针对性排查。这个项目作为一个起点你可以在此基础上继续扩展例如加入社交分享、消息通知、在线支付购买课程、更复杂的作品分类与标签系统等使其功能更加完善。
![【Bug已解决】[modular] ensure branch-specific input defaults 解决方案](http://pic.xiahunao.cn/yaotu/【Bug已解决】[modular] ensure branch-specific input defaults 解决方案)
