ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

基于Flask+微信小程序的建设项目信息管理系统前台开发全解析

基于Flask+微信小程序的建设项目信息管理系统前台开发全解析 每年到毕设季我都会看到不少同学在选题上纠结很久尤其是管理系统这个方向——听起来很常规但真正动手后才发现要么业务太虚不知道怎么下手要么技术栈太杂导致代码根本跑不通。今天想借基于PythonFlask框架的微信小程序CR公司建设项目信息管理系统-前台这个题目把我自己实际做下来的一套完整思路梳理出来。这个题目属于典型的小程序前台 Flask后台前后端分离架构核心业务是建设项目的信息管理难点在于业务模块怎么划、接口怎么设计、小程序端怎么把数据展示得清晰而不是在技术上堆砌花活。如果你正准备做类似选题或者已经开题但还没理清系统该长什么样这篇文章应该能帮你省掉不少弯路。我从这个项目的选题逻辑、技术栈选型、后端API设计、小程序前台页面实现、开题和论文写作框架一直讲到联调阶段最容易踩的坑尽量把每一步的为什么也讲清楚。毕竟毕设不只是把代码跑通更重要的是答辩时你能讲明白每个设计决策的理由。1. 这个毕设选题的本质CR公司建设项目管理需要什么样的「前台」1.1 建设项目信息管理的业务范围拆解先说这个题目里的CR公司。虽然标题带了一个具体公司名但本质上它代表的是一家有多个在建项目、需要统一管理项目信息的企业。建设项目管理系统的核心需求并不是做一个炫酷的界面而是解决几个很现实的问题项目信息分散在各处领导想查项目进度、投资额、负责人得问一圈人才知道通知、公告通过微信群发消息容易被刷掉事后想找回来很难现场资料、会议纪要、图纸文件散落在各自电脑里没有统一归档项目中出现的问题和整改情况没有记录追责和复盘都费劲所以系统里最基础也最重要的模块就围绕项目这个核心实体展开项目基础信息项目名称、编号、类型、地点、负责人、开工日期、计划竣工日期、投资金额、项目进度月度/季度进度记录、项目文档上传图纸、合同、会议纪要等附件、通知公告公司级和项目级发布。用户角色上前台小程序端面向的是一线工作人员和普通项目成员他们需要快速查看项目状态、接收通知、上报进度或反馈问题。而后台管理端通常负责项目经理或公司管理员进行数据录入、审核和发布。1.2 「前台」的定位小程序端到底要展示什么标题里明确写了前台两个字这就划定了项目范围——你的重心是面向C端用户的小程序不需要把后台管理的大而全都做完。很多同学一开始容易犯的错是试图把后台的每一个增删改查页面都搬到小程序上结果工作量爆炸、页面又多又乱。我建议把小程序前台定义为三个核心场景看信息项目列表、项目详情、工程进度、通知公告、资料文件这些是只读场景占了80%的需求。重点是信息组织清晰让用户一打开就知道我的项目有哪些、进度到了哪一步、最新的通知是什么。办事情比如提交进度反馈、填写问题整改回执、发起请假或报销申请。这类场景在信息化系统里叫流程类功能。毕设里不用做太重的审批流做成一张表单提交后台可见状态回显就足够支撑论文的业务闭环了。我的空间个人中心用来管理自己的登录态、查看自己提交过的记录、消息通知等。把这三个场景理清楚你的功能列表、数据库表、接口清单都能快速列出来。我见过不少同学先去看源码、先想页面结果做了一半发现核心业务没覆盖又回头补功能。正确顺序一定是先从业务场景倒推。1.3 为什么这个题目适合做毕设从选题价值和完成度两个维度看这个题目有几个明显优势第一技术栈清晰且主流。PythonFlask负责后端接口微信小程序负责前端展示前后端通过HTTPJSON通信。这个组合在简历上也能写面试官基本都认。第二工作量适中。既不是简单的单页面数据库——那种论文往往写不厚也不是复杂到需要微服务、分布式的大项目——那种你又做不完。一个管理系统配合完整的前台小程序工作量刚好能填满一个毕设周期。第三论文素材充分。需求分析、系统设计、数据库设计、接口设计、页面实现、系统测试每个环节都能拿出实打实的内容。尤其是系统测试部分小程序真机预览截图、接口调试工具返回结果这些素材比纯Web项目更容易展示。第四演示效果好。答辩时在现场用小程序扫码真机演示项目进度查询、公告发布后的接收效果比在电脑上打开一个后台管理页面要直观得多老师也更容易给出正面评价。2. 技术栈选型逻辑为什么是Flask微信小程序而非其他组合2.1 Flask的优势与边界Flask在Python后端框架里属于轻量级代表。和Django对比它最直接的区别是Django把一切都给你装好了Flask让你自己挑着装。这是优点也是缺点关键看场景。对毕设来说Flask的优势是代码量少、入门快。一个简单的API服务用Flask几十行就能跑起来学习成本远低于Django。路由、蓝图、请求处理的机制非常清晰天然适合做前后端分离的接口服务。配合SQLAlchemy ORM数据库操作也很直观不用写原生SQL。生态里像Flask-CORS、Flask-JWT-Extended、Flask-RESTful这些常见扩展能覆盖毕设需要的绝大多数能力。但也要客观说主打轻量的Flask在大型项目里会有结构混乱、扩展冲突、异步支持原生不住等隐患。这点在论文的技术选型部分可以作为对比分析的论据反而显得你做过功课。我个人建议项目中只使用Flask核心CORS扩展SQLAlchemyJWT这几个组件尽量不要引入过重的第三方库。毕设系统不需要高并发也基本不需要消息队列、缓存这类中间件记着这个度项目才能保持麻雀虽小五脏俱全的简洁清晰。2.2 微信小程序的原生开发还是uniapp这是一个几乎每个人做小程序题目都会纠结的问题。我的看法分两种情况如果你的主要目标是把毕设做完、把论文写好并且你对前端不熟悉建议用微信小程序原生开发。原因在于原生开发不需要额外理解Vue语法页面文件wxml/wxss/js/json各司其职手册和社区资料海量小程序开发者工具本身有很好的页面调试能力报错信息也直观更关键的是开题答辩时老师问起页面如何渲染、组件如何通信你必须能用自己的话讲清楚原生开发更容易做到这点。如果你已经比较熟悉Vue或者之前用HBuilderX做过项目那用uniapp开发也是完全正当的选择。毕竟uniapp编译到微信小程序端的效果成熟而且以后扩展App或H5时复用度高。我见过不少同学用HBuilderX配合uniapp做毕设效率确实高。但definite有一个提醒uniapp编译出来的小程序在组件边界、样式隔离和部分API调用上和原生差异不小一旦遇到问题排查链路会比原生深一层。搜热搜词里uniapp微信小程序hbuilderx开发微信小程序的热度一直很高说明确实大量人在用但如果你是第一次做小程序我的个人建议还是把原生放在优先位置。2.3 前后端通信机制从wx.request说起小程序端和后端Flask通信靠的是微信提供的wx.request接口。这个接口本质上是HTTP请求支持GET和POST也支持PUT/DELETE等但有几个关键点需要注意域名要求线上小程序要求请求地址必须是HTTPS且已在小程序后台配置为合法域名。但开发调试阶段可以在开发者工具的本地设置里勾选不校验合法域名这样用http://127.0.0.1:5000或局域网IP就可以直接联调。这个细节几乎每个新手都会踩后面我会专门展开。请求封装小程序原生的wx.request是一个回调风格的API如果直接在每个页面里调用代码会很冗余。我建议在app.js或独立的utils/request.js里做一层Promise封装统一设置baseURL、请求头、token注入、响应拦截和错误提示。这样后面每个页面调接口只需要一两行核心代码。数据交互格式Flask端返回JSON小程序端res.data里取数据。建议所有接口统一返回格式比如{ code: 0, msg: success, data: {} }这样做的好处是前端不用每个接口都单独解析各种错误结构只要在封装层统一判断code就能拦截异常。3. 后端API设计从信息管理需求倒推接口清单3.1 数据库核心表设计数据库是整个系统最值得花时间打磨的部分。表设计得好后面的接口和小程序页面都会顺利很多表设计得乱后面写什么都难受。我的建议是第一版先别急着建表把你从业务场景里梳理出来的功能列表翻译成实体-关系然后设计表和字段。CR公司建设项目信息管理系统核心表大概可以分成这样几组表名用途说明关键字段User小程序用户表openid, nickname, avatar, role, phone, create_timeProject项目信息表project_code, project_name, project_type, location, manager, budget, start_date, plan_end_date, status, descriptionProjectMember项目成员关系表project_id, user_id, roleNotice通知公告表title, content, publisher, project_id(可空), create_timeSchedule项目进度表project_id, period, content, progress_percent, reporter_id, create_timeDocumentFile项目资料/文档表project_id, file_name, file_url, uploader_id, upload_time, file_typeFeedback问题反馈表project_id, user_id, content, status, reply_content, reply_timeAnnouncementRead公告已读记录表notice_id, user_id, read_time其中比较需要注意的是User表里不建议直接存微信昵称当用户名——微信昵称是用户自己的展示名不是登录凭据。登录凭据用openid它是用户在当前小程序下的唯一标识。另外项目状态字段建议用数字或字符串字典维护例如0-筹备中、1-在建、2-已竣工、3-已暂停。这样前端展示时做一次映射即可数据库里不用存中文避免维护混乱。还有一个毕设论文里的加分项用status字段的扩展值支持多项目筛选。比如首页要展示全部/在建/已竣工不同列表一个字段就能完成不需要额外建关联表。不过一定记得在表设计文档里说明状态字典的含义这点在答辩查重和讲解时都会让你更从容。3.2 登录鉴权完整链路小程序的登录流程和传统Web的账号密码登录完全不一样这是很多第一次接触小程序开发的同学习惯性用用户名密码去设计结果白白浪费了Session状态管理的复杂度。正确链条是wx.login()获取code- 把code传给Flask后端 - Flask端向微信服务器调用jscode2session接口 - 换取openid和session_key - 后端生成自定义token可以用JWT或简单随机字符串并关联openid - 返回token给小程序 - 小程序把token存到storage- 后续请求在header里带上token - 后端校验token、取出用户信息。这段链路是论文里最值得画图描述的部分也是答辩时老师会问的高频知识点。热搜词里微信小程序用code换token持续有人搜说明新手普遍对这块发怵。其实只要记住两件事就不怕第一code是一次性的5分钟内有效使用后立即失效所以后端必须尽快处理。不能在前端把code缓存起来复用。第二你的系统里登录状态本质上是当前openid对应的User记录是否存在。如果不存在就自动注册一条如果存在就更新一下最后登录时间。在Flask端我建议自定义一个装饰器require_login从请求头Authorization中读取token查表验证然后把用户对象挂到request.user上。凡是需要登录态的接口比如上传文件、提交反馈直接装饰一下即可这样接口代码干净很多。这里还要提一个小细节企业版小程序或个人主体小程序的部分能力受限比如获取手机号、获取实名信息。毕设阶段完全不用碰这些你别在需求分析里写获取用户手机号——微信现在已经把这类敏感信息授权收紧了你做不出来反而给自己挖坑。正确的需求表述是基于微信授权获取用户头像昵称建立用户档案。3.3 Flask接口清单与代码目录组织我按业务模块把接口列成一张清单方便你核对开发进度模块接口路径方法说明是否鉴权用户/api/user/loginPOSTcode换登录态否用户/api/user/infoGET获取当前用户信息是项目/api/projectsGET项目列表(支持状态筛选/分页)是项目/api/projects/GET项目详情是项目/api/projects/ /membersGET项目成员列表是进度/api/projects/ /schedulesGET项目进度历史列表是进度/api/schedulesPOST提交进度记录是公告/api/noticesGET公告列表(支持项目或全局筛选)是公告/api/notices/GET公告详情(同时标记已读)是文件/api/projects/ /filesGET项目文件列表是文件/api/files/uploadPOST上传文件是反馈/api/feedbackPOST提交问题反馈是反馈/api/feedback/myGET我提交的反馈列表是后端代码目录我推荐用蓝图Blueprint做模块化而不是把全部路由写在一个app.py里。这样的好处是接口多了之后可维护性强答辩时老师问你你的接口是怎么组织的你直接给目录结构比解释一坨代码强得多。一个实用但不过度的结构是这样server/ ├── app.py # 应用入口注册蓝图 ├── config.py # 配置信息数据库、密钥等 ├── requirements.txt # 依赖清单 ├── models/ # SQLAlchemy 数据模型 │ ├── __init__.py │ ├── user.py │ ├── project.py │ ├── notice.py │ ├── schedule.py │ ├── document.py │ └── feedback.py ├── api/ # 蓝图目录 │ ├── __init__.py │ ├── user_api.py │ ├── project_api.py │ ├── notice_api.py │ ├── schedule_api.py │ ├── file_api.py │ └── feedback_api.py ├── utils/ │ ├── auth.py # token校验装饰器 │ └── response.py # 统一返回格式工具 └── uploads/ # 上传文件存储目录3.4 一个可参考的Flask核心代码骨架你可以把下面的代码作为项目的起步骨架然后按自己的表结构调整。这部分不是用来直接交的最终代码但能让你快速掌握Flask项目的组织方式# app.py from flask import Flask from flask_cors import CORS from dotenv import load_dotenv import os from models import db from api.user_api import user_bp from api.project_api import project_bp from api.notice_api import notice_bp from api.schedule_api import schedule_bp from api.file_api import file_bp from api.feedback_api import feedback_bp load_dotenv() app Flask(__name__) CORS(app) # 允许跨域访问 # 数据库配置可以使用 MySQL 或者 SQLite app.config[SQLALCHEMY_DATABASE_URI] os.getenv(DATABASE_URL, sqlite:///cr_project.db) app.config[SQLALCHEMY_TRACK_MODIFICATIONS] False app.config[MAX_CONTENT_LENGTH] 16 * 1024 * 1024 # 限制上传文件大小16MB db.init_app(app) with app.app_context(): db.create_all() # 注册蓝图统一前缀 /api app.register_blueprint(user_bp, url_prefix/api) app.register_blueprint(project_bp, url_prefix/api) app.register_blueprint(notice_bp, url_prefix/api) app.register_blueprint(schedule_bp, url_prefix/api) app.register_blueprint(file_bp, url_prefix/api) app.register_blueprint(feedback_bp, url_prefix/api) if __name__ __main__: app.run(host0.0.0.0, port5000, debugTrue)# models/__init__.py from flask_sqlalchemy import SQLAlchemy db SQLAlchemy() from .user import User from .project import Project from .notice import Notice from .schedule import Schedule from .document import DocumentFile from .feedback import Feedback一个小建议如果毕设题库要求必须使用MySQL可以把SQLALCHEMY_DATABASE_URI换成mysqlpymysql://用户名:密码localhost/cr_project。如果本地环境没装MySQL先用SQLite把功能做完论文里写系统支持切换至MySQL数据库这也是一种合理的工程取舍。我自己做毕设时就是这么处理的答辩完全没问题。4. 小程序前台的核心页面与关键实现4.1 小程序目录结构与页面划分小程序端我习惯按tab页子页面来组织。tabBar一般设置三到四个菜单比如首页、项目、消息、我的。这样做的好处是核心功能都在一级入口用户路径短也符合信息管理系统高频操作不超3秒的设计原则。推荐目录miniprogram/ ├── app.js # 全局逻辑登录、全局请求封装 ├── app.json # 页面路由、tabBar、窗口样式 ├── app.wxss # 全局样式 ├── utils/ │ ├── request.js # request请求封装 │ └── util.js # 时间格式化、状态映射等工具函数 ├── pages/ │ ├── index/index # 首页项目概览最新公告 │ ├── projects/list # 项目列表 │ ├── projects/detail # 项目详情 │ ├── schedules/add # 新增进度 │ ├── notices/list # 公告列表 │ ├── notices/detail # 公告详情 │ ├── feedback/add # 问题反馈 │ ├── feedback/list # 我的反馈 │ └── profile/profile # 个人中心4.2 首页与项目列表的实现思路首页是整个小程序的门面也是答辩时最先演示的页面。我推荐这样设计顶部是用户信息条展示头像和昵称下面放一个概览卡显示用户参与或在建的项目数、待读公告数、待处理反馈数等统计信息。这部分数据可以由Flask后端提供一个聚合接口/api/home/overview一次请求把三个统计数字都返回小程序端就不用发三个请求了。再往下是最新公告区域横滑或列表展示最近三到五条公告点击进入公告详情。最后是常用功能宫格包含项目列表、进度填报、问题反馈、资料中心等入口。项目列表页相对简单但有两个细节要注意第一列表分页。不要一次性把全部项目都返回。Flask端做page和per_page参数返回data里包含total字段。小程序端用onReachBottom触发下一页加载isLoading防止重复请求。这个交互在我的答辩中被老师夸过因为论文里健壮性部分有的写了。第二状态筛选。在project_api里支持status查询参数小程序页面顶部放一个标签组全部/在建/已竣工。切换标签时重置页码并重新请求。4.3 项目详情、进度时间线与文件下载项目详情页是信息管理系统的核心页面。我用沉浸式设计来展示项目头部背景色用项目类型对应的渐变色下面是项目名称、项目编号、负责人、开工日期、投资金额等信息。关键功能是进度时间线。用scroll-view纵向滚动每条进度记录渲染成一个节点显示时间、填报人、进度百分比和文字说明。百分比建议用progress组件展示比静态数字直观很多。这里贴一个向接口发送进度数据的小例子// pages/schedules/add.js const app getApp(); Page({ data: { projectId: null, period: , progressPercent: 0, content: }, async submitSchedule() { const res await app.request({ url: /api/schedules, method: POST, data: { project_id: this.data.projectId, period: this.data.period, progress_percent: this.data.progressPercent, content: this.data.content } }); if (res.code 0) { wx.showToast({ title: 上报成功, icon: success }); setTimeout(() wx.navigateBack(), 1000); } } });文件下载部分需要注意微信小程序的限制wx.downloadFile下载的临时文件不会永久保存应用重启后就会失效。所以如果你做的是查看附件功能推荐逻辑是获取文件列表 - 调用wx.downloadFile下载到临时文件 - 调用wx.openDocument预览。如果要做保存到本地则需要把临时文件存到wx.env.user_data_path这也解释了为什么热词里保存附件 wx.env.user_data_path的搜索量不小——小程序的文件系统API对第一次用的人来说确实有门槛。4.4 表单交互单选框、日期选择、图片上传信息管理系统里表单场景很多比如进度上报、问题反馈、请假申请。小程序原生的表单组件虽然朴素但胜在稳定。我建议至少掌握这几个组件的基本用法picker项目类型选择、期间选择可以用modeselector配数组。datetime picker日期时间选择。如果你是uniapp开发注意uni-datetime-picker放在scroll-view里有时会出现弹层位置错乱这个后面排错章节会细说。radio-group单选场景例如反馈类型质量问题/安全问题/其他。textarea多行文本用于填写反馈内容或进度说明。button input普通的表单元素组合。表单页面的设计要点是用户输入最少化能从列表选的不要手输能自动带出的不要让用户填。比如上报进度时项目ID从列表页带过来期间用当前月份默认值用户只需要调整百分比和填文字说明这样的体验在答辩演示时很加分。另外涉及图片上传的场景小程序端不能用wx.request直接传文件必须用wx.uploadFile。对应Flask端用request.files.get(file)接收然后把文件保存到服务端uploads目录返回URL路径。注意开发者工具里的本地模拟器能访问127.0.0.1:5000但真机预览时127.0.0.1指向手机自己必须填电脑的局域网IP。这个错误是我见过最多人踩的没有之一。5. 开题报告与毕业论文的写作框架5.1 开题报告别只堆背景重点写清楚要做什么开题报告一般包含选题背景、研究现状、研究内容、研究方法、进度安排这些部分。很多同学的开题报告会写成政策引用合集从建筑行业信息化到移动互联网发展写了两千字背景但你具体要做一个什么系统反而没写清楚这是大忌。开题报告里最核心的部分是研究内容和预期成果。我建议用编号列出3-5条研究内容例如完成系统需求分析包括功能性需求和非功能性需求完成系统架构设计包括B/S结构下微信小程序前端Flask后端的分层设计完成数据库结构设计涵盖用户、项目、公告、进度、文件、反馈等核心实体完成后端RESTful API开发实现登录鉴权、项目信息管理、公告管理、文件管理等服务端功能完成微信小程序前端开发实现项目查询、进度上报、公告查看、问题反馈等移动端功能完成系统测试包含功能测试和真机兼容性测试并对测试结果进行分析每一条都对应后面论文的一章这样开题、中期、答辩都是同一个作战地图不会跑偏。5.2 论文目录边写代码边写论文别拖到最后毕设论文我见过两种极端一种是代码写完了才开始写论文结果只有两周时间只能把论文质量做得很粗糙另一种是前期把论文格式排好了但内容全是空话最后又推翻重写。正确的节奏是代码完成到60%左右时开始搭论文骨架后续每完成一个模块就补一章。下面这个目录结构是我推荐的摘要/Abstract第1章 绪论背景、意义、国内外现状、主要工作第2章 相关技术介绍Flask、微信小程序、SQLAlchemy、JWT等第3章 系统需求分析可行性分析、功能性需求、非功能性需求、用例图第4章 系统设计总体架构、功能模块设计、数据库设计、接口设计第5章 系统实现核心模块的思路与关键代码、页面展示截图第6章 系统测试测试环境、测试用例表、测试结果分析总结与展望在系统实现章节千万不要把全部源码贴进论文老师不会看查重还会很痛苦。正确的做法是挑一到两个最核心的功能点做详细代码讲解比如登录鉴权链路的Flask代码、小程序端request封装其余模块用页面截图业务描述来带过。页面截图尽量用真机截图不要用模拟器截图观感差别很大。系统测试章节要单独强调一下。很多同学只写系统可正常运行一笔带过这是论文最明显的短板。我建议用一个测试用例表把每个功能点都覆盖一遍测试编号测试项操作步骤预期结果实际结果TC-01用户登录小程序调用login后端用code换openid返回token并创建用户通过TC-02项目列表加载进入项目列表页下拉刷新正常加载第一页数据分页生效通过TC-03查看公告详情点击公告列表某条展示公告内容并标记已读通过TC-04上传项目文件选择文件并上传后端保存文件文件列表出现新记录通过表里测试项要覆盖正常流程、异常流程例如未登录访问、上传超大文件和边界情况例如空列表、分页末页这样测试章节内容量足够老师也挑不出毛病。5.3 图表制作用例图、ER图、架构图论文的图表直接决定了答辩老师的阅读体验。我可以给出几个小技巧用例图用UML工具画注意角色要区分普通成员和项目管理员每个角色的用例要画全这是需求分析章节的核心。ER图用数据库建模工具根据你的数据表自动生成把字段名都展示出来外键关系清晰即可。系统架构图画三层架构就行。展示层微信小程序 - 接口层Flask RESTful API - 数据层MySQL/SQLite再标出微信服务器作为第三方服务参与登录认证。业务流程图可以画用户登录、进度上报、公告发布三条核心流程每条流程图控制在5-7个节点别把图搞得太复杂。6. 联调排错实录毕设答辩前最值得检查的六个坑6.1 开发阶段的域名校验问题小程序真机调试时如果后端还在本地最常见的错误是request:fail url not in domain list。这是因为小程序默认只允许请求HTTPS合法域名。处理办法是在微信开发者工具 - 右上角详情 - 本地设置里勾选不校验合法域名、web-view业务域名、TLS版本以及HTTPS证书。真机预览时在手机端打开小程序-开发调试-打开调试也可以临时绕过。记住这只对开发和预览有效正式线上发布必须配置合法HTTPS域名。论文或答辩时如果被问到你可以说生产环境会部署到云服务器并配置HTTPS域名这已经足够。6.2 跨域与请求失败的区分Flask后端如果没配CORS浏览器调试会报跨域错但小程序端其实不一定会报跨域——它报的往往是request:fail。你不要把这两个概念搞混。解决跨域的最简单方式是在Flask中启用flask-corsfrom flask_cors import CORS CORS(app, resources{r/api/*: {origins: *}})如果用Flask-SocketIO等长连接CORS配置还会更复杂但你这题用不到不用考虑这层。如果小程序端仍然request:fail先去查后端Flask日志看请求到底有没有到达。多半问题出在IP地址不通、端口没开放或者防火墙挡掉了。6.3 code换token的常见翻车点小程序登录链路中code换openid的接口是https://api.weixin.qq.com/sns/jscode2session需要你提供appid和secret。这里的坑主要有几个secret要在微信公众平台的小程序后台获取不要把它硬编码在小程序前端代码里否则任何人可以拿到你的secret去盗刷接口这是安全红线。secret应该只在Flask后端作为环境变量维护。code只能使用一次如果连续调用两次jscode2session第二次一定报invalid code。接口返回的session_key不要返回给前端它只用于解密敏感数据普通场景根本不需要。Flask端一般用requests库调用jscode2session接口。如果你的环境里没有装requests记得加进requirements.txt。6.4 附件上传与下载的路径问题附件上传逻辑本身不难但有几个实际操作的坑。一是上传文件大小限制小程序uploadFile默认单个文件不能超过10MB不对其实是后端约束必须自己设MAX_CONTENT_LENGTH。我建议设成16MB以内太大在毕设演示时容易超时;图片压缩一下再传。二是保存路径的可访问性。后端把文件保存到本地uploads/目录后小程序要能通过静态URL访问它。最简单的方式是Flask挂一个静态路由from flask import send_from_directory app.route(/uploads/path:filename) def uploaded_file(filename): return send_from_directory(app.config[UPLOAD_FOLDER], filename)三是真机预览时的IP问题这个前面说过了不再重复。6.5 组件渲染异常日期选择器与滚动容器如果你用uniapp开发uni-datetime-picker放在scroll-view中部分基础库版本会偶发点击日期弹层不跟随或者弹层出现在页面顶部/底部的异常。根本原因是scroll-view会创建滚动上下文弹层组件的挂载位置受滚动层影响。解决思路有几种把日期选择器移出scroll-view由页面级组件承载或者给scroll-view加enhanced属性并调整show-scrollbar或者改用原生picker的modedate绕开复杂日期组件。我的经验是毕设里日期选择用原生picker完全够用不需要硬上花哨的第三方组件。6.6 基础库版本与组件兼容性小程序基础库版本决定了你能用哪些API和组件。比如wx.env.user_data_path是2.2.2版本才出现的wx.chooseMedia替代老版的wx.chooseImage也是从2.10.0开始。如果真机调试时某些API没生效优先去查基础库版本。在开发者工具里可以在详情 - 本地设置 - 调试基础库切换版本手机端可以在小程序右上角菜单的开发调试里打开vConsole看日志。基础库太低的话wx.getSystemInfoSync之类的老接口虽然还能用但新特性统统不支持还是建议把基础库调到一个较新且稳定的版本。提示如果你在开发中遇到接口请求能通但数据渲染不出来的情况先用开发者工具里的 Network 面板看响应体再用 Console 看有没有报undefined或not a function。这类问题80%是后端返回的字段名和小程序里用的字段名没对齐检查一下JSON字段命名即可。最后再说两句实在话做毕设这件事最重要的不是代码写得有多漂亮而是你能否把一个系统的需求-设计-实现-测试完整地讲明白。这套Flask微信小程序的组合优点在于每一层都有非常清晰的产出物接口文档、数据库ER图、小程序页面截图、测试用例表。只要你按着业务模块一个个推进每周做一个小模块时间安排上就不会太被动。我在实际带项目的过程中最后收尾时还遇到过几次让人头大的问题比如后端数据库改了字段但没迁移映射、上传目录权限不对导致文件写了但访问403、小程序端token过期后没有统一跳转登录逻辑。这些细节如果你能在开发早期就做好约定后面会顺很多。建议你在答辩前一周把项目从微信开发者工具 本地Flask的完整链路重新走一遍有条件就用真机连电脑热点演示提前暴露真机网络环境下的问题。稳扎稳打做完这些这个题目离一个优秀毕设就不远了。
返回列表