1、第 31 卷 第 4 期 2023 年 8 月Vol.31 No.4Aug.2023电脑与信息技术Computer and Information Technology文章编号：1005-1228（2023）04-0058-04收稿日期：2022-08-01基金项目：江苏省教育科学研究院现代教育技术研究所课题（课题编号：2022-R-97726）作者简介：徐晓（1978-），女，江苏无锡人，副教授，主要研究方向：多媒体技术、信息管理。数字媒体交互设计认证考试分为基础理论考核和实操考核两个部分。理论考核占 90%，为了节约成本，为了使数字媒体专业构建“课证融通”的课程体系，逐步推动1+X职业技能
2、等级证书认证考试工作，提升职业教育质量和学生就业能力，对数字媒体交互设计资源包分类整合，创建数字媒体交互设计理论题库。对资源包的分类整合，能使得目前的教学方式和课程设置进行优化，可以增强职业能力的培养，让学生对于该专业的核心课程，有更深刻的认识。目前智能移动设备的使用率逐年提升，学生在课外使用手机进行学习知识的需求也在逐年增加，各种各样的学习软件遍地开发，但是目前基于微信小程序的学习平台并不是很多。从用户使用微信的频繁度来看，每天用户使用量已经高达 8 亿，因此开发基于微信小程序的学习平台非常有必要。目前微信小程序是十分主流的技术之一，它是一种轻量级的应用，当用户使用微信中“扫一扫”或“搜一搜
3、”的功能就可以打开，十分的便利，实现了各种应用垂手而得的愿望。为了让学生便捷地学习数字媒体交互设计理论题库，本文提出设计一个数字媒体交互设计在线练习微信小程序。该小程序可以摆脱课堂教学局限，作为传统课堂学习的一种补充与拓展资源，并且契合移动学习、泛在学习、碎片时间学习等理念，让更多的学生积极主动地掌握好数字媒体交互设计理论知识。基于微信小程序的练习题库的设计与实现以数字媒体交互设计资源包为例徐晓（无锡机电高等职业技术学校 江苏 无锡214028）摘要：数字媒体交互设计认证考试分为基础理论考核和实操考核两个部分。理论考核占 90%，为了让学生便捷地学习数字媒体交互设计理论题库，文章提出设计一个数
4、字媒体交互设计在线练习微信小程序。该小程序能够有效解决 1+X 数字媒体交互设计职业技能等级证书的通过率问题，同时该小程序具备了移动端的线上学习功能，基本上能满足学生的需要。关键词：微信小程序；数字媒体交互设计；云开发；弹性布局；资源包中图分类号：TP311.1文献标识码：ADesign and Implementation of Practice Question Bank Based on Wechat Small ProgramTake the Digital Media Interaction Design Resource Pack as an Example XU Xiao（Wux
5、i Machinery and Electron Higher Professional and Technical School,Wuxi 214028,China）Abstract：The digital media interaction design certification examination is divided into two parts:basic theory examination and practical operation examination.Theory assessment accounts for 90%.In order to enable stu
6、dents to learn digital media interaction design theory question bank conveniently,this paper proposes to design an online practice wechat mini program for digital media interaction design.This small program can effectively solve the problem of the pass rate of 1+X digital media interaction design pr
7、ofessional skill level certificate.At the same time,this small program has the online learning function of mobile terminal,which can basically meet the needs of students.Key words:wechat applets;digital media interaction design;development of cloud;elastic layout;the resource bundleDOI:10.19414/ki.1
8、005-1228.2023.04.010第 31 卷 第 4 期59徐晓，基于微信小程序的练习题库的设计与实现1数字媒体交互设计职业技能 1+X数字媒体交互设计职业技能 1+X是教育部1+X 标准共同开发的数字媒体交互设计职业技能等级证书课程，完成该级别课程课时学习后，即可申请教育部授权颁发的数字媒体交互设计职业技能等级证书初级证书认证。数字媒体交互设计职业技能主要面向基于移动互联网平台的 Web 产品界面设计与开发，充分考虑交互设计相关工作岗位的实际应用需求，紧密结合多个应用案例，使用项目指导学生掌握较实用的设计知识和技巧，在培养学生的实际动手能力和创新思维的同时提升学生的互联网产品设计思维
9、能力，实现课程要求与企业岗位技能要求的“零距离”对接。2微信小程序简介小程序是一种新的开放能力，具备轻便的特征。小程序不需要安装，而是通过扫描二维码等打开后直接执行，用完以后也不需要卸载。开发人员能够迅速地开发出一个小程序，继而小程序能够在微信内被方便地获得和传送，同时可以获得很好使用体验。一个微信小程序由.js、.json、.wxml、.wxss 四种文件构成。每个文件含义见表 1。表 1小程序文件构成文件名含义json 页面配置静态配置文件wxml 页面结构小程序框架设计的一套标签语言wxss 页面样式表一套用于小程序的样式语言，用于描述 WXML 的组件样式js 页面逻辑主要开发语言是
10、JavaScript3 系统关键技术本系统采用的开发技术主要是微信小程序开发技术。微信小程序通过注册功能建立起小程序的用户体系。采用微信小程序开发移动学习平台，传统开发中，开发者不仅需要关注前端的页面展示，还需要搭建后端的数据库，购买服务器和域名，如果是境内服务器，还需要备案等等。小程序上线后，开发者需要定期进行数据库维护、网络安全、负载均衡等工作。云开发中，开发者只需要关注前端的页面展示，后端的服务器、维护、安全处理等工作全部由腾讯云代替我们完成，方便了很多！小程序云提供的基础能力目前主要有如下三种：数据库、存储和云函数。数据库：是一个 JSON 数据库，作用是无需自建数据库，就能够在前端对
11、微信小程序的数据库进行操作，也可以在云函数中读写数据库。存储：就是把你的图片、音频和视频之类的资源文件，存储到里面，帮你生成链接，直接拿链接就可以用，就好像一个网盘一样。云函数：这个云函数，就是服务端的接口，你调用这个函数，也就是调用接口。云函数可以在客户端写，也可以在云开发控制台写，写完之后同步一下，两端就都有了。在云函数里，你可以进行计算，也可以操作数据库，把想要的结果以同步或者异步的方式返回给客户端。经过对比发现云开发要比传统开发更方便、更高效、更稳定可靠等优势。因此本文采用小程序云开发。4弹性布局微信小程序中经常会使用布局这一块的知识点，布局的传统解决方案是基于盒子模型的浮动布局，但是
12、浮动布局中存在 float 坍塌问题，对于垂直居中这类比较特殊布局也非常不方便。2009 年，W3C 提出了一种新的方案Flex 布局。Flex 布局能够方便和快速的响应式地实现各种各样的页面布局。Flex 布局能够实现元素在容器中的对齐、方向和顺序等功能，而且这些能是动态的和不确定容量的，它最首要特点就是可以调整它的子元素在大小一样的屏幕中可以采用最恰当的方式填充适宜的空间。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。本文在微信小程序页面中采用了弹性布局技术来完成界面布局设计，在界面布局的时候，会用到微信小程序的组件，包括 view 视图容器组件、image
13、图片组件、radio 单项选择器组件等组件的使用。5基于小程序的数字媒体交互设计题库程序设计5.1结构设计根据数字媒体交互设计认证考试内容，对资源包内容分类整合，分成理论题库和操作题库。理论题库又分成单选题、多选题、填空题和判断题。根据当前市面上已经存在的一部分小程序和结合实际情况，本文设计的功能结构包括用户注册、用户登录、练习答题、考试、错题收集、排行榜、下载资源等，如图 1所示。电脑与信息技术 2023 年 8 月60 图 1结构设计5.2页面布局设计本文设计的页面布局形式简洁，为了方便用户快速找到相关栏目，图标按钮下面写明功能。页面的色调采用绿色，绿色代表清新，希望，给学生一种舒适、心旷
14、神怡的感觉。界面布局如下，如图 2 所示。1）“登陆”界面，登陆成功以后，可以选择五种类型的题型进行练习或者进行考试。在练习或考试过程中的错题可以加入错题本2）“注册”界面，点击之后学生注册帐号、密码、头像等信息。3）“题库”界面，点击之后学生可以在线学习。4）“排行榜”界面，点击之后可以看到学生考试成绩的排行榜。提高学生的竞争意识，认真答题，努力提高做题的正确率。5）“下载文件”界面，点击之后学生可以下载排名、题库等电子表格。图 2页面布局5.3数据库设计云开发提供了一个JSON数据库(文档型数据库)，提供 2GB 免费存储空间，这个 JSON 数据库不同于传统的关系型数据库。传统的关系型数
15、据库像我们的excel表格一样，是有行有列的，每一列表示一个字段，每一行表示一个数据。而在文档型数据库当中，一个数据库可以包含多个集合。文档型数据库中的集合相当于关系型数据库中的表，文档型数据库当中的每条数据我们可以将其称之为 record/doc，在关系型数据库中是行 row,文档型数据库当中每一个字段叫做field，而在关系型数据库当中每一列叫做 column。如果在项目开发过程中我们经常要查询各个表之间的关系的话，使用关系型数据库会比较适合，但是如果我们需要对数据进行频繁的读写操作的话，文档型数据库的效率会更高一些。本文采用云数据库就无需自建数据库，就能够在前端对微信小程序的数据库进行操
16、作，也可以在云函数中读写数据库。云数据库中存放题库信息、用户登录信息、错题信息、收藏信息等，在后台对数据进行维护和更新。例如题库表含“题目内容”、“题目选项”、“题目答案”等列。学习者点击提交答案后，后台程序会根据数据库中提供的正确答案进行逻辑判断，在数据库中就会产生一条记录，若对比正确，数据库就会存储所得的分数；若对比错误，程序就会把这道题存储到错题数据库中。数据传递须要操作数据库，分为以下几个步骤，第一步：获取数据库的引用，其语句为“const db=wx.cloud.database(env:cloud1-4gbgheun08192b6e)”；第二步：获取该集合的引用，其语句为“db.collection(Question)”，“Question”表是本数据库的表名。第三步：对集合进行增删改操作。6模块实现6.1答题模块用户登陆成功以后，可选择相应的题型进行练习，如图 3 所示，然后进入答题模块，如图 4 所示，在“Page”文件夹中建立一个“exercise”文件夹，在“.wxml”文件中设计答题界面需要显示的内容，在“.wxss”文件里面设计字体的大小和颜色，在“.js”文件
