移动应用与开发 职业院校技能大赛 中职组

基于 HTML5 + CSS3 + JavaScript + MUI + HTML5Plus 技术体系,4小时实战命题开发,提交原型设计+APK+使用手册+展示PPT四大成果物。

移动应用与开发中职组 HTML5 / CSS3 JavaScript MUI 框架 HTML5Plus HBuilderX
≤4人/队
每队最多4名选手
4小时
技能实操时长
80%+20%
操作分+展示分
省级认证
升学加分利器
关于赛事

赛事介绍

移动应用与开发职业院校技能大赛(赛项代码 ZZ039)归属电子信息大类,竞赛内容分为技能操作(80%)和展示讲解(20%)两大模块。

移动应用与开发中职组 · 赛事概况

赛项名称:移动应用与开发(Mobile Applications and Development),赛项代码 ZZ039,归属电子信息大类,面向中职组全日制在校学生。

竞赛使用 HBuilderX 为官方开发工具,以 Android/MUI(HTML5 + CSS3 + JavaScript)+ HTML5Plus 技术体系完成移动 App 开发任务,每队 不超过 4 人,设队长 1 名,可配 1-2 名指导教师。

省级权威认证 升学加分利器 中职组专项赛道 ≤4人组队参赛
≤4人/队
参赛规模
设队长1名
4小时
技能操作
命题式实战开发
10-15分钟
展示讲解
团队路演评分
HBuilderX
官方工具
HTML5Plus运行环境

为什么要参加这个比赛?

对中职学生而言,这是含金量最高的技能竞赛之一

🏅

省级权威认证

获奖证书由教育厅认定,可用于中高职升学加分、评优评先,含金量高

📈

升学直通优势

参赛经历显著提升对口升学竞争力,多所高职院校将本赛事获奖纳入加分项

💻

真实技术积累

备赛系统掌握 HTML5+MUI+HTML5Plus,完整走一遍"原型→开发→打包"全流程

🤝

团队协作锻炼

≤4人团队协同开发,培养项目分工与沟通能力,提升职业综合素质

竞赛技术体系

四大核心技术模块,构成完整的移动 App 开发能力图谱

HTML5 + CSS3

语义化页面搭建,CSS3 动画与响应式布局,移动端适配

JavaScript ES6+

原生 JS 逻辑开发、异步请求(Ajax/Fetch)与后端接口对接

MUI 移动框架

MUI 组件库、页面路由栈、手势事件、下拉刷新、上拉加载

HTML5Plus API

调用设备原生能力:摄像头、GPS、本地存储、二维码等

技能实操 · 评分考查点

六大考查模块

技能实操满分 100分,占总成绩 80%,以下为六大考查点及权重

20%

图像处理 & UI 设计工具

熟练使用 Adobe Photoshop & Adobe XD,掌握工具面板、原型设计、高保真稿制作

Adobe XD 57.0 Adobe PS 2022 高保真原型稿 工具面板操作 画板布局
20%

移动 UI 平面 & 交互设计

掌握 UI 配色方案、组件布局、UX 交互设计方法,实现完整的移动端界面设计

UI 配色方案 组件布局 UX 交互设计 软件交互设计 App 高保真稿
JS 15%

移动前端基础编程

熟练掌握 HTML5、CSS3、JavaScript 编程,实现移动端页面功能逻辑

HTML5 语义化 CSS3 动画 JavaScript ES6+ DOM 操作 Flexbox/Grid
15%

UI 还原设计

基于产品原型还原 UI 设计,使用 Android/HTML5 常用组件进行布局,熟练使用第三方控件

MUI 组件库 原型还原 自定义控件 页面路由栈 手势事件
15%

业务逻辑 & 产品手册

理解 App 产品需求并实现功能逻辑,完成业务工作流,并按规范编写产品使用手册

需求理解 业务工作流 产品手册.doc 5大核心标准 数据完整性
15%

网络编程

熟练应用 App 网络通信技术,包括 Ajax、Fetch,以及 Volley、OkHttp、Retrofit 等网络框架

Ajax / Fetch Volley OkHttp Retrofit API 接口对接

竞赛现场软件环境

官方规定的软件版本,备赛务必使用对应版本熟练操作

Adobe XD
v57.0.X
UI原型设计
Adobe Photoshop
v2022
图像处理
HBuilderX
v3.1.22
App开发工具
Android Studio
v4.2.2
Android开发
Postman
v10.5
API调试
WPS
v11.1.0
文档编写
GitStack
v2.3.11
代码管理
Chrome
v111.X
调试浏览器
参赛资格

中职学校在籍全日制学生,每队不超过4人,设队长1名,可配1-2名指导教师

成果物要求

需提交:原型设计.xd + APK安装包 + 产品使用手册.doc + 展示讲解.ppt 共4项

展示讲解

技能操作结束后,团队路演10-15分钟,占总成绩20%,评委从技能、团队、创新三维度评分

竞赛流程

赛程流程线

从报名到展示,完整竞赛流程一览。技能操作 4小时 + 展示讲解 10-15分钟

STEP 01

报名准备阶段

竞赛前(具体以官方文件为准)

学校组织学生报名,确认参赛资格。每队不超过4人,设队长1名,配1-2名指导教师。报名获确认后不得随意更换选手。

确认参赛资格 组队(≤4人) 指定队长 配置指导教师
01
STEP 02

赛前熟悉场地

正式比赛前1天

统一安排参赛队有序熟悉场地,仅限在观摩区活动,不允许进入比赛区,不得与现场工作人员交流。

参观观摩区 了解场地布局 熟悉设备环境 备赛心理调整
02
STEP 03

技能操作(4小时)

竞赛当天

封闭命题式实战开发。提前10分钟分发任务书,可分析任务但不可操作设备。裁判长宣布开始后方可动手。

抽取赛位号 分析任务书 原型设计(.xd) App开发(APK) 产品使用手册(.doc) 展示PPT制作
03
STEP 04

成果物提交

技能操作结束后

按裁判指示上传4个成果物:原型设计.xd + APK安装包 + 产品使用手册.doc + 展示讲解.ppt,压缩为"赛位号+成果物.zip"存入U盘。严禁出现姓名、院校名称等个人信息,否则0分处理。

原型设计.xd release版.apk 产品使用手册.doc 展示讲解.ppt
04
STEP 05

展示讲解(10-15分钟)

成果物提交后

团队现场路演,讲解内容围绕技能水平、团队合作、创新创意三大维度。严禁出现个人姓名、学校名称等信息。此环节占总成绩20%。

技能水平(60分) 团队合作(20分) 创新创意(20分) 禁透露个人信息
05

四大成果物

竞赛结束时需提交以下四个成果物,压缩打包上传至U盘

🎨

原型设计.xd

Adobe XD + Photoshop

高保真App原型稿,每个任务至少一个画板,界面版式布局合理、美观,同功能复用样式

📱

智慧xxx.apk

HBuilderX 打包

使用MUI+HTML5+CSS3+JavaScript开发,打包为release版APK文件

📄

产品使用手册.doc

WPS / Office

遵循"用户导向、逻辑清晰、内容准确、简洁易懂、全面实用"五大核心标准编写

📊

展示讲解.ppt

WPS 演示

遵循"内容层级清晰、色彩搭配合理、图文结合得当、版式布局一致、视觉元素统一"原则制作

⚠️ 重要:提交的所有成果物中,严禁出现选手姓名、院校名称等个人信息,否则该成绩按零分处理。具体日期以官方文件为准,本站信息仅供参考。

常见问题

FAQ 解答

报名前的疑问,这里都有答案

参赛选手须为中等职业学校全日制正式学籍在校生,五年制中职一至三年级(含三年级)学生参加中职组比赛。世校赛金奖或国赛一等奖的学生,不能参加同一赛项同一组别的省赛。每队不超过 4 人,设队长 1 名,不得跨校组队。

竞赛统一使用 Android/MUI(HTML5、CSS3、JavaScript)技术进行 App 开发,官方指定开发工具为 HBuilderX(v3.1.22)。UI 设计工具为 Adobe XD(v57.0.X)和 Adobe Photoshop(2022版)。开发完成后需打包为 release 版 APK 提交。

竞赛分两部分:技能实操(4小时,占总成绩80%)+ 展示讲解(10-15分钟,占20%)。需提交4个成果物:①原型设计.xd(Adobe XD 高保真稿)②智慧xxx.apk(打包后的 release 版)③产品使用手册.doc ④展示讲解.ppt。提交时压缩为"赛位号+成果物.zip"存入指定U盘。

2026年样题主题为"智慧社区"App,涵盖社区首页、友邻社交、社区公告、家庭成员管理等四大任务模块。历届主题通常围绕"数字生活/智慧xxx"场景,如智慧党建、乡村民宿等。任务核心不变:首页+列表+详情+表单的完整交互流程。

有一定 HTML/CSS/JS 基础的同学,经过 2-3 个月系统备赛可达参赛水平。重点需掌握:MUI 框架组件用法(尤其是列表、轮播、导航栏)、HTML5Plus API 调用(plus.camera/storage等)、Adobe XD 原型设计,以及在 HBuilderX 中的打包发布流程。

展示讲解满分100分,分三个维度:技能水平(60分)包括操作规范性10分、技能熟练度20分、任务难易度20分、现场讲解效果10分;团队合作(20分)包括团队精神10分、沟通协作10分;创新创意(20分)包括创新意识8分、创新成效12分。讲解中严禁出现姓名和学校名称。

省级及以上获奖证书可用于中职升学考试加分、评先评优、奖学金申请等。多所高职院校在对口升学时会优先录取或加分录取技能竞赛获奖学生,含金量较高。建议结合自己学校的升学政策具体咨询班主任或教务处。

可在本页面「获取备赛资料包」填写信息,我们整理了历届真题、样题解析、MUI 框架教程、HTML5Plus API 速查表、Adobe XD 练习素材等资料。

备赛支持

获取备赛资料包

整理了历届真题、MUI框架教程、HTML5Plus API速查等备赛资料,扫码添加微信即可获取

资料包包含内容

📄

历届真题汇编

近3年竞赛真实题目整理

🎬

MUI 框架入门视频

系统讲解竞赛核心框架用法

📱

HTML5Plus API 速查表

常用原生接口调用手册

🗂️

参考作品源码

往届优秀作品代码结构参考

微信扫码添加

扫码添加获取备赛资料

添加微信好友,发送"备赛资料"即可获取完整资料包

微信二维码
1 长按二维码识别或截图保存
2 在微信中打开并添加好友
3 发送"备赛资料"获取完整资料包