【基于微信小程序的游戏爱好者平台开发设计8800字】

ⅡⅢ基于微信小程序的游戏爱好者平台开发设计摘要随着生活质量的不断提高，人们的业余生活也丰富起来。电子竞技逐渐走入社会各个阶层的视野，电竞周边产业也能提带动经济发展。《CSGO》作为经典电竞对抗游戏CS系列的作品，再次成为第一人称FPS游戏的主流游戏。目前本游戏日活跃人数稳定50万，峰值持续突破百万。为本游戏爱好者开发一款支持观看视频、了解赛事、浏览文章的平台能促进相关爱好者的水平，增加游戏的用户粘性，平台后期也可以通过轮播图广告的方式实现经济效益。作为游戏的周边产品，搭载于微信平台上可以享受庞大用户基础，还能方便用户之间的分享于传播，选择微信小程序来设计与实现本爱好者平台是十分有必要的。基于wxml、wxss的实现前端展示，js实现业务逻辑，小程序云存储和云数据库实现后台数据的存储和数据库的CRUD任务。小程序页面简洁美观，程序设计符合主流软件操作流程。用户能快速入手进行观看、收藏、搜索游戏视频和文章、了解游戏的赛事信息，分享信息给微信内的好友。关键词：CSGO爱好者平台；wxml、wxss、JavaScript；微信小程序云开发目录第1章绪论 .2项目意义CSGO的相关产业已经在逐渐完善，从选手到娱乐玩家，再到普通观众都需要一个更好的平台。通过观察其他竞技类游戏的小程序平台来了解当前用户对这类小程序平台的主要需求，研发一款专门为CSGO打造的平台APP。在本平台上，能通过小程序内的相关文章了解游戏的发展历程，通过赛程页面了解游戏职业赛程，通过在线观看视频学习到游戏知识与技巧，通过转发功能将优质的内容分享给志同道合的朋友，从而提高用户粘性、优化游戏产业生态。让有电竞职业梦的普通爱好者有机会走进职业赛场、提高普通玩家的竞技水平、吸引观众来增加热度。还能通过平台上线后，引入广告的方式实现大学生创收，真正实现技术的实用化、商业化。对于一款同时在线人数超百万的游戏来说，开发出其首款基于小程序的爱好者平台是有显著的经济效益的，更是为爱好者节省搜寻信息时间成本的重要方法。

第2章项目相关技术介绍2.1WXMLWXML(WeiXinMarkupLanguage)是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。WXML支持通过{{msg}}访问Js文件内data属性中的数据；支持wx:if、wx:elif、wx:else的逻辑判断；支持wx:for的列表渲染。WXML可以通过绑定事件，将用户的行为反应到Js逻辑层。2.2WXSSWXSS(WeiXinStyleSheets)是一套样式语言，是小程序用来描述WXML组件样式的语言。WXSS是为适应微信小程序前端开发的，继承了CSS的大部分特性，并加以补充和修改，增加了尺寸文件的样式导入特性。在小程序设计过程中，对WXML组建加以class命名，实现对页面的布局和优化。2.3JavaScriptJavaScript简称“JS”，是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。JS作为开发Web页面的脚本语言而出名，也被用到了很多非浏览器环境中，JavaScript基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格[2]。微信小程序中每个页面都包含一个js文件，用于实现页面逻辑，相应用户行为。基于安全的考虑，小程序中不支持动态执行JS代码，即不支持执行JS代码中使用eval来计算string内的js代码，也不支持newFunction创建函数。

2.4小程序云开发微信小程序为了方便开发人员的开发过程，提供了一种云开发的方式。为开发人员提供流量计费和空间计费两种方式，对于学习小程序的人员提供免费空间和每月流量，超出基础部分再计费。本设计使用云存储，将视频、文章、图片上传到云端，实现在线访问。云数据库，云开发提供了一个json数据库，数据库可以包含多个集合相当于mysql的表，每条数据都是json格式的记录。提供了对应关系，集合collection对应表table，记录record/doc对应row、字段field对应列column。 云函数，是运行在云端的代码，不需要服务器，在开发工具内编写上传部署到云端后，小程序内就可以调用云函数的API，它的优势是对于用户openid不需要复杂的鉴权认证。

第3章需求分析3.1经济可行性分析经济取决于用户基数，作为玩家人数仅次于LOL的一款PC竞技类游戏，它的用户基数绝对是充足的。CSGO国服被完美世界代理，但是目前为止包括完美在内的几家主营CSGO平台业务的公司，都只是在做PC对战平台和他们的对战平台APP，而暂时未涉足基于小程序做本游戏知识和视频的分享平台。主流对战平台使用人数并没有达到饱和状态，仍然有相当多用户活跃在休闲模式和社区服中享受游戏带来的欢乐。他们的游戏技术进步和欢乐来源无法解决。已经是平台用户的玩家也没有专门为游戏交流与分享的平台可使用，这是一片蓝海等待发掘。小程序平台在开发之后的运营成本较低，只需要上线相关的视频与文章内容供用户浏览，定时更新赛程即可。支出部分只包含云开发的流量费用，无需个人支付服务器的租赁成本和维护成本。收入部分可以在用户积累起来后通过banner广告、视频前贴广告等形式收取费用，挂电商平台卖CSGO周边产品的二维码等进行获利，在不影响用户体验的基础上控制广告频次[6]。小程序云开发过程中也不需要购买服务器，开发成本和学习成本都较低，是十分利于平台开发的先决条件。

3.2技术可行性分析小程序云开发是在微信开发者工具上进行开发的，查看微信官方文档对小程序开发很方便。前端部分主要是WXML和WXSS实现页面设计，前端逻辑通过JS实现，学习成本较低，可以根据需求自己设计小程序的UI。JavaScript（JS）是一种属于网络的高级脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的[1]。微信开发者工具上提供云开发功能，具有云存储和云数据库功能，云数据库是JSON数据库。这两者在开发初期只需支付极少的流量费用。

第4章总体分析与设计4.1前端和逻辑分析设计本小程序作为针对CSGO爱好者的一款平台，需要迎合用户需求。用户对游戏相关内容有视频、文章和赛事需求。小程序UI设计风格[8]以灰色为主，秉承简约美观的原则设计。按照设计需求，前端页面包括如下：表4-1页面及功能表页面页面功能小程序主页:index提供轮播图、视频分类跳转模块、推荐视频模块、文章推荐模块游戏赛程页:match展示近期赛程列表个人中心页:personal提供用户信息展示模块、登陆登出模块、最近播放视频模块、最近浏览文章模块、用户收藏模块分类视频页：video为用户提供分类型选择视频的功能视频详情页:videoDetail展示视频详情，包括播放视频、视频标题、提供收藏和分享按钮文章列表页:ArticlePg展示文章列表文章详情页:article展示文章详情信息、包括文章标题、文章内容，提供收藏按钮推荐视频页:recommend展示推荐视频列表视频搜索页:search提供模糊搜索功能，通过搜索定位视频，提供搜索历史功能用户收藏页:collect提供收藏功能，内部包括视频收藏、文章收藏，两者都提供清空收藏功能本程序为CSGO游戏爱好者提供学习和娱乐的功能，游戏用户主体为青少年人群。程序核心功能包括为视频和文章的提供展示平台，为个人用户提供浏览和记录保存，为喜欢观看CSGO赛事的观众提供赛程信息。小程序立足于微信，本程序通过微信实现登录功能。首次登陆的用户，信息会在数据库进行注册。通过获取微信头像和微信昵称，展示在个人中心页面。注册用户在登陆后可以享受两项基本服务，包括：用户可以获得最近浏览文章和播放视频的记录，用户可以对小程序提供的所有文章和视频进行收藏并在“我的收藏”页面进行查看和管理。用户可根据自身需求选择不同类型的视频服务，进入相应列表浏览视频并观看。视频可以在下滑模块小窗观看、也可以跳转到视频详情页进行观看，视频详情页会提供收藏和分享按钮。本设计还为用户提供了推荐视频模块，通过精心选取不同的视频来吸引首次使用本程序的用户。为了满足所有用户的使用习惯，本设计提供文章浏览功能，文章内容涉及游戏配置[10]、明星选手参数、游戏发展历程、经典场面介绍等。丰富的类型能够满足不同用户的阅读需求。对于CSGO入门级爱好者和资深爱好者，本设计专门提供了赛程浏览功能。用户可以在本程序内直接获取近日不同赛事的赛程信息，和往日赛事的比赛结果信息。使用户不需要通过VPN来浏览境外网站“HLTV”获取专业的赛程信息。图4.1CSGO页面逻辑流程图

4.2数据库分析设计云开发是JSON数据库，JSON数据库支持SQL降低了管理成本，提升了开发者的生产力[7]。本程序数据库建表符合建表的三大范式，平台对表有CRUD操作，涉及私人用户的信息都需要验证openid才能获取、修改和删除，非私人信息支持所有用户（游客用户）检索。基于小程序设计需求建表存储数据信息。根据需求分析提供了如下数据库表：主页轮播图表、用户注册信息表、导航图标类型表、赛程信息表、视频信息表、推荐视频表、用户收藏视频表、用户最近观看视频表、文章信息表、用户收藏文章表、用户最近浏览文章表。表4-2轮播图表bannerPic字段名称字段类型字段意义_idstring主键标识imgUrlstring轮播图图片表4-3用户信息表user字段名称字段类型字段意义_idstring主键标识_openidstring用户唯一标识表4-4视频分类类型表videoGroup字段名称字段类型字段意义_idstring主键标识videoIDstring视频类型标识videoTitlestring视频类型名称表4-5视频列表videoList字段名称字段类型字段意义_idstring视频唯一标识（主键）vdTypestring视频类型vdTitlestring视频标题imgUrlstring视频封面vdUrlstring视频地址表4-6文章列表article字段名称字段类型字段意义_idstring文章唯一标识（主键）articleTitlestring文章标题articlePicstring文章封面articleUrlstring文章地址表4-7赛程列表match-scedule字段名称字段类型字段意义_idstring主键标识matchUrlstring赛程地址sortIDnumber排序关键字表4-8推荐视频表recommendVideo字段名称字段类型字段意义_idstring主键标识vdTitlestring推荐视频标题imgUrlstring推荐视频封面vdIDstring推荐视频唯一标识表4-9最近浏览文章表recentArticle字段名称字段类型字段意义_idstring主键标识_openidstring用户唯一标识itemidstring文章唯一标识datedate最近浏览时间表4-10最近播放视频表recentVideo字段名称字段类型字段意义_idstring主键标识_openidstring用户唯一标识itemidstring视频唯一标识datedate最近观看时间表4-11用户收藏视频表user-videoCollection字段名称字段类型字段意义_idstring主键标识_openidstring用户唯一标识itemidstring视频唯一标识表4-12用户收藏文章表user-articleCollection字段名称字段类型字段意义_idstring主键标识_openidstring用户唯一标识itemidstring文章唯一标识第5章详细设计5.1主页面模块5.1.1主页页面提供轮播图、图标导航模块、推荐视频模块、文章列表模块。提供向视频推荐页、视频分类页、文章列表页的跳转功能，提供文章、推荐视频的展示和跳转功能。图5.1主页面主要代码及实现途径：跳转分类视频页，通过传递WXML页面传回的导航类型0-5作为参数id，用户的openid作为参数openid传入video页面图5.2跳转video页面在云数据库中获取轮播图的图片图5.3获取轮播图图片获取推荐视频（5条），用于展示在主页图5.4获取推荐视频（5条）跳转到视频推荐列表页，页内显示所有推荐表内存储的视频图5.5跳转到推荐视频页跳转到视频详情页，主页内推荐视频滚动视图内的视频，点击进入此视频详情页图5.6跳转到视频详情页获取文章列表（5条），展示在主页的文章滚动视图内。图5.7获取文章列表信息跳转到文章列表页，传递参数openid图5.8跳转到文章列表页跳转到文章详情页，提供文章id和用户openid参数图5.9跳转到文章详情页主页onLoad——监听页面加载图5.10监听页面加载主页onShow——监听页面显示，为主页openid赋值图5.11监听页面显示5.1.2推荐视频页面通过点击主页推荐视频模块的“查看更多”，跳转到推荐视频页面，页面内提供推荐列表的数据展示，内容都是精选过的不同类型的视频，实现方式为查询云数据库的recommendVideo表，并赋值给recommendVdList的数组，展示在前端页面。图5.12推荐视频页推荐视频页支持点击图片进入视频详情页的功能，方法是通过navigateTo函数进行跳转，跳转过程中提供参数id：视频的标识，openid：用户身份凭证。获取推荐视频列表，没有条数限制，用户可以查看最近推荐的所有视频图5.13获取推荐视频列表5.2个人用户模块包含用户登陆和注销功能、个人中心下拉栏功能、最近观看记录、最近浏览记录、我的收藏功能。图5.14个人中心页图5.15下拉栏对比图下拉栏内部提供半透明背景图，包含CSGO游戏特色元素，支持用户按住下拉，松手后缓慢回弹到原位。包含handleTouchStart、handleTouchMove、handleTouchEnd三个函数。图5.16下拉栏handleTouchStart负责初始化下拉特效为空（使下拉过程没有动画过度），获取用户按住下拉栏的初始y坐标。handleTouchMove负责获取用户松手时的y坐标，保证下拉栏只可向下拉取，且最大拉取长度为80rpx。handleTouchEnd负责为回弹添加缓慢过度的动画特效，设置回弹y坐标为0rpx。5.2.1用户登陆和注销功能初始进入个人中心页调用onLoad页面监听加载函数，程序会加载本地缓存的用户信息，包括微信头像和微信昵称。获取用户信息成功会调用云函数获取用户openid。图5.17个人中心页监听加载函数首次使用小程序的用户会调用handleGetUserInfo函数，获取用户信息和openid图5.18首次登陆云函数getOpenID，获取用户的openid图5.19getOpenID云函数个人中心页getOpenid，获取云函数的回调，获取成功将openid同步到全局变量，将用户信息写入user数据库，获取用户播放记录和浏览记录图5.20云函数getOpenID的回调函数图5.21同步openid全局变量首次登陆，用户信息写入user表。在user表中查询当前用户是否已注册，查询结果为空时，添加当前用户到user表。图5.22首次登陆用户注册用户登出，清空所有关于个人用户的信息，包括用户信息、openid、最近播放记录、最近浏览记录、全局变量内的openid。设置500ms延迟用于展示loading框。图5.23用户登出5.2.2用户获取最近观看视频和最近浏览文章功能每次获取用户信息和个人中心页面显示时，重新获取recentPlayList和recentReadList实现数据实时刷新。每次刷新的数据是根据播放或浏览时间排序的，新时间的数据会排在前面，保证功能真实性。云函数getRecentData，最近观看视频和最近浏览文章公用函数，通过传入不同的表名实现recentVideo与videoList联表查询，或者recentArticle与article联表查询。图5.24getRecentData云函数通过openid关联recentVideo与videoList表，实现最近播放视频的列表展示图5.25关联recentVideo与videoList表通过openid关联recentArticle与article表，实现最近浏览文章的列表展示图5.26关联recentArticle与article表5.2.3用户收藏页面在个人中心页，点击“我的收藏”跳转到收藏页，收藏页面包含视频收藏和文章收藏，可以手动选择显示类型。本设计有“全部删除”功能，点击之后会弹出确认框，点击确认会删除所有收藏的视频（文章）。用户点击收藏页的文章（视频），会跳转对应的文章详情页（视频详情页），可以单独取消本文章（视频）的收藏，返回收藏页时会调用onShow函数刷新当前收藏列表。图5.27收藏页（视频）图5.28收藏页（文章）云函数unionVideoUser，user-videoCollection与videoList联表查询图5.29云函数unionVideoUser联表查询将用户收藏的信息和视频信息整合起来，方便在前台进行展示。云函数unionArticleUser，user-articleCollection与article联表查询图5.30云函数unionArticleUser5.3赛程模块用户通过tabBar点击赛程，进入赛程页面。通过getMatchList获取当前赛程列表，赛程列表根据sortID的倒序排序显示，新的赛程信息sortID大。图5.31赛程页getMatchList函数获取赛程列表图5.32获取matchList列表5.4视频模块5.4.1视频分类浏览通过点击index主页的导航栏进入视频分类页。页面内点击上面的滑动模块也可以切换分类，滑动模块切换栏固定在顶部搜索栏下方。每种分类只获取3个视频，上拉滚动视图进行查看。上拉触底继续获取新视频（3个），下拉刷新会清空列表并重新获取3个视频。可以点击视频直接在本页播放，或者点击“详情信息”进入视频详情页。图5.33分类视频页切换导航栏，用getVideoList函数获取切换类型后的视频图5.34切换导航栏获取当前类型视频的列表数据图5.35获取当前视频列表点击视频进行播放，页面内存在多个视频，通过将未播放的视频转换为封面显示，解决多个视频共同播放的问题。图5.36视频断位续播问题的解决代码handleTimeUpdate函数：在视频播放后，获取当前播放的进度（秒），视频首次播放则将当前视频id和观看进度存入videoUpdateTime数组，如果数组内已经存在当前视频则更新它的观看进度。handlePlay函数：在通过视频id创建实例，首次播放则直接play，存在播放进度则跳转到之前播放的进度继续播放。handleEnded函数：在视频播放结束后调用。通过视频id创建实例，结束视频播放，删除播放进度列表内的相应记录。5.4.2搜索页面点击分类视频页的“搜索视频”框进入搜索页，内部输入关键字信息进行模糊搜索，搜索结果为匹配视频列表，点击列表标题进入视频详情页。可以点击x按钮清空输入的信息。点击取消返回上一层页面。搜索后的关键字信息会在搜索页记录，可以点击删除图标进行清空。图5.37搜索页获取本地搜索历史，展示在搜索页图5.38获取本地搜索历史获取输入的字节流，过程中调用getSearchList，获取搜索关键字的list图5.39获取字节流handleInputChange函数获取模糊搜索的list回调，并将关键字添加到本地搜索历史中。图5.40getSearchList函数删除搜索历史，点击删除按钮弹出确认框，清空data内的historyList和本地搜索历史记录。图5.41删除搜索历史返回上一层页面，点击“取消”返回上一层分类视频页图5.42返回上一层页面5.4.3视频详情页视频详情页，视频组件[4]点击播放按钮开始播放，视频页面下展示视频标题，包含收藏按钮和分享按钮。通过点击可以实现“收藏视频”和“取消收藏”功能，点击“分享”按钮会截取当前页面选择微信好友分享。图5.43视频详情页根据视频id获取视频数据进行展示图5.44加载视频数据判断视频是否被当前用户收藏，更新isCollectded标识图5.45判断用户是否收藏本视频点击收藏按钮的回调。isCollected=false状态表示视频未被用户收藏，点击“收藏视频”在user-videoCollection表添加用户的收藏数据；isCollected=true状态表示视频已被用户收藏，点击“取消收藏”执行云函数deleteCurrentCollect，删除当前用户的收藏的此条视频数据。点击操作执行后更新isCollected的状态。图5.46点击收藏按钮云函数deleteCurrentCollect，删除用户id=openid，数据id=itemid的数据。图5.47云函数deleteCurrentCollectdeleteCurrentCollect云函数是视频和文章收藏的通用函数，通过传入不同的“表名”、openid、itemid来删除数据库中的数据。点击播放按钮触发handlePlay事件，调用recentVideoPlay函数。当表中没有对应当前视频id和用户openid的数据，将本视频添加到最近播放列表；当表中已有相应数据，更新播放时间data。图5.48播放视频，添加视频到最近播放列表5.5文章模块5.5.1文章列表获取文章列表（5条），上拉触底获取新数据添加到当前articleList，下拉刷新清空文章列表获取新数据。图5.49文章列表页获取文章列表（5条），通过currentPage决定获取表中的新数据信息范围。图5.50获取文章列表上拉触底和下拉刷新。上拉触底获取5条新数据，添加到本地文章列表；下拉刷新重置currentPage=0，清空文章列表。图5.51上拉触底，下拉刷新5.5.2文章详情页获取文章信息展示，提供收藏按钮，收藏按钮固定悬浮在屏幕左下角，具有浏览记录功能。最近如果已浏览，刷新浏览记录的时间。图5.52文章详情页获取文章详细信息，并赋值给currentArticle图5.53获取文章信息云函数user-articleCollection，功能与视频收藏的云函数相同。user-articleCollection与article联表，执行删除用户收藏记录的功能。图5.54云函数u