2022年甘肃省职业技能大赛

小程序设计开发大赛（高职学生组）

（C卷）

竞争

种族

尝试

问题

工作站编号：

第2页/共19页

竞赛说明

一、竞赛内容

本试卷适用于该平台。它有一套综合性的问题，包括“需求点”。

《分析》、《初步设计》和《功能模块开发》3个模块，共10个任务，试卷

满分为100分。

任务

模块一 模块二 模块三

总分

积分

2、比赛时间

比赛时间：共240分钟。

三、竞赛要求

1、参赛者不得携带通讯设备等物品进入比赛场地。违反者将被视为作弊。

2、请根据大赛提供的比赛环境查看列出的硬件设备和软件清单。

材料清单是否齐全，电脑设备是否可以正常使用。

3. 比赛结束前，整合各试题的代码，按照比赛提供的方案部署运行。

电脑设备，并将所有成绩以目录格式提交至大赛组委会提供的U盘

公式如图1所示：

第3页/共19页

图1 模块提交目录格式

4、比赛结束后，请将U盘、试卷、答题卡一并提交。并描述设计

将书籍文档复制到计算机桌面。禁止使用一切物品（包括试卷、稿纸）

被带离球场。

5. 评委将根据各参赛队在参赛者电脑上公布的最终成绩进行评分。

依据。严禁在节目及跑步成绩中任何地方标注参赛队伍的任何信息，否则

视为作弊。

注：后端接口的访问地址为：:8080/wx

测试帐号：用户/

第4页/共19页

模块A需求分析

任务一：完成订单支付模块设计规范文档的编写（15分）

任务描述：分析订单支付模块的功能，根据任务10的功能需求，参考U盘中的“竞赛项目”

采用《试卷》目录下《需求设计规范（模板）》的文档格式来完成订单支付模块需求规范。

文件准备。

要求：文档必须符合软件规范要求。

提交工作：您需要提交订单支付模块需求设计规范。

得分：该任务共有15分。

第5页/共19页

模块B初步设计

商业背景

某高校拟在“智慧校园”微信小程序中新增“在线外语学习”功能模块，升级校园

传统的外语学习和考试模式为学生提供了更加便捷的语言学习和自学测试。该模块的主要功能是

它应该包括：注册和登录。登录后，您可以根据语言级别查看相应的练习和测试，并下载相应的资源。

以及考试等

任务要求：

1、进行“在线外语学习”模块功能的初步设计，满足应用场景；

2、使用软件绘制功能页面原型；

3、页面具有交互功能；

4、页面设计必须符合微信小程序整体设计规范；

任务2“主页”页面原型绘制（5分）

任务描述：

1、页面主体分为底部导航栏和主要内容部分。底部导航栏包括：“首页”、“类别”、

“我的”三大模块；

2、首页主要包括：广告轮播组件和推荐课程列表。课程列表主要包括：课程

图片、课程名称、课程介绍。

任务三“课程列表”页面原型绘制（5分）

第6页/共19页

任务描述：

1. 点击课程，进入“课程列表”页面。页面包括但不限于以下部分： 顶部

导航栏、过滤栏、过滤卡、课程列表；

2、各部分解释如下：

(1)顶部导航栏

包含后退按钮和页面标题。

(2) 过滤栏

单击过滤条件，在下拉菜单中显示过滤框。

(3)过滤条件卡

支持“语言”和“级别”两种分类过滤条件。每个条件支持多个选择和不同的条件组。

结合多选功能，具体过滤项如下：

①语言：英语、日语、法语；

②级别：2级、4级、6级。

（四）课程列表

课程列表主要包括：课程图片、课程名称、课程介绍。

任务4：“课程详情”页面原型图（5分）

任务描述：

1. 点击课程，进入“课程详情”页面。页面包括但不限于以下部分： 顶部

导航栏、课程详情卡、课程章节列表、模拟考试按钮；

2、各部分解释如下：

(1)顶部导航栏

第7页/共19页

包含后退按钮和页面标题。

(2) 课程详情卡

包括课程图片、课程名称、课程简介、课程章节总数。

(3) 课程章节列表

列出了课程的所有章节信息，每个章节都包含章节图标和章节名称。每一章都可以

要包含多个节信息，可以通过按钮控制下面节列表的显示和隐藏。每个部分都包含图标，

版块名称、资源类型（文章、视频、音频）。

任务5“模拟考试”页面原型绘制（10分）

任务描述：

1.点击课程详情底部的“模拟考试”按钮，进入“模拟考试”页面。该页面包含但是

不限于以下部分：顶部导航栏、试题展示区、音频播放区；

2、各部分解释如下：

(1)顶部导航栏

包含后退按钮和页面标题。

(2)试题展示区

试题显示区域显示试题列表。每题都是选择题，包括题干和答案选项（A、B、

C、D）、选择区（包括四个选择答案的选项按钮）。

(3)音频播放区

浮动在底部，包括播放进度条、当前播放时间、总时间、播放按钮/暂停按钮。

第8页/共19页

模块C函数编码

任务6：实现忘记密码模块（10分）

任务描述：在个人中心页面点击登录，点击账号登录，跳转到登录页面，点击忘记密码

代码跳转到密码重置页面如图3-1所示。输入您的手机号码获取验证码，输入验证码、密码、确认密码。

代码后，点击密码重置按钮提交即可重置密码，如图3-2所示。

图3-1 密码重置

第9页/共19页

图3-2 发送验证码

要求：

1. 完成页面布局。

2、输入手机号码获取验证码，输入验证码、密码、确认密码，点击密码重置按钮提交

提交重置密码，如图3-1所示。

3. 输入的数据需要进行验证。需要验证手机号码是否以1开头，第二位数字是否为

3、4、5、7、8之间的纯数字。密码不能少于6位。

4. 点击获取验证码，会提示“验证码已发送”，如图3-2所示。

第10页/共19页

提交您的作品：保存完成的页面。

得分：该任务共有10分。

其他：【API接口参考】

接口名称 API

发送验证码 api:8080/wx/auth/

重置密码API：8080/wx/auth/

详情请参考U盘\02竞赛平台手册\小程序开发平台API手册

任务7：实现首页广告轮播模块（8分）

任务描述：在首页实现轮播图片，如图3-3所示。

图3-3 轮播图

第11页/共19页

要求：

1、完成页面布局并实现首页轮播，如图3-3所示。

提交您的作品：保存完成的页面。

得分：该任务共有8分。

其他：【API接口参考】

接口名称API

首页轮播API:8080/wx//

详情请参考U盘\02竞赛平台手册\小程序开发平台API手册

任务八：实现商品分类首页功能（14分）

任务描述：进入首页，点击底部分类菜单，进入分类页面，显示一级分类和二级分类。

参见图 3-4。

第12页/共19页

图3-4 分类页面

要求：

1. 完成页面布局。

2. 左侧为一级分类，右侧为二级分类。二级分类包括类别名称和类别图标。转变

左边有一级分类，右边的分类信息链接替换。一级分类选定后，具有选择作用。

提交您的作品：保存完成的页面。

得分：该任务共有14分。

其他：【API接口参考】

接口名称 API

获取分类列表 api:8080/wx///

获取二级分类API：8080/wx///

详情请参考U盘\02竞赛平台手册\小程序开发平台API手册

第13页/共19页

任务 9：实现我的足迹功能（12 分）

任务描述：设计我的足迹页面。点击个人中心我的足迹，进入足迹页面。跟随时间

分组显示如图3-5所示。足迹产品包括图片、名称和价格。单击“删除所有足迹”可删除所有足迹。

有记录。

图3-5 我的足迹

第14页/共19页

图3-6 我的足迹

要求：

1、完成页面布局，“删除所有足迹”按钮吸附在底部。

2.显示足迹产品，按天分组，并显示时间，每行一个产品，产品包括

图片、名称、价格。

3、滑动到底部时提示“没有更多用户足迹”。

4. 单击“删除所有足迹”按钮，删除所有足迹。

提交您的作品：保存完成的页面。

得分：该任务共有12分。

其他：【API接口参考】

接口名称API

第15页/共19页

查询我的足迹API：8080/wx//

详情请参考U盘\02竞赛平台手册\小程序开发平台API手册

任务10：实现订单支付功能（16分）

任务描述：进入商品详情页面，点击“购买”，进入订单填写页面，如图3-7所示。选择收货地址并点击

您可以通过“支付”来支付订单费用。如果用户取消付款，该订单将更改为未付款订单。

图3-7 填写订单

第16页/共19页

图3-8 支付页面

第17页/共19页

图3-9 支付失败结果页面

第18页/共19页

图3-10 支付成功结果页面

要求：

1. 完成页面布局。

2. 在填写订单页面，您可以选择收货人信息。收货人信息包括姓名、是否默认、电话、地址。

地址，详细地址。

3. 显示商品总金额、运费、商品信息。产品信息包括图片、名称、价格和数量。

4. 点击支付。将显示付款金额。单击“确定”进行支付，即可完成订单支付，如图3-8所示。支付成功后会跳转。

支付结果页面如图3-10所示。取消的支付订单自动生成为未支付订单，并跳转至支付结果页面，如图3-10所示。

图 3-9。

5、支付成功结果页面显示“查看订单”和“继续购物”按钮，分别跳转到订单列表页面和商城首页。

页面上，如果支付失败，会显示查看订单按钮。点击跳转至支付订单列表页面。

6. 点击地址栏，跳转至地址管理。点击某个地址信息，自动跳转回订单页面

第19页/共19页

自动填写点击的地址信息。

提交您的作品：保存完成的页面。

得分：该任务共有16分。

其他：【API接口参考】

接口名称 API

查询各种状态订单列表 api:8080/wx//

查询用户购物车信息 api:8080/wx/cart/

查询用户默认收货地址 api:8080/wx//

添加到购物车 api:8080/wx/cart/add

订单支付api:8080/wx//

详情请参考U盘\02竞赛平台手册\小程序开发平台API手册