2026年江西省职业院校技能大赛小程序设计与开发高职组竞赛样题文章目录2026年江西省职业院校技能大赛小程序设计与开发高职组竞赛样题模块 A理论测试一、模块考核点二、模块任务以下为竞赛样题的理论样例模块 B需求分析一、模块考核点二、模块任务模块 C原型设计一、模块考核点二、模块任务模块 D功能开发一、模块考核点二、模块任务任务 1应用架构设计任务 2多页面的实现本套题目全模块答案及配套文件可联系博主获取联系方式在文章最下方模块 A理论测试一、模块考核点本模块分值为 10 分其中单选题 30 道0.1 分/题多选题 20 道0.2 分/题判断题 30 道0.1 分/题。本模块采用机考方式试题为单选题、多选题、判断题主要考查从事本职业应掌握的基础知识和专业知识。包括但不限于小程序的发展历程、小程序的基础知识、小程序UI设计、小程序数据存储、数据库、小程序网络编程、相关法律法规与课程思政等模块内容。二、模块任务以下为竞赛样题的理论样例(单选题)以下哪个不是正确的小程序入口A、微信对话分享进入B、点击 url 地址进入C、扫码进入D、附近小程序(单选题)以下哪个是页面启动时页面生命周期函数执行顺序A、onShow-onLoad-onReadyB、onLoad - onReady - onShowC、onLoad -onShow -onReadyD、onShow - onReady - onLoad(多选题)以下哪些方法可以有效提升小程序的渲染性能A、在 scroll-view 组件中渲染一个包含 1000 个节点的长列表B、使用自定义组件Component来复用复杂的 UI 模块C、在 Page 的 onLoad 阶段执行大量同步的复杂计算D、使用 wx:if 替代 hidden 来控制非首屏组件的显示与隐藏(多选题)关于小程序网络请求的说法以下正确的是A、wx.request 的 url 参数必须是 HTTPS 协议B、可以在 app.json 中配置 request 超时时间C、wx.request 默认会携带用户的 Cookie 信息D、服务器域名需在小程序管理后台的“开发管理”“开发设置”中配置到白名单(判断题)wx.clearStorage() 可以同步清理本地数据缓存A、正确B、错误(判断题)App() 必须在 app.js 中调用必须调用且只能调用一次不然会出现无法预期的后果A、正确B、错误模块 B需求分析一、模块考核点本模块分值为 20 分。本模块主要考查选手从事本职业应掌握的小程序设计与开发需掌握的需求分析能力。包括但不限于小程序的流程图、小程序的时序图、小程序的草图、小程序的类图等内容。二、模块任务竞赛选手需使用Visio 软件完成以下需求分析。用户在网上购买数码产品首先进入手机商城小程序登录或者注册验证用户身份如果通过则往下走流程即可如果不通过还需用户确认账号或密码有没有错误接下来用户浏览首页商品然后选择商品分类进入商品详情,可以选择加入购物车也可以返回继续浏览把商品加入购物车之后就可以提交订单如果提交失败则取消交易接下来就是支付相应金额购买完成后用户就可以退出小程序。请竞赛选手画出用户在网上购买数码产品的流程图。用户在网上购买数码产品首先应注册账号并发起登录请求小程序发送验证用户身份的请求给服务器服务器审核完成后返回验证结果接下来用户浏览首页商品小程序发送获取推荐商品的请求给服务器服务器返回商品信息接下来用户查看商品分类小程序发送获取分类信息的请求给服务器服务器返回各类数码产品接下来用户选择商品并购买小程序发送预下单的请求给服务器服务器处理完成后返回给小程序然后就可以唤起收银台接下来服务器查询支付方式后返回给用户并展示收银台然后用户就可以确认支付支付相应金额的费用给小程序小程序发送给服务器服务器处理扣款请求后再返回给小程序小程序再返回给用户支付结果通知。请竞赛选手画出在网上购买数码产品的时序图。用户有姓名、手机号码、优惠券等基本信息主要有浏览数码产品、购买商品、绑定手机号等基本活动。请竞赛选手画出用户的类图注请将所有信息翻译成英文。手机商城首页的页面顶部显示文字“手机商城”下方是宽度为基于页面 90%的搜索区搜索区下方是宽度为基于页面 90%的轮播图。轮播图下方是服务区该区域顶部分别是官方正品、包邮到家和全国联保区域底部由四个部分组成分别是限时优惠、真伪查询、以旧换新和官方服务。服务区下方是类别切换栏有默认、价格和销量三项类别。切换栏下方是商品展示区一行放置两个区域。页面底部是宽度为基于页面 100%的导航栏。请竞赛选手画出手机商城小程序首页的草图。模块 C原型设计一、模块考核点本模块分值为 20 分。本模块使用 AdobeXD 对小程序进行原型设计的工作流程、设计规范、基本方法和技巧能够使用 XD 创建和导入图形添加图像和文本组织内容使用资源使用蒙版、重复网络交互动画响应式布局创建原型预览原型分享文档、原型等。二、模块任务竞赛选手需使用Adobe XD 软件完成以下原型设计画板尺寸375px*667px。首页页面顶部显示文字“手机商城”。导航栏下方是宽度为基于页面的 90%、高度为 50px 的搜索区水平居中显示。内容分别是搜索图标和输入框输入框内提示文字 为“搜索”。图标宽高均为 25px输入框背景颜色为#F1FAFD、圆角大小为 15px。搜索区下方是宽度为基于页面的 90%、高度为 175px 的轮播图圆角大小为 15px。按照延迟两秒、持续一秒的间隔自动将两张图片进行横向的循环轮播。轮播图下方是服务区该区域顶部为水平均匀排列的三项文字分别为“官方正品”“包邮到家”“全国联保”字体大小为 12px每两项文字中间有一个实线边框。区域底部由四个部分组成分别为限时优惠、真伪查询、以旧换新和官方服务水平排列每一项包含上下两部分图片在上文字在下字体大小为 15px背景颜色为#F1FAFD。服务区下方是类别切换栏有默认和价格、销量三项类别水平排列字体大小为 15px。切换栏下方是商品内容展示区宽度为基于页面的 90%背景颜色为#F1FAFD每一项商品宽度 45%高度为 200px采取上中下布局上方为商品图片中间为商品名称下方为商品价格。一行放置两个商品一共有四行。商品图片宽高均为 130px圆角大小为 10px商品名称字体大小为 17px商品价格文字颜色为橙色。点击商品可以跳转到商品详情页。最底部的导航栏用一行多列的布局横向布局以下四个部分首页、手机分类、购物车、我的每个部分采用上下布局图片在上文字在下的形式展示。点击对应按钮可以进入对应的页面。商品详情点击首页的商品可以跳转到此页页面顶部显示文字“详情”。页面顶部左侧显示返回按钮点击可以跳转到首页。导航栏下方是宽度为基于页面的 100%、高度为 250px 的图片图片下方并排显示价格和销量背景颜色为#FFEEDA。价格文字颜色为橙色位于左侧销量文字颜色为#808080位于右侧。价格与销量下方为商品名称字体大小为 20px。商品名称下方为技术规格和用户评价呈左右布局左侧显示“技术规格”和 “用户评价”文字右侧显示详情内容。在下方是宽度为 185px、高度为 40px 的购物车按钮背景颜色为#FFA500文字颜色为白色。分类页面顶部显示文字“手机分类”。导航栏下方左侧是宽度为基于页面 25%的商品分类区背景颜色为白色每一项高度为 75px内容分别是全部、手机、耳机和充电器字体大小为 17px。制作出点击其中一项分类后所在项文字颜色变为#87CEEB 的效果并且左侧出现颜色为 #87CEEB 的边框。导航栏下方右侧是商品列表区背景颜色为#F1FAFD。每个区域背景颜色为白色内容分为左右两部分左侧为商品图片宽度为 120px、高度为 110px右侧为商品名称字体大小为 18px。一行放置一个区域一共有八行。点击商品可以跳转到商品详情页。最底部的导航栏用一行多列的布局横向布局以下四个部分首页、手机分类、购物车、我的每个部分采用上下布局图片在上文字在下的形式展示。点击对应按钮可以进入对应的页面。购物车页面顶部显示文字“购物车”。页面背景颜色为#F1FAFD。导航栏下方是宽度为基于页面的 96%、高度为 150px 的加购商品区背景颜色为白色。每个区域分为左中右布局左侧为一个复选框中间为图片宽度为 150px、高度为 100px右侧分为上下部分商品名称在上字体加粗显示下方左侧为价格文字颜色为橙色右侧从左至右依次为数量减按钮、商品数量和数量加按钮。在底部导航栏上方是宽度为基于页面的 100%、高度为 60px 的结算区背景颜色为白色。内容分别是全选复选框、“全选”字样、 “合计”字样、合计价格、“包邮”字样和结算按钮。最底部的导航栏用一行多列的布局横向布局以下四个部分首页、手机分类、购物车、我的每个部分采用上下布局图片在上文字在下的形式展示。点击对应按钮可以进入对应的页面。我的页面顶部显示文字“我的”。导航栏下方是宽度为基于页面的 100%、高度为 180px 的用户信息区背景颜色为从 #D5EDFA 到#FFFFFF 的渐变色。区域内容分别是用户头像、用户名、个性签名圆形头像框位于左侧宽高均为 90px头像右侧为用户名和个性签名。用户信息区下方是宽度为基于页面的 100%、高度为 163px 的功能区圆角大小为 10px制作出投影的效果。区域内容呈垂直排列分别是绑定手机号、消息通知、优惠券、购买订单每个区域设置底部边框图标和文字居左显示。第一项最右侧为手机号第二项最右侧为开关滑块其余两项最右侧无内容。点击购买订单可以跳转到订单页。最底部的导航栏用一行多列的布局横向布局以下四个部分首页、手机分类、购物车、我的每个部分采用上下布局图片在上文字在下的形式展示。点击对应按钮可以进入对应的页面。订单点击我的页面的购买订单可以跳转到此页页面顶部显示文字“我的订单”。页面顶部左侧显示返回按钮点击可以跳转到我的页面。页面背景颜色为#F1FAFD。导航栏下方是宽度为基于页面的 96%、高度为 100px 的订单区背景颜色为白色分为左右布局。左侧展示商品图片宽度为 150px高度为 100px右侧分为上中下三部分上方显示商品名称中间显示商品数量下方显示合计价格价格文字颜色为橙色。模块 D功能开发一、模块考核点本模块分值为 50 分。本模块基于产品原型设计复现产品使用小程序开发中常用的布局设计遵循布局和设计原则掌握自定义控件和一些主流的第三方控件的使用等熟练掌握小程序的生命周期熟悉掌握小程序常用控件熟悉动画、选择器、样式和主题的使用。掌握小程序常用的开发模式。熟练掌握面向对象OOP思想掌握模块化封装能力熟练使用 JS 或 HTML语言基础编程熟练使用集合、IO 流及多线程断点上传下载和线程池的使用掌握异步数据加载编程能力。理解产品需求描述及功能设计掌握软件产品化能力熟练处理与服务器之间的通信。掌握常用的数据存储等方式的使用掌握小程序中获取服务器数据等开发能力。二、模块任务在本阶段你将基于已经完成的成果继续开发小程序。如果你未能全部完成上一阶段的可交付成果请根据实际情况完成本阶段的开发任务确保本阶段交付成果的完整。选手说明在本阶段结束时你需要交付以下可交付成果以便所开发的系统能够准时完成。确保在整个系统开发中都遵循统一的风格确保在整个系统开发中提供合适的验证和错误提示信息确保在本阶段结束时所有相关的页面展示按钮、链接跳转、弹框都运转正常服务器数据获取与内容展示完整、真实、有效确保在整个系统中的名称都有统一的命名规范竞赛结束后提交源码。任务 1应用架构设计应用架构设计“手机商城”小程序利用开发工具微信开发者工具创建“mobie-phone”项目项目显示“手机商城”名称项目的tabbar 包含四个分别为首页、手机分类、购物车、我的请实现项目的基本框架设计。任务 2多页面的实现首页首页是小程序开屏显示的第一页首页的样式布局直接关系到用户的第一印象。首页主要包含以下几个部分导航栏、搜索模块、轮播图模块、服务模块、商品模块。1.1 导航栏部分。导航标题显示“手机商城”背景色及字体均设置默认。1.2 搜索模块。搜索模块包含搜索图标、输入框输入框内提示文字为“搜索”该模块宽度 90%高度 100rpx圆角 30rpx背景色为 rgba(225,237.243,0.3)水平居中显示。点击该模块跳转搜索页面搜索页面顶部显示相同的搜索模块在输入框内输入文字搜索模块下方根据输入的关键字显示搜索结果此部分样式可自行把握美观合理即可。1.3 轮播图模块。该模块宽 720rpx高 350rpx水平居中显示要求放置两张图片于其中自动衔接滑动轮播展示展示面板指示点。1.4 服务模块。该模块顶部为水平均匀排列的三项文字分别为“官方正品”“包邮到家”“全国联保”每两项文字中间有一个实线边框文字部分宽度 100%高度 50rpx使用 flex 布局。服务模块底部由四个小模块组成分别为限时优惠、查询真伪、以旧换新、官方服务模块。四个小模块并排排列使用 flex 布局均匀分布每个小模块内上方为图标下方为模块对应文字样式自拟合理美观即可。1.5 商品模块。该模块顶部为类别切换栏有默认和价格、销量三项类别使用 flex 布局使三项并排均匀排列每项高度为 90rpx。模块底部为商品内容展示区宽度为 100%高度自适应背景色为 rgba(225,237,243,0.274采用 flex布局每一项商品宽度 45%高度 400rpx底部外边距 2%采取上中下布局上方为商品图片中间为商品名称下方为商品价格。商品图片高度 70%宽度 100%圆角 20rpx商品名称字体大小为 35rpx商品价格字体颜色为橙色。要求点击默认下方商品默认排序点击价格商品依据价格从高到低排序显示点击销量商品依据销量从高到低排序显示。商品详情页面点击商品进入商品详情页此页展示商品的图片、销量、价格、名称、技术规格、用户评价以及购物车按钮2.1 导航栏。导航栏标题显示“详情”有返回按钮图标其他设置均为默认。2.2 商品详情页面内容。页面最顶部为图片图片的宽度 100%高度 500rpx图片下方并排显示价格和销量。价格颜色为 orange位于左侧销量颜色为 gray位于右侧价格与销量下方为商品名称。商品名称字体大小为 large设置行高为 80rpx商品名称下方为技术规格及用户评价。技术规格与用户评价呈左右布局左侧显示“技术规格”或“用户评价”文字右侧显示数据内容数据皆从接口获取。2.3 购物车按钮。按钮的样式部分可自行把握美观合理即可要求点击按钮出现消息提示“加入成功”并实现加入购物车功能点击后将数据保存至本地存储后续购物车页面调用数据手机分类页面此页面展示商品分类数据呈左右布局左侧为商品分类模块右侧为对应分类下的商品列表模块。点击商品可以进入商品详情页。3.1 导航栏。导航标题为“手机分类”其他均为默认即可。3.2 商品分类模块。手机分类页面使用flex 布局左侧商品分类模块宽度设置 flex 为 1高度 100%包含全部、手机、耳机、充电器四类每类独占一行高度 150rpx宽度设置为 100%水平垂直居中显示字体大小 32rpx点击某一类该分类的文字颜色变为 skyblue左侧出现颜色为 skyblue 的边框右侧对应的商品列表部分内容根据类别渲染数据。3.3 商品列表模块。手机分类页面使用flex 布局右侧商品列表模块宽度设置 flex 为 3高度自适应背景颜色设置值为 rgba(210,239,250,0.185。模块中每一项商品内容宽度设置为 100%高度 220rpx底部设外边距 2%商品内容分为左右两部分左侧为商品图片宽 300rpx高 220rpx右侧为商品名称左右两部分水平垂直居中对齐。点击商品能正确跳转到商品详情页面。购物车页面本页面是对加入购物车的商品进行展示与操作页面背景色为 rgba(225,237,243,0.274数据从本地获取要求能实现加购商品的选中、数量修改、全选与反选、总价计算的功能。4.1 导航栏。导航栏标题为“购物车”其他均设置为默认。4.2 加购商品模块。该模块宽度设置为 96%高度为自适应模块中每项商品宽度 100%背景色设置 white高度设置 300rpx底部外边距 2%每项商品的内容分为左中右布局使用 flex 布局左侧为一个复选框宽度设置 flex 为 1能实现商品选中功能。中间为图片模块宽度设置 flex 为 2模块内图片宽度 300rpx高度 200rpx。右侧宽度设置 flex 为 4分为上下部分右侧上方为商品名称字体加粗显示下方左侧为商品价格字体颜色orange下方右侧为商品数量及加减按钮从左至右依次为数量减按钮、商品数量、数量加按钮。点击减按钮商品数量减 1点击加按钮商品数量加 1。4.3 底部功能模块。该模块宽度 100%高度 120rpx背景色为白色固定定位于页面最底部模块包括全选复选框、 “全选”字样、“合计”字样、合计价格、结算按钮样式自行设置要求美观简洁勾选全选复选框时所有的商品项都为选中状态反之亦然合计价格根据所有选中状态的商品价格乘商品数量进行累加更新页面和本地存储中的购物车的数据。我的页面页面分为两部分上方为用户信息模块能实现头像上传功能下方为功能模块绑定手机号、查看购买订单等功能。5.1 导航栏。标题为“我的”其他均设置为默认。5.2 用户信息模块。该模块宽度 100%高度 360rpx背景颜色设置从#89ccf35b 渐变到#ffffff 的渐变色模块内容垂直居中显示包含用户头像、用户名称、个性签名头像位于左侧宽高为 180rpx圆角 50%设置左右间距为 5%要求点击头像实现头像上传功能。头像右侧为名称及个性签名内容及样式自拟。5.3 功能模块。该宽度 100%高度自适应自行设置阴影样式圆角 20rpx模块呈垂直排列且包含四项功能分别为绑定手机号、消息通知、优惠券、购买订单每项的宽度为 100%高度为 80rpx设置底部边框内容垂直居中显示。第一项最左侧为手机图标图标右侧为“绑定手机号”字样最右侧为绑定的手机号要求点击这一项后出现模态对话框模态框内能编辑电话号码点击确认后右侧手机号更改为编辑后的号码。第二项最左侧为消息图标图标右侧为“消息通知”字样最右侧为开关滑块。第三项最左侧为优惠券图标图标右侧为“优惠券字样”。第四项最左侧为订单图标图标右侧为“购买订单”点击购买订单跳转订单页面。购买订单页面该页面主要展示本地存储中购物车里面的商品数据页面设置背景色为 rgba(225,237,243,0.274。6.1 导航栏。顶部导航标题设置为“我的订单”并展示返回按钮图标其他默认即可。6.2 订单内容项。每一项宽度 96%水平居中显示高度为 200rpx背景色 white底部外边距 2%分为左右布局。左边展示商品图片宽度 300rpx高度 200rpx右边分为上中下三部分上方显示商品标题中间显示商品数量例如数量为 2 显示“X2”下方显示“合计”及合计价格颜色设置 orange。