基于微信小程序的电子竞技信息交流平台设计与实现（LW+源码+讲解）
专注于大学生项目实战开发,讲解,毕业答疑辅导，欢迎高校老师/同行前辈交流合作✌。
技术范围：SpringBoot、Vue、SSM、HLMT、小程序、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、安卓app、大数据、物联网、机器学习等设计与开发。
主要内容：免费功能设计、开题报告、任务书、中期检查PPT、系统功能实现、代码编写、论文编写和辅导、论文降重、长期答辩答疑辅导、腾讯会议一对一专业讲解辅导答辩、模拟答辩演练、和理解代码逻辑思路。
🍅文末获取源码联系🍅
在毕设选题，项目以及论文编写等相关问题都可以给我留言咨询，希望帮助更多的人
摘 要
随着科技的进步，微信小程序慢慢进入了生活当中，由于轻便快捷，方便使用，基于微信这个大平台，使得小程序飞速发展，趋于成熟，因此，针对电子竞技信息交流方面，特开发了本基于微信小程序的电子竞技信息交流平台。
本基于微信小程序的电子竞技信息交流平台采用WXML 、WXS、JS小程序编写语言、微信开发者工具进行微信端开发，使用MYSQL数据库进行系统数据的储存，以微信为入口的，具有快捷、轻便的特点，不占内存，不用下载、安装，而且访问速度很快。系统界面良好，操作简单方便，通过系统概述、系统分析、系统设计、数据库设计、系统测试这几个部分，详细的说明了系统的开发过程，最后并对整个开发过程进行了总结，实现了电子竞技信息交流的重要功能。
“操作简单，功能实用”这是本软件设计的核心理念，本系统力求创造最好的用户体验。
关键词：电子竞技信息交流；微信开发者工具；微信小程序；MYSQL数据库
1 绪 论
1.1课题研究背景
二十一世纪是一个集数字化，网络化，信息化的，以网络为核心的社会。随着互联网的发展，传统生活变得更加方便快捷，许多事物都可以跟互联网相连接，于是就提出了“互联网+”[1]的概念，日常生活离不开计算机更离不开互联网，例如生活中最平常的衣食住行，都有其相关的智能产品，所以科技改变生活，传统的生活方式面对互联网的新浪潮的冲击，已经渐渐退出了历史舞台，相信未来的某一时刻，传统的生活方式将进入全智能化的阶段。
在信息技术迅速发展的今天，计算机技术已经遍及全球，使社会发生了巨大的变革，现今各类智能手机不断更新，智能手机的普遍使用让各种基于手机移动端的APP问世，其中，微信已是时下国内最火的聊天交流APP，备受人们青睐，近年来，微信发展规模越来越大，越来越多的人开始使用微信，目前智能手机系统的普及，人们手机上基本都有了微信，根据去年公布的一组数据中可知，微信去年最高用户量达到10亿多；而建立在微信平台基础上的小程序凭着它不用安装、不占内存、使用便捷、用完即走等众多优点，小程序借着微信平台快速成长，也为各行业的发展带来了极大的便利，这使得各类微信小程序应运而生，为用户提供便利。
基于以上微信的发展，结合用户电子竞技信息交流方面的需求，开发了本基于微信小程序的电子竞技信息交流平台，为用户提供一个便利的电子竞技信息交流的平台。
1.2设计原则
在开始开发项目之前，必须要先考虑项目的实用性、科学性，以及该项目是否能够真正让用户受益并尽可能的发挥项目的作用。因此，在开发前，通过以下几条原则对项目进行判断：
（1）可行性原则。项目需要保证经济可行性和技术可行性，这包括了项目在浏览端、服务端等方面上的经济和技术上是可以达成的。
（2）适应性原则。项目要保证可维护性和可扩展性，这是每个非短期项目都需要考虑的，并且不论是维护还是扩展，都必须要建立在适应用户的正常需求的基础上。
（3）安全性及保密性原则。要充分保证用户信息的安全性和保密性，不能因为开发上的疏忽，导致用户的信息泄露。
（4）系统工程原则。为了确保项目的整体性，在项目调查、项目分析、项目设计、项目开发的过程中，都需遵从项目工程的方法和步骤逐步进行。
（5）统一规划、分期实施、逐步完善原则。项目开发的过程中，要按照规划、分期实施，特别是要注意在项目开发过程中要有条理，从点到面，一步步完善，不要贪图进度，要循环渐进的对项目进行开发。
1.3研究内容
根据基于微信小程序的电子竞技信息交流平台编写的论文主要阐述了基于微信小程序的电子竞技信息交流平台的开发过程中使用的技术，系统开发前进行的需求分析，根据需求文档进行系统设计，最后才是系统功能实现以及测试几个部分，在开始编写论文之前亲自到图书馆借阅相关的编程书籍，然后针对开发的基于微信小程序的电子竞技信息交流平台，去网上查找了很多别人做好的系统，根据他们的功能设计进行自己的系统的系统功能结构设计，出具需求报告，根据形成的需求报告完成系统各个功能模块设计，最后才是进行程序编码，系统完成后才能进行测试和最后的验收工作，程序开发流程大致如此。
这次编写的论文包含了7个部分的内容，具体内容如下：
第一部分绪论：文章主要从课题背景以及设计原则综合阐述了开发此系统的必要性。
第二部分相关技术：系统开发用到的各种技术都大致做出了简介
第三部分系统分析：从可行性分析和功能需求分析等角度综合研究了此次开发的系统
第四部分系统设计：功能模块设计和数据库设计这两部分内容都有专门的表格和图片表示
第五部分系统实现：主要是根据需求文档和系统设计内容进行文字编码
第六部分系统测试：检验程序是否达到预期目标
第七部分总结：进行最后的总结工作
2系统关键技术
2.1 微信小程序
微信小程序，简称小程序，英文名Mini Program，是一种全新的连接用户与服务的方式，可以快速访问、快速传播，并具有良好的使用体验[1]。
小程序的主要开发语言是JavaScript，它与普通web的开发有很多相似之处。小程序和普通网页开发并不是相同的东西，是有差异的。网页开发的渲染线程和脚本线程是互斥的，而在小程序中，确实分开的，分别在不同的线程之中运行。网页开发的工作者可以运用各种浏览器暴露出来的DOM API，进行DOM选中和操作，但小程序不行，它并没有一个完整的浏览器对象，因此缺失DOM API和BOM API。这样的差别使得前端开发中经常用到的一些库是无法在小程序中运行的。另外，网页开发的工作者在开发网页时所要面对的环境是在各式各样系统上运行的各式各样的浏览器，，而小程序只，只需面对iOS和Android这两道操作系统下的微信就足够了。
小程序和传统的APP相比，有着开发成本更低，获客成本更低，开发周期更短，发展空间更大等的优点。不过，为了体现“用完即走”、“无需安装”等理念，小程序的功能、性能还有大小都受到了制约，可以说是各有利弊。
2.2微信Web开发者工具
为了实现微信小程序编写，腾讯公司推出微信web开发者工具[2]，用来调试编写微信小程序，微信小游戏，微信公众号的编写和调试，该软件是支持微信小程序官方API 和相应的辅助工具和插件，支持微信端的代码编辑，查看，预览，发布。该工具拥有自己的前端代码文件，视图文件是.wxml、样式文件是.wxss、交互则是JS文件[8]，当然还有支持相应的网络框架，通过接口wx.request和后台进行数据传输，通过配置https域名配置跟服务器对接并发布项目，这是一款集开发、预览、发布等功能的微信产品的开发工具，目前还在更新版本。
2.3微信小程序API接口
微信小程序API接口是腾讯公司为了微信小程序和微信公众号提供的接口文档，里面包含了各种需要使用的接口技术[7]，例如本项目用到的获取微信用户信息(wx.getUserInfo)、蓝牙通讯传输功能、网络请求(wx.request)、定位功能等，总的来说，小程序API是满足一个程序开发的大部分接口。
2.4 WXML 、WXS、JS小程序编写语言
WXML全称是 WeiXin Markup Language，是微信标记语言，是微信小程序的标签语言，结合小程序的基础组件、事件系统，可以构建出页面的结构。类似于HTML语言，但是他自身也拥有一定的特色。
WXSS(WeiXin Style Sheets)是微信样式表，是微信小程序用于修饰标签语言的样式文件，WXSS 用来决定 WXML 的组件应该怎么显示。为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性，同时为了更适合开发微信小程序，WXSS对CSS语言进行修改和扩充，引入全新尺寸单位rpx，但大体语法于CSS语言不分离。
JS是 JavaScript[4]语言的简称，微信小程序里面也可以叫做WXS，是一门脚本语言，通俗易懂，用于页面交互的语言。
2.5 MYSQL数据库
MySQL是典型的关系数据库系统，拥有开源免费、稳定、高效等特点，一直是中小型web项目的最佳数据库选择。MySQL作为当今IT领域使用人数最多的开源关系型数据库软件之一，在2018年的数据库使用率排名中位居第二，仅次于目前为止最成功的商业版数据库Orcle[5]。MySQL最大的优势之一就是无偿使用，这也是它成功的关键。
MySQL支持标准化数据库查询语言SQL。MySQL是一款非常适合个人开发者或小型组织开发团体的数据库管理系统，因为它是开源并且免费的，体积小、速度快、成本低以及其最重要的一点开放源码，深受程序设计人员的喜爱，这也让它成为了许许多多中小型开发网站数据库的首选，同时提供了多种开发的连接API。MySQL将数据的存放按照记录之间的关系存放到了不同的表中，减少了数据的冗余并且提高了开发的工作效率。MySQL支持开发中需要用的大型数据库，并能处理数以万计的记录。因为MySQL是开源的软件，所以在项目的预算中的时候不用花费额外的资金，大大降低了开发的总体成本，这也是MySQL数据库在中小型企业和独立的开发者中广泛流行的原因。
3系统分析
3.1可行性分析
在系统开发之初要进行系统可行分析，这样做的目的就是使用最小成本解决最大问题，一旦程序开发满足用户需要，带来的好处也是很多的。下面我们将从技术上、经济上、操作上、法律上等方面来考虑这个系统到底值不值得开发。
3.1.1 技术可行性
技术可行性是指学习的技术是否能够完成本项目，如果团队本身没有相关的技术储备，而又能够迅速掌握此类技术，那项目应该达不到我们的设计要求。本基于微信小程序的电子竞技信息交流平台采用微信开发者工具、Java语言、MYSQL数据库开发设计，作为计算机专业学生，在学校期间就接触到许多关于编程方面的知识，当然也包括各种编程软件，对他们的了解度也比较系统，所以技术开发上面还是有一定把握。
3.1.2经济可行性
项目需要考虑花费问题，我们必须考虑系统开发中所有的花费进行计算，我们要考虑到系统需不需要太大的资金。由于自己本身就是学生，还没有正式参加工作，金钱上面一直都处于缺乏状态。所以在开发程序过程中，我是不会花太多经济成本在上面的。针对开发软件和数据库，还有界面设计的photoshop软件等在百度上面就可以直接下载，然后根据各种安装视频进行安装，这些资源都是免费的，程序编码阶段使用的源代码在百度上面可以轻松获得，在有网络的环境下就能下载下来，不需要支付任何费用，经济成本很低。
3.1.3操作可行性
操作可行性主要是针对系统用户而言，一个系统再完美，技术再先进，用户不去使用，或者用户根本不会使用，该系统存在的价值也是不大的。本人自己就是学生，程序开发经验不足，在界面设计上面不会设计太复杂，要讲究简单好看，操作上要方便，不能让用户觉得不流畅。用户一旦进入操作界面，界面上就会有相应提示，跟着操作提示就可以找到对应的功能操作模块，对于用户来说免培训就能使用，没有任何学习成本，因此，操作上是可行性的。
3.1.4法律可行性
自己本人开发的软件和用到的资料来源都是图书馆、百度文库、百度网页等渠道，并不涉及违法。在个人毕业设计上面，无论源代码还是论文编写内容不存在抄袭行为。
从上面几个部分的可行性分析得出，这次开发的基于微信小程序的电子竞技信息交流平台在开发上面没有什么大问题，值得开发。
3.2系统性能分析
（1）可升级性：系统的容纳信息一定是持续增长，到时系统可以升级，接受信息的更新发展。
（2）存储性：因为是电子竞技信息交流平台，所以就会在数据库要求上比较严格，信息录入的比较多，而且丰富复杂， 这就需要一个强大的数据库来存放更多的数据和保证数据的时时性。
（3）可靠性：系统不可以有病毒类代码，必须有拦截器，验证方法，对里面信息的保护措施，这样才让人用的放心。
（4）简单性：系统设计的应该简单易学的，设计的各种功能应该简单操作，不需要努力学习培训，缩短用户熟悉系统的进程。
（5）一致性：数据应该录入准确，需要更新时，数据应该可以及时的修改，数据还应该有独立保存，不能删除数据的时候会连带着把还需要的数据都删除掉。
3.3 系统功能分析
用户通过微信平台可打开本系统，没有账号的用户可进行注册操作，注册登录后主要实现的功能模块包括首页、英雄、比赛、选手以及我的（我的收藏管理和留言板），用户用例图如图3-1所示。
图3-1 用户用例图
3.4用户体验需求分析
这个基于微信小程序的电子竞技信息交流平台要求在微信平台上可以运行，主要实现了注册登录、英雄、比赛、选手以及留言板等功能模块。一个好的程序要具备以下两方面用户体验：
（1）界面友好
用户界面要简洁直观、操作方便。
（2）响应快速
对用户的请求能快速响应，对一些耗时的应用程序，以进度条的形式显示，让用户随时了解程序执行情况。
3.5系统流程分析
3.5.1注册流程
未有账号的用户可进行注册操作，用户注册流程图如图3-2所示。
图3-2注册流程图
3.5.2登录流程
用户要想进入本系统必须进行登录操作，登录流程图如图3-3所示。
图3-3 登录流程图
3.5.3添加留言流程
用户登录后可添加留言操作，添加留言流程图如图3-6所示。
图3-6 添加留言流程图
4系统设计
4.1系统设计要求
（2）可靠性。能连续准确的处理业务，有较强的容错能力。
（3）保密性。保证系统的物理安全、数据存储和存取的安全与保密、数据传输的安全与保密，做好使用人员的授权管理。
（4）可理解性。用户容易理解和使用该系统。
（5）可维护性和适应性。系统应易于修改、易于扩充、易于维护，能够适应业务不断发展变化的需要。
4.2系统开发流程设计
在开发本基于微信小程序的电子竞技信息交流平台时，首先进行需求分析，进而对系统进行总体的设计规划，设计系统功能模块，数据库的选择等，本系统的开发流程如图4-1所示
图4-1 系统开发流程图
4.3系统结构设计
系统的设计和划分是系统的核心研究问题，以确定整体结构和功能模块。该系统的结构化设计的思想，是自顶向下的方式将系统分成若干个子系统，以及反过来的子系统分成模块，其被划分成子模块，层划分各计算机可执行模块可迄今用作一个单独的程序。
本基于微信小程序的电子竞技信息交流平台结构图如图4-2所示。
图4-2 系统功能模块图
4.4数据库设计
一个好的数据库可以关系到程序开发的优劣，数据库设计离不开表结构的设计，还有表与表之间的联系，以及系统开发需要设计的数据表内容等信息。在进行数据库设计期间，还是需要多花时间进行考虑，最终设计出配套程序的数据库出来。
4.4.1数据库E-R图设计
本基于微信小程序的电子竞技信息交流平台采用的是MYSQL数据库，数据存储快，因为电子竞技信息交流平台，主要的就是对信息的管理，信息内容比较多，这就需要好好的设计一个好的数据库，分类要清楚，不能添加信息的时候，造成信息太过混乱，设计好的数据库首先就需要先把各个实体之间的关系表达明确，下面我们用E-R图来具体表示。
E-R图是一种描述显示数据类型间的关系的数据描述方法，E-R图可以完整地映射出现实模型的关系。E-R图中的三个最为重要的元素就是实体、属性、关系。E-R图即由这三点组成。本基于微信小程序的电子竞技信息交流平台的E-R图如下所示：
1、比赛信息实体E-R图如图4-3所示：
图4-3 比赛信息实体的E-R图
2、留言板信息实体E-R图如图4-4所示：
图4-4 留言板信息实体E-R图
3、游戏资讯信息实体图如图4-5所示。
图4-5 游戏资讯信息实体E-R图
4、收藏信息实体图如图4-6所示。
图4-6 收藏信息实体E-R图
5、选手信息实体图如图4-7所示。
图4-7 选手信息实体E-R图
6、英雄信息实体图如图4-8所示。
图4-8 英雄信息实体E-R图
4.4.2数据库表设计
本基于微信小程序的电子竞技信息交流平台采用MYSQL数据库，数据库的功能主要是存储网站中所有数据，以便进行操作。关于数据库中的数据表如下：
表 4-1 bisai比赛信息表
| 列名 | 数据类型 | 长度 | 允许空 | 说明 |
| id | bigint | 20 | 否 | 编号 |
| addtime | timestamp | 是 | 创建时间 | |
| zhanduimingcheng | varchar | 200 | 是 | 战队名称 |
| `saiqu` | varchar | 200 | 是 | 赛区 |
| zhanduijieshao | varchar | 200 | 是 | 战队介绍 |
| duibiaozhaopian` | varchar | 200 | 是 | 队标照片 |
| zhanduichengyuan | longtext | 是 | 战队成员 | |
| zhanduishuju | longtext | 是 | 战队数据 | |
| jinqibisai | longtext | 是 | 近期比赛' | |
| thumbsupnum | int | 11 | 是 | 赞数 |
| crazilynum | int | 11 | 是 | 踩数 |
表 4-2 messages留言板信息表
| 列名 | 数据类型 | 长度 | 允许空 | 说明 |
| id | bigint | 20 | 否 | 编号 |
| addtime | timestamp | 是 | 创建时间 | |
| userid | varchar | 200 | 是 | 留言人编号 |
| username | varchar | 200 | 是 | 用户名 |
| content | longtext | 是 | 留言内容 | |
| reply | longtext | 是 | 回复内容 |
表 4-3 news游戏资讯信息表
| 列名 | 数据类型 | 长度 | 允许空 | 说明 |
| id | bigint | 20 | 否 | 编号 |
| addtime | timestamp | 是 | 创建时间 | |
| title | varchar | 200 | 是 | 标题 |
| introduction | longtext | 是 | 简介 | |
| picture | varchar | 200 | 是 | 图片 |
| content | longtext | 是 | 内容 |
表 4-4 storeup收藏信息表
| 列名 | 数据类型 | 长度 | 允许空 | 说明 |
| id | bigint | 20 | 否 | 编号 |
| addtime | timestamp | 是 | 创建时间 | |
| userid | bigint | 20 | 是 | 用户编号 |
| refid` | bigint | 20 | 是 | 收藏编号 |
| tablename | varchar | 200 | 是 | 表名 |
| name | varchar | 200 | 是 | 收藏名称 |
| picture | varchar | 200 | 是 | 收藏图片 |
表 4-5 xuansho选手信息表
| 列名 | 数据类型 | 长度 | 允许空 | 说明 |
| id | bigint | 20 | 否 | 编号 |
| addtime | timestamp | 是 | 创建时间 | |
| mingcheng | varchar | 200 | 是 | 名称 |
| suoshuzhandui | varchar | 200 | 是 | 所属战队 |
| zhaopian | varchar | 200 | 是 | 照片 |
| dangqianduanwei | varchar | 200 | 是 | 当前段位 |
| dangqianfenshu | int | 11 | 是 | 当前分数 |
| jinqibisaijilu | longtext | 是 | 近期比赛记录 | |
| xiangqing | longtext | 是 | 详情 | |
| thumbsupnum | int | 11 | 是 | 赞数 |
| crazilynum | int | 11 | 是 | 踩数 |
表 4-6 yingxiong英雄信息表
| 列名 | 数据类型 | 长度 | 允许空 | 说明 |
| id | bigint | 20 | 否 | 编号 |
| addtime | timestamp | 是 | 创建时间 | |
| yingxiongmingcheng | varchar | 200 | 是 | 英雄名称 |
| zhenming` | varchar | 200 | 是 | 真名 |
| leixing | varchar | 200 | 是 | 类型 |
| zhaopian | varchar | 200 | 是 | 照片 |
| jinengjieshao | longtext | 是 | 技能介绍 | |
| beijingjieshao | longtext | 是 | 背景介绍 | |
| yingxiongjiqiao | longtext | 是 | 英雄技巧 | |
| thumbsupnum | int | 11 | 是 | 赞数 |
| crazilynum | int | 11 | 是 | 踩数 |
开题指导、源码获取、程序定做、毕设帮助，联系方式见文末。
系统实现效果
大家点赞、收藏、关注、评论啦 、查看👇🏻获取联系方式👇🏻