【《娱乐信息资源整合的微信小程序的设计与实现》14000字（论文）】

娱乐信息资源整合的微信小程序的设计与实现目录TOC\o"1-3"\h\u182561绪论 242781.1设计背景 265541.2选题意义 3141711.3论文内容安排 3158052相关技术简介 4124962.1微信小程序概述 454682.2主要技术与框架 4320302.3本章小结 5229383设计的前期准备 6197253.1需求分析 6193123.2功能模块设计 7112003.3系统模块设计 718813.3.1详细模块设计 746373.3.2功能模块图 780853.3.3页面跳转图 868033.4数据库设计 9310633.5本章小结 1204娱乐信息资源整合小程序的设计与实现 1332264.1设计环境的搭建 13104274.1.1小程序开发者申请 13254624.1.2开发工具的安装及环境配额的选取 13182024.1.3代码数据的上传备份 14238414.2功能模块实现 1589314.2.1主页面模块设计 1566644.2.2游戏信息搜索功能模块 16316254.2.3游戏信息整合界面 17249964.2.4游戏收藏功能模块 19125914.2.5文章阅读模块 2361284.2.6文章订阅功能模块 2447904.2.7管理员登陆模块 25183574.2.8管理员增删改模块 27249454.2.9简易工具之计时器模块 32122914.2.10简易工具之计算器模块 34243624.3本章小结 35303465软件测试 3786075.1单元模块测试 37280855.2兼容性测试 37324205.3用户体验测试 3853045.4系统总结报告 40160055.4.1系统的特色及优势 40268655.4.2存在的不足和问题 41282645.5本章小结 4169756系统上线部署 424424总结 441绪论1.1设计背景在移动互联的时代下，APP的成本居高不下，无论是获客（获得客户）还是保持客户的粘性（客户的依赖性与再使用的期望值）都已进入瓶颈，传统的互联网APP及相关的线上业务开展已无法满足很多用户的需求。微信作为国内最大的社交平台，目前月活跃用户量达十亿，微信已变成人们生活和交往的重要组成部分。微信小程序依托微信的庞大用户群体，已经成功地融入人们的日常生活，改变着人们的生活习惯。小程序是一种轻量级的应用，对于用户来说，相较于各种APP，微信小程序UI和操作流程更加简单，大幅度降低了用户的使用难度。对于小程序的开发者来说，开发一款小程序的成本更低，开发者可以将更多的精力投入到小程序的编写上，为用户带来更高的使用体验，同时相较于原生APP，微信小程序的推广都是基于微信本身操作，因此更容易更简单，更省成本。APP由于自身的缺陷，其用户增长迈入瓶颈期。为了应对这种情况的发生，互联网各个用户平台做出了应对的措施，各平台以自身已经拥有的APP为基础，对各自平台的类小程序进行相对应的开发。根据调查，排名在前五的应用就已经占据了小程序市场的大部分席位，虽然行业的领头者与后面的企业应用拉开了一定的差距，但排名靠后的应用依然还有较大的发展空间。小行业的分布也和大行业情况相似，网购始终位居第一，而美食方向的小程序也始终占据着第二的位置。在目前的市场发展阶段，买和吃这两类物质消费需求依然构成消费者群体的主要诉求。但是与此同时，其他方面的诉求也呈现逐步上升的趋势，在这当中，类似于wiki的信息整合小程序便是其中的发展分支之一。1.2选题意义微信小程序作为近几年来逐渐成熟的技术，其开发与运营成本都大幅的降低，同时小程序使用门槛低，无需下载便可直接使用，小程序的计算都在云端完成，数据库也可以直接使用腾讯提供的云数据库，因此越来越多的小型独立团队选择小程序来进行项目的开发。在网络逐渐普及后，人们获取信息的渠道也逐渐多样起来，最为知名的便是外国的wiki以及中国的百度。但小程序中有关资源的整理的相关项目却并没有多少，大部分小程序依然是以微信商铺以及美食导览为主，小程序需要更多种类的项目来完善小程序的生态，其中信息资源的收集整理就是其中的一种思路。而近几年来，越来越多的游戏公司进入了中国市场，例如索尼、微软、贝塞斯达以及暴雪等。但是由于政策原因，许多的游戏公司并没有在大陆建设服务器，因此访问这些网站的速度会非常的缓慢，打开一个界面要浪费大量的时间，要得知具体一个游戏的价格及其内容的效率会十分低下。其次，由于软硬件的发展，一个游戏中所包含的内容十分巨大，而当我需要查到一个具体信息时，只能通过wiki百科等渠道查找，而这些网站仅仅将这些数据堆叠在一个页面，查找起来十分困难，因此需要一个更为便捷的渠道来查询信息，综上所述，本次毕业设计就是按照以上设计思路进行开发，借助小程序的便捷性，完成相关页面的开发，制作一个便捷明晰的娱乐信息资源整合小程序。1.3论文内容安排论文将分为六个部分对娱乐信息资源整合小程序的设计与开发进行内容描述的安排，其主要工作概括如下：第一部分：主要为绪论；对该项目的设计背景以及选题意义进行概述，说明该课题的由来以及主要工作思路的简单阐述。第二部分：主要为相关技术的简介；对微信小程序进行简单描述，并对相关技术与框架进行介绍。第三部分：主要为小程序设计的前期准备；简述需求分析，并对具体的功能模块、系统以及数据库进行详细的规划与设计。第四部分：主要为小程序具体的设计与实现；对环境的搭建和具体功能的实现进行描述。第五部分：主要为小程序进行测试；对小程序的各个模块进行测试情况进行介绍，同时对小程序的具体体验进行反馈报告。第六部分：主要为软件上线部署；对小程序具体的上线部署的过程进行介绍。2相关技术简介2.1微信小程序概述微信小程序是一种基于微信这一APP的轻量级应用，用户不需要下载安装，只要手机里拥有微信，即可使用的一种应用。用户可以通过扫一扫或搜索功能找到自己需要使用的小程序，用户不需要关心是否安装太多了小程序，因为小程序相比于传统的App，只会占用一小部分手机的存储空间。在微信的研发团队官网上有一段关于微信小程序的介绍：小程序是一种新的开放能力，开发者可以快速地开发一款小程序。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验。因此微信小程序是一种优秀的应用搭建媒介，解决了很多传统App存在的问题。小程序相较于传统软件来说最大优势便是轻便快捷，用户无需单独下载，在任何机器上都可以即开即用。同时小程序还具有跨平台的特性，不像传统App，需要对安卓和IOS系统做单独优化，小程序由于依托的是微信平台，因此其在任何平台都可以使用，有效的调高了用户的效率。2.2主要技术与框架小程序提供了官方框架MINA，包括逻辑层和视图层。逻辑层是由JavaScript编写而成，视图层由WXML和WXSS配合组件构成，同时该框架还提供了数据传输和事件系统，以便开发者进行对应功能的开发。小程序由JavaScript编写，以实现逻辑层对应的功能。在开发者完成整个程序的开发之后，将会把所有的代码打包成一份JavaScript，以便小程序在运行时可以直接启动，打包后的代码会一直运行下去，直到小程序被人为销毁；小程序在基于传统App的基础上，还为开发者提供了许多更加人性化的功能，例如指定页面的初始数据，增添了Page方法等等，逻辑层可通过这些方法将处理后的数据发送给视图层，将数据进行渲染和反馈；小程序还额外提供了许多丰富的原生API，以方便开发者完成一些特殊功能的实现；小程序的每个页面都具有独立的作用域，以提供模块化的功能。视图层主要负责视图的显示，WXML页面、WXSS样式表和组件都是视图层的内容。WXML的中文名是微信标记语言，其规则类似于HTML，两者都是使用标签来构建页面结构的语言，WXML具有数据绑定、条件渲染、模板和引用等功能；WXSS文件的中文名是微信样式表，这是一种样式语言，用于描述WXML的组件样式。WXSS具有CSS的大部分特性，同时WXSS也具有一些独有的特性，例如样式导入和尺寸单位等；组件是WXML页面的基本单位，开发者可以利用组件来在小程序页面上实现按钮、图片、文本等功能图2.1小程序应用生命周期如图2.1所展示的生命周期流程，小程序在启动时首先会触发onLaunch方法；当页面准备展示时，小程序便会调用onShow方法；当小程序进入手机后台时，会调用onHide方法；当小程序再次被唤醒时，则会再次调用onShow方法。如图2.2所展示的页面生命周期流程，当小程序启动时会触发onLaunch方法，展示时调用onShow方法，在这里如果是初次渲染，则会额外调用onReady方法，进入后台调用onHide方法，回到前台调用onShow方法。页面关闭时，相比生命周期流程，会额外调用onUnload方法来关闭小程序的页面。图2.2小程序页面生命周期2.3本章小结本章主要为相关技术的简介。介绍了微信小程序的特点以及优势，同时理清了小程序的框架以及小程序运行的生命周期，在熟悉了小程序的基本知识后，才能有更加清晰的思维对项目进行开发。

3设计的前期准备3.1需求分析由于单机游戏在国内受众有限，因此相关信息整理的网站与应用并不多，通过调查后，也仅仅有灰机wiki、NGA玩家论坛、二柄APP以及游戏时光APP做的比较完善。另一方面，大部分游戏厂商采取的政策往往是半月或整月的打折制度，这就导致用户常常需要登陆机器去查询当月的打折力度。这对于没有租借VPN的用户十分不友好，这一部分用户由于没有合适的手段来高效的接收外国服务器的数据，导致他们在进行数据查询时，难以快速准确的定位到目标游戏。而本次毕业设计便是针对这一部分用户，借助小程序的便捷性，实时更新不同厂商的游戏数据，以便用户通过小程序，便可查找自己需要的数据。该项目的主要目标是数据查询，因此完成项目的主要目的便是简易方便，随时随地都可以进行查询。因为传统的App需要下载安装，而仅仅为了查资料而安装一个App有些浪费资源，其开发和推广的难度也非常大。因此将目光投向了微信小程序。该项目大部分的页面都是用户在前端进行数据的查询，很少有需要交互的界面，虽然App可以实现完整的功能，但微信小程序更加符合该项目的开发的理念，而且微信这一应用程序基本上每个人的手机里都会装载，因此需要该系统的人可以非常简便的访问。对于资料查询类小程序来说，页面设计的布局也同样是一个非常重要的课题，一个好的页面布局，能让用户快捷清晰地定位到自己需要的信息页面，大大提高了查找的效率。但如果做不好页面布局，不仅页面会显得十分臃肿，页面的在不同设备的结构也会发生变化，用户更是难以定位到需要的数据，因此，好的页面设计，需要做到以下三点：(1)合理的页面版式，一个合理的页面版式，需要准确的风格定位，这是页面设计的基础，合适的风格设计会让访客准确地解读信息。(2)页面结构清晰，功能性和网站结构的整体统一是是保证页面可读性的重要一环，首先页面最重要的功能便是传递信息，使浏览者在最短的时间内获得信息，因此好的页面设计需要充分考虑用户的交互体验，同时保证首页、栏目页和内容页等各个页面的版式遵循统一的风格，使用户不会产生疲惫感。(3)视觉效果的使用，对比和强调重点是视觉效果的核心，恰到好处的对比会增加刺激性，是用户的心理产生愉悦感，但过分的对比会造成刺激过度，因此在设计的过程中需要注意不要过度使用对比；而强调重点同样可以使页面条理分明，界面干净整洁，让每个页面都围绕重点去规划。3.2功能模块设计(1)游戏信息整合与分类功能对当今已经发售的热门游戏进行整合，并标注当前游戏价格；同时对游戏类型进行分类，以便用户快速定位到目标页面。(2)游戏信息搜索功能可查看不通条目的详细内容并进行收藏操作，以便快速查找，同时实现模糊搜索，便于只知道部分关键字的用户进行查询。(3)管理员增删改模块可以便于开发者通过管理员账户来对游戏内容进行添加、修改、删除，以便随时更改游戏的价格以及类目等相关信息。(4)文章阅读功能小程序内带有文章阅读模块，可供用户阅读开发者整理的优秀文章。(5)收藏功能小程序游戏页面和文章页面内置收藏功能，以便用户想要多次阅读文章或关注游戏价格时可以快速定位到对应页面。(6)工具模块小程序内自带一些简易工具，方便用户在游戏时遇到问题可以快速解决，增加小程序的可用性，以方便用户的使用3.3系统模块设计3.3.1详细模块设计数据整合子模块：包含数据的整合，分类，搜索等功能。要求用户可以在该模块中快速的找到自己需要的信息，同时搜索还需要完成模糊查询，只需要输入单字即可完成搜索。用户管理子模块：包含管理员登陆，数据的增加、删除、修改等功能。要求管理员可以在交互界面便对数据库里的信息进行操作，目的是方便开发者随时随地的根据具体的信息变化进行修改。工具子模块：包含简易计算器，计时器等功能。要求该模块包含多种好用的简易工具，为用户使用的小程序提供各种各样不同的功能。文章子模块：包含文章的正文，标题，以及插图等功能。要求用户可以在小程序中便可进行文章的阅读，同时做到界面简洁直观，用户可全身心地投入到文章中；收藏功能提供了一种定位方式，以便用户可以快速找到自己想要阅读的文章。3.3.2功能模块图功能模块图如图3.1所示图3.1功能模块图3.3.3页面跳转图系统流程图是对软件的系统运行逻辑进行概括，如下图3.2所示。其中管理员接口提供游戏的添加、修改和删除界面。图3.2系统流程图3.4数据库设计对于该项目，数据库有使用本地数据库和使用云数据库两种选择。云数据库的优势在于可以减少项目包的大小，加快小程序的加载速度；其次，开发者可以更加专注于核心代码的开发，而不用时刻关注数据库的运行状况，大大降低了运维难度，而腾讯云提供的服务也更加稳定与安全。本地数据库的优势则在于不限制小程序在单一的开发平台，可以在多个平台同时上线，并且由于没有云端数据库的种种限制，因此可以完成更多的功能。云端数据库和本地数据库同样有各自的缺陷。云端数据库首先的问题便是云函数的调用与返回处处受限，其次数据库的读取也十分缓慢，因此云端数据库不适合用户交互太多操作的项目。本地数据库的问题则在于开发者自身电脑机能的限制，当数据过多时，本地数据库的运行并不稳定，而且在开发过程中，还要花费大量的精力去对数据库进行监控，大大降低了开发者工作的效率。综上所述，由于该项目的定位，页面中大部分的操作都是用户通过前端来查找需要的内容，其中交互的功能很少；此外，由于微信开发者工具自身的问题，上传调试不能超过2MB，而由于本项目是信息资源整合的类别，项目中有大量的图片与文字，数据库的大小很容易超过调试大小上限。因此在多方面因素的考虑后，最终选择云端数据库来进行微信小程序的开发。本项目中的云端数据库，由九个集合组成，集合名称及其作用分别为：banners：首页轮播图集合，如表3.1所示。games：游戏详情集合，如表3.2所示。essays：文章内容集合，如表3.3所示。lists：游戏类型集合，如表3.4所示。menu：主页导览集合，如表3.5所示。suggestion：意见反馈集合，如表3.6所示。users：管理员登陆集合，如表3.7所示。game_collect：游戏收藏集合，如表3.8所示。essay_collect：文章收藏集合，如表3.9所示。表3.1banners集合序号字段名称数据类型允许为空Y/N唯一Y/N主键说明1_idstringNY√唯一id值2_namestringYN轮播图名称3srcstringNN图片路径4urlstringNN跳转路径表3.2games集合序号字段名称数据类型允许为空Y/N唯一Y/N主键说明1_idstringNY√唯一id值2__openid_stringNN用户的openid3detailstringNN游戏概述4liststringNN游戏类型5namestringNN游戏名6pricestringNN游戏价格7srcarrayNN游戏图片表3.3essays集合序号字段名称数据类型允许为空Y/N唯一Y/N主键说明1_idstringNY√唯一id值2mainarrayNN第一大段3namestringNN文章标题4nextarrayNN第二大段5srcarrayNN文章插图6tittlearrayNN小标题表3.4lists集合序号字段名称数据类型允许为空Y/N唯一Y/N主键说明1_idstringNY√唯一id值2srcstringNN游戏类型图片3namestringNN游戏类型名称表3.5menu集合序号字段名称数据类型允许为空Y/N唯一Y/N主键说明1_idstringNY√唯一id值2srcstringNN主页导航图片3namestringNN主页导航名称4urlstringNN主页导航路径表3.6suggestion集合序号字段名称数据类型允许为空Y/N唯一Y/N主键说明1_idstringNY√唯一id值2_openidstringNN用户的openid3contentstringNN发布的建议4idstringNN发布的顺序表3.7users集合序号字段名称数据类型允许为空Y/N唯一Y/N主键说明1_idstringNY√唯一id值2_openidstringNN用户的openid3pwdstringNN管理员密码4usernamestringNN管理员用户名表3.8game_collect集合序号字段名称数据类型允许为空Y/N唯一Y/N主键说明1_idstringNY√唯一id值2_openidstringNN用户的openid3game_checkedstringNN收藏是否被选中4game_idstringNN游戏的id5game_namestringNN游戏名6game_numstringNN游戏收藏编号7game_pricestringNN游戏价格8game_srcstringNN游戏图片表3.9essay_collect集合序号字段名称数据类型允许为空Y/N唯一Y/N主键说明1_idstringNY√唯一id值2_openidstringNN用户的openid3essay_checkedstringNN收藏是否被选中4essay_idstringNN文章的id5essay_namestringNN文章的标题3.5本章小结本章的主要内容是确定了各个模块的设计与具体功能的实现，完成了页面跳转逻辑的构建，与数据库的设计相辅相成，共同呈现了娱乐信息资源整合小程序的基本框架。前期准备的完善对于项目有至关重要的作用，不仅指导了具体的项目开发方向，还为项目中遇到的困难提供了解决的指导方向，开发的前期准备对于项目本身而言可谓重中之重。

4娱乐信息资源整合小程序的设计与实现4.1设计环境的搭建4.1.1小程序开发者申请开发者首先需要在微信公众平台上注册一个小程序账号，然后选择注册的账号类型为“小程序”，并完成账号信息、邮箱激活、信息登记页面的填写。在完成所有所有注册信息的填写后，就可以扫描页面提供的二维码进行身份的确认。在完成微信公众平台的注册后，还需要填写所开发小程序的基本信息，即小程序的名称、头像、介绍以及小程序的服务类目。在完成所有项目的填写并通过审核后，就会获得AppID，也就是开发权限。4.1.2开发工具的安装及环境配额的选取在完成初期准备工作后，就可以在微信官方文档的小程序界面下载官方提供的专属开发工具，即微信web开发者工具，其URL地址为：“/miniprogram/dev/devtools/download.html”。在该页面根据自己的操作系统选择对应的开发版本。完成开发者工具的安装并登陆后，会分配到如图4.1所示的云开发免费资源。图4.1云开发免费资源由于本项目在开发后期过程中需要大量访问数据库，因此购入了基础版2的配额，以便开发时使用，如图4.2所示。图4.2云开发基础版2配额4.1.3代码数据的上传备份代码上传的作用是，通过微信小程序或Github提供的远程仓库，将开发者所编写的代码上传到仓库中，当开发者因技术原因丢失源代码后，可把远程仓库中代码的直接导入到微信开发者工具中，为开发者提供了一层技术保障。上传备份流程如下：(1)点击开发者工具右上角的版本管理。(2)初始化本地仓库，如图4.3所示。图4.3初始化本地仓库(3)配置git账号的用户名和密码。(4)配置远程仓库，如图4.4所示。(5)完成相关配置后，点击推送按钮，推送当前的代码。(6)成功上传后，可在仓库中找到备份的文件，如图4.5所示。图4.4配置远程仓库图4.5远程仓库空间由于微信开发者工具自带Git库，便于开发者随时上传代码进行备份。除此之外，开发者还可以通过Gitbash，先配置本地Git库，并在Github上配置远程仓库，以存放代码，进行备份。4.2功能模块实现4.2.1主页面模块设计娱乐信息资源整合小程序的主页面主要开发思路是页面版式合理和页面结构清晰，突出主页面的各个板块非常重要。因此将主页面分成了四个板块：第一个板块便是游戏信息搜索功能，能让用户看到搜索图标就可以立即明白小程序拥有搜索功能，让其搜索自己需要的游戏信息；第二个板块选择放置了滑块视图容器，其目的是通过四个模块，让用户能大概了解小程序中大概有什么内容，为之后用户使用小程序做出预想铺垫；第三个板块选择了四个跳转图标，分别对应了小程序中所有的游戏分类、当前主流游戏机硬件配置、管理员登陆后台界面、以及娱乐信息资源整合小程序的介绍。以四个不同的页面跳转实现不同的页面功能；第四个板块选择直接放置小程序中已经整合后的游戏的部分信息，也就是游戏封面、游戏名称以及当前游戏价格。如此分配的目的有两个，第一是用户在主页面浏览时可以通过封面浏览，确定自己感兴趣的游戏，并通过点击图标或名字直接进入浏览页面，阅读相关的游戏信息。第二是方便一些已经确定要购买特定游戏的用户，在主页面便可以直接看到当前游戏的实时价格，确定用户对该价格是否符合其预期，以判断自己是否可以入手该游戏。4.2.2游戏信息搜索功能模块在主页面中，主要实现的模块是游戏信息搜索功能，其具体实现如图4.6所示。图4.6搜索功能核心代码如下：index.jsshowInput:function(){//显示文本框输入的信息this.setData({inputShowed:true});},clearInput:function

()

{//清空文本框中的所有信息this.setData({inputVal:""

});},db.collection('games').where({name:db.RegExp({//使用正则查询，实现对搜索的模糊查询regexp:

e.detail.value,

//从搜索栏中获取的value作为规则进行匹配options:'i',

//大小写不区分}),}).limit(10).get({success:

res

=>

{console.log(res)that.setData({search_list1:res.data})}})在完成搜索功能的基础上，我进行了优化，从定向搜索优化为模糊搜索，以便用户可以只通过部分关键字就完成游戏查询。模糊查询的流程图如图4.7所示。图4.7模糊查询流程图4.2.3游戏信息整合界面游戏信息界面存在的意义便是为用户提供一个页面，其内部有游戏内截图、游戏名称、当前价格以及游戏简介，目的是让一些对游戏封面产生兴趣的用户去进一步了解这个游戏。游戏信息整合页面效果如下图4.8所示。图4.8游戏信息整合页面核心代码如下：gameDetail.jsdb.collection('games').doc(options.id).get({//通过游戏的唯一id来获得games集合中的数据

success:function(res){

console.log('游戏详细信息已获取',res)

that.setData({//将获得的数据带入到各个变量中以便使用

game_src:res.data.src,

game_name:,

game_num:res.data.num,

game_price:res.data.price,

game_detail:res.data.detail,

game_xq_src:res.data.game_xq_src,

id:res.data._id

})

},fail:function(res){

console.log('商品详细信息获取失败',res)

}})4.2.4游戏收藏功能模块用户可以通过收藏的功能，记录下用户感兴趣的游戏。因此收藏模块便是比较重要的功能，效果如图4.9所示。图4.9收藏功能核心代码如下：gameDetail.jsdb.collection('game_collect').where({//查询数据库中是否有相同id

game_id:that.data.id

}).get({

success:function(res){

console.log(res)

if(res.data

==

""){

db.collection('game_collect').add({

data:{//将数据写入game_collect集合中

game_name:that.data.game_name,

game_src:that.data.game_src[0],

game_price:that.data.game_price,

game_num:1,

game_id:that.data.id,

game_checked:that.data.game_checked

},}})game_collect集合添加收藏后效果如图4.10所示，集合内信息如图4.11所示图4.10收藏成功页面图4.11收藏成功集合当用户已经购买收藏的游戏，不再需要相关的游戏信息时，需要将收藏内的数据删除，这时就需要删除功能来完成该操作。为了实现该功能，我使用了云函数这一方法以达到删除的目的。实现云计算的过程分为三步：(1)在cloudfunctions中新建game_delete云函数。(2)在新建的云函数game_delete中，编写index.js文件，该文件中的代码便是实现删除功能的方法。云函数game_delete：const

cloud

=

require('wx-server-sdk')//

云函数入口文件cloud.init({

env:'cloud-8grfimpz2d799b21'})//绑定指定项目环境const

db

=

cloud.database()const

_

=

mand//定义连接云数据库exports.main

=

async

(event,context)

=>{

try{

return

await

db.collection('game_collect').where({

game_checked:"true"

}).remove()//实现删除功能

}

catch(e)

{

console.error()

}}(3)在找到集合中的所有项目后，判断game_checked的字符串是否为true，也就是是否被选中，如果选中，则remove()方法来删除收藏集合中的数据在完成云函数的编写后，需要将云函数上传并部署后，才能在js页面中使用，否则无法实现云函数中的功能。上传后的云函数如图4.12所示。图4.12上传部署的云函数列表为了提高用户的使用体验，还需要实现收藏页面的多选功能，具体实现如图4.13所示。图4.13多选功能的实现核心代码如下：game_collect.jsthat.setData({

delete_id:that.data.delete_id.concat(e.detail.value[0])//将需要删除的游戏id放入delete_id数组

})

if(e.detail.value.length

!==

0){

db.collection('game_collect').doc(e.target.dataset.id).update({

data:{

game_checked:"true"//更新game_collect集合中的数据为选中

},success:function(res){

db.collection('game_collect').get({

success:function(res){

that.setData({

game:res.data,

})

})}

})}else{

db.collection('game_collect').doc(e.target.dataset.id).update({

data:{

game_checked:""//更新game_collect集合中的数据为未选中

},success:function(){

db.collection('game_collect').get({

success:function(res){

that.setData({

game:res.data,

})}})}

})选中功能通过update()方法来更新集合中的数据以达到选中功能的实现。4.2.5文章阅读模块在该模块中，我需要利用云数据库，完成一个文章展示页面的搭建，由于一篇文章大多数都由不同的章节组成，每一章有一个小标题来点名该段的主旨，因此在实现此功能模块中，我选择了用数组来完成该段的布置，不同的数组代表的含义不同，main和next数组分别代表了每段的不同内容，title数组代表了每段不同的小标题，而src数组则代表了不同的段落的插图，以达到利用云数据库实现页面排版的目的。实现效果如图4.14所示。图4.14文章阅读页面核心代码如下：essay.jsdb.collection('essays').doc(options.id).get({

success:function(res){

console.log('文章内容已全部获取',res)

that.setData({//将从essays集合中存取的数据带入到对应的集合中

id:res.data._id,

name:,

main:res.data.main,

src:res.data.src,

next:res.data.next,

title:res.data.title,

essay_checked:that.data.essay_checked

})},})4.2.6文章订阅功能模块该页面除了提供文章阅读功能外，还提供了文章订阅功能，用户可订阅喜欢的文章，在之后使用小程序时可以随时打开订阅页面进行阅读。实际实现订阅的方法与游戏的收藏功能相同，订阅成功页面如图4.15所示。图4.15文章订阅页面以下仅展示部分核心代码：essay.jsdb.collection('essay_collect').add({

data:{

essay_name:,

essay_id:that.data.id,

essay_checked:that.data.essay_checked,

},success:function(res){

console.log('已成功加入订阅',res)

wx.showToast({

title:

'加入订阅成功',

})

},fail:function(res){

console.log('加入订阅失败',res)

}})文章订阅同样需要删除功能来对数据进行管理，其使用的方法与游戏的收藏功能基本相同，仍然是创建云函数essay_delete来实现功能，以下仅贴出部分代码，重复部分不再赘述：云函数essay_deletereturn

await

db.collection('essay_collect').where({

essay_checked:"true"

}).remove()essayCollect.jsdb.collection('essay_collect').doc(e.target.dataset.id).update({

data:{

essay_checked:"true"

}

db.collection('essay_collect').doc(e.target.dataset.id).update({

data:{

essay_checked:""

}4.2.7管理员登陆模块管理员首先需要在登陆页面输入用户名和密码，来进入管理员页面，目的是只让开发者等相关人员进行数据操作，防止有心人士对数据进行破坏。登陆界面效果如图4.16所示.图4.16管理员登陆页面核心代码如下：userLogin.jsif(e.detail.value.username!==""

&&

e.detail.value.pwd!==""){//判断用户名和密码是否输入信息

db.collection('users').where({

username:e.detail.value.username,

pwd:e.detail.value.pwd//获得users集合中的用户名密码

}).get({

success:function(res){

console.log(res)

if(res.data.length

==

0){

wx.showToast({//弹出框提示用户

title:

'账户或密码错误',

icon:"none"

})

}else{

wx.showToast({

title:

'账户正确',

icon:"none"

})

wx.redirectTo({//数据与集合中的数据相符时跳转到gameAdmin页面

url:

'../gameAdmin/gameAdmin',

})

}}

})}由于登陆模块仅让管理员进入管理界面，不对一般用户开放，因此并未设计注册页面。4.2.8管理员增删改模块在该模块中，需要管理员在手机页面，便可以对游戏信息进行更改，目的是方便开发者对相关数据进行管理。由于各个游戏平台优惠周期都是每月更新，为此管理员需要每月都跟进不同的游戏信息，因此便捷化操作变得十分重要，否则一旦开发者因事无法在数据库中更改信息，该小程序便失去了自身的优势。该模块就是为了防止这种问题的出现而配置的。增删改模块难以在同一页面实现，因此在管理员页面首先设计了两个页面跳转，分别对应增加和修改删除功能模块。效果如图4.17所示。图4.17增删改模块跳转上传游戏信息界面效果如图4.18所示。图4.18管理员增加游戏信息模块核心代码如下：gameUpload.jssizeType:['original','compressed'],//选择上传图片质量是原图还是压缩sourceType:['album','camera'],//选择上传图片路径是相册还是摄像头

success(res){

var

timestamp

=

Date.parse(new

Date());

timestamp

=

timestamp

/1000;

console.log("当前时间戳为："

+

timestamp);//获得当前时间戳，作为图片上传命名的中间变量以保证图片名称不会重复

const

tempFilePaths

=

res.tempFilePaths

//tempFilePahts作为img标签的src属性显示图片

console.log(tempFilePaths)

wx.cloud.uploadFile({

cloudPath:'games/'+timestamp+'.png',//上传图片的命名规则

filePath:tempFilePaths[0],

success:function(res){

console.log(res.fileID)

that.setData({

img:that.data.img.concat(res.fileID)//上传管理员提供的图片到数据库的games集合中

})

},

if(!==""

&&

e.detail.value.price!==""

&&

e.detail.value.list!==""

&&

e.detail.value.detail!==""

&&

that.data.img.length!==0){//判断输入上传的信息是否为空

db.collection('games').add({//通过add()方法向games集合中添加数据

data:{

name:,

price:e.detail.value.price,

list:e.detail.value.list,

detail:e.detail.value.detail,

src:that.data.img,

num:0,

game_xq_src:""

},success:function(res){

wx.showToast({

title:

'提交成功',

})

wx.redirectTo({

url:

'../gameUpload/gameUpload',//提交成功后重新载入添加游戏界面

})}})}成功添加游戏信息后界面如图4.19所示。管理员修改删除信息界面如图4.20所示。由于需要管理员对游戏信息整体进行操作，因此首先建立了一个页面来浏览目前云数据库中存在的所有信息，以便管理员按照不同游戏的需要进行具体的修改。核心代码如下：gameUpdate.js

db.collection('games').get({success:function(res){图4.19管理员增加游戏信息成功图4.20管理员修改删除总览页面

console.log('获取游戏信息成功',res)

that.setData({

game:res.data

})}})管理员修改删除数据具体操作界面如图4.21所示。图4.21管理员修改删除操作页面由于图片上传的方法与增加游戏部分的方法相同，因此此处不再赘述此处代码，其余核心代码如下：gameUpdate.jsif(!==""

&&

e.detail.value.price!==""

&&

e.detail.value.list!==""

&&

e.detail.value.detail!==""

&&

that.data.img.length!==0){//判断输入更新的信息是否为空

db.collection('games').doc(that.data.id).update({//使用update()方法来对games集合内的数据进行更新

data:{

name:,

price:e.detail.value.price,

list:e.detail.value.list,

detail:e.detail.value.detail,

src:that.data.img,

num:0,

game_xq_src:""

}删除功能由以下核心代码实现，首先是对集合中的图片进行删除：var

id

=

e.currentTarget.dataset.id;

var

img

=

that.data.img;

img.splice(id,1)

that.setData({

img:img//获得图片的唯一id

})

wx.cloud.deleteFile({//通过deleteFile()方法删除图片

fileList:[e.currentTarget.dataset.src],

success:

res

=>{

console.log(res.fileList)

},以下核心代码实现对games集合中的其他数据删除的操作：db.collection('games').doc(that.data.id).remove({//通过remove()方法实现集合的删除操作

success:function(res){

console.log('删除成功',res.data)

wx.cloud.deleteFile({

fileList:that.data.img,

success:res=>{

console.log(res.fileList)

},4.2.9简易工具之计时器模块资源整合小程序中不仅需要部分信息的整理，还需要一些简易的工具的配置，以便用户的使用。计时器模块配置的目的，是为了部分玩家在速通关卡时为其提供一个计时功能，以便用户记录自己速通关卡的时间。实现效果如图4.22所示。图4.22管理员修改删除操作页面开始计时部分核心代码如下：timeCount.jsstart:function(){

var

that

=

this

clearInterval(intt)

that.setData({

hour:0,

minute:0,

second:0,

millisecond:0,//设置计时开始为00：00：00

})

intt

=

setInterval(

function(){that.timer()},

50);//调用timer()方法实现时间的增加

},timer()方法核心代码如下：that.setData({

millisecond:

lisecond

+

5

})//从50开始+5同步秒位

if(lisecond

>=

100){

that.setData({

millisecond:0,

second:that.data.second

+

1

})}//每当millisecond到达100，second增加一秒

if(that.data.second

>=

60){

that.setData({

second:0,

minute:that.data.minute

+

1

})}//每当second到达60，minute增加一分

if(that.data.minute

>=

60){

that.setData({

minute:0,

hour:that.data.hour

+

1

})}//每当minute到达60，hour增加一小时

that.setData({

timecount:that.data.hour

+

":"

+

that.data.minute

+

":"

+

that.data.second

+

":"

+lisecond

})//同步页面的计时器停止按钮通过clearInterval()来将计时器停止。重置按钮核心代码如下：clearInterval(intt);//清空计时器

that.setData({

timecount:'00:00:00',

})//将计时器设置为00：00：004.2.10简易工具之计算器模块随着显卡及CPU等硬件的进步，一款游戏中包含的东西也越来越多，其中就包括数值方面的提升，大量数值的堆砌组成了一款游戏的核心，玩家在游玩的过程中，仅靠人脑难以完成大量的计算，因此该项目在我的工具中配置了计算机模块，以便用户在遇到大量计算时可以更加得心应手地完成目标。计算器页面最终呈现效果如图4.23所示，该计算器可以实现加法、减法、乘法、除法以及取余的操作。图4.23计算器实现页面由于其代码非常庞大，以下部分仅展示核心流程图，因此不再罗列定义的具体代码。键入判断流程如图4.24所示。图4.24初始键入值判断该判断流程便是计算器的核心算法。除此之外，还需判断第一、二操作数与小数点，并且添加删除符的判断。4.3本章小结本章的内容主要是介绍了开发环境的搭建以及代码备份的处理，以及对项目中不同模块实现的功能以及其所使用的方法进行了总结，同时配有模块配置成功后的部分截图以佐证代码的真实性，代码中也带有相关注释，以便读者阅读项目中的代码。

5软件测试5.1单元模块测试根据在设计前期准备中制作的功能模块图与系统流程图，对本项目已经完成的功能进行测试，按照不同的页面单元，对主页面、文章界面、工具界面和管理员界面等单元模块分别检验运行是否正常。测试结果如表5.1所示。表5.1单元模块测试表测试点测试情况主页面单元模块该模块包含游戏信息搜索功能模块，且该单元运行正常，能搜索到云数据库中拥有的数据，并实现模糊搜索游戏信息整合单元模块该模块包含数据的展示和收藏功能模块，且该单元运行正常，能正常阅读内容与添加收藏。文章阅读单元模块该模块包含文章展示和订阅功能模块，且该单元运行正常，可以正常订阅与阅读文章。管理员登陆单元模块该模块主要完成管理员的登陆功能，且该单元运行正常，可以根据云数据库的users集合完成登陆、跳转页面操作。管理员增删改单元模块该模块包含对games集合的增加、修改、删除操作，且该单元运行正常，可以对云数据库进行操作。简易工具单元模块该模块主要包括计时器模块和计算器模块，计时器模块使用正常，能正确进行计时；计算器模块使用正常，能正确执行加减乘除以及取余的计算。5.2兼容性测试进行兼容性测试的目的是，检验该小程序在不同屏幕大小的手机上运行状况如何，以及在不同系统上的兼容性表现如何。为此，我使用了四种手机来进行测试，分别为iPhoneX(5.8英寸)、iPhone12ProMax(6.7英寸)、MI9(6.39英寸)和HUAWEInova3(6.3英寸)。测试结果如下：屏幕大小的改变对于娱乐信息资源整合小程序没有太大的影响，所有界面都没有太大的改变，一切正常运行。进行系统测试时，苹果系统出现了文本框占据了整个屏幕，导致无法提交数据的情况出现，而安卓系统运行一切正常。iPhoneX测试如图5.1所示。图5.1iPhoneX测试界面iPhone12ProMax测试如图5.2所示。图5.2iPhone12PtoMax测试界面MI9测试如图5.3所示。HUAWEInova3测试如图5.4所示。5.3用户体验测试在完成小程序的搭建后，通过真机调试，添加了两名测试用户来对该项目进行检验，检验结果如下表5.2所示。图5.3MI9测试界面图5.4HUAWEInova3测试界面表5.2