基于微信小程序的《贪吃蛇》游戏的设计与实现

摘要PAGEII题目基于微信小程序的《贪吃蛇》游戏的设计与实现摘要随着网络信息的飞速发展，微信的各种功能也在逐步健全与完善，现如今微信当中具有一种不需要下载安装即可使用的\t"/item/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/_blank"应用--\t"/item/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/_blank"微信小程序，它属于\t"/item/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/_blank"小程序的一种，英文名WechatMiniProgram，它实现了应用“随时随地”的梦想，用户扫一扫或搜一下即可打开应用。用户可以通过公号关联，微信搜索,历史记录，线下扫码,附件商店，好友推荐等方式进入微信小程序。微信搜索分为两种，精确搜索和模糊搜索,目前大多数app只能使用精确搜索,而模糊搜索只针对大型品牌。在h5的页面上已经可以实现离线扫码。公共名称关联可以在同一个主体下绑定公众号和google以形成惟一的unionid,因此可以互相跳转,互推模板消息。朋友推荐属于产品的自传播属性,通过用户分享。进入历史的入口位于"发现小程序"。利用微信开发工具设计一款由微信小程序开发的贪吃蛇游戏，贪吃蛇游戏是一款休闲益智类游戏，通过手指触控屏幕，控制“蛇”的移动方向，使“蛇”能吃到果实以增加自身的长度，每吃一颗果实就增加游戏积分。不需要安装任何装载器，也不需要在安装后卸载，大大降低了手机的内存开销，做到随时随地，方便快捷。关键词：微信小程序AbstractAbstract Abstract AbstractWechatMiniProgramisakindofapplicationthatcanbeusedwithoutdownloadingorinstalling.Itrealizesthedreamofapplication"withinreach".Userscanopentheapplicationwithascanorasearch.ThesoftwareisbasedonHTML5technology,butbecausetheoverallexperienceonWeChat'soriginalbasisisbetterthanpureH5pages,theloadingresponsespeedisfast,thedataisinthecloud,andthereisnoneedtoinstall,occupymemory,orforceattention,namely,sweepanduse,afteruse,thesmallprogramwillautomaticallysortaccordingtothebrowsingtime,andtheoperationissimpleandconvenient.CansearchthroughWeChat,offlinesweepcode,corporateassociation,friendsrecommended,history,attachmentstoresandotherwaystoenterWeChatapplet.WeChatsearchisdividedintoprecisionsearchandfuzzysearch,currentlymostappscanonlyuseprecisionsearch,andfuzzysearchonlyforlargebrands.OfflinecodescanningisalreadypossibleonH5pages.CommonnameassociationscanbindpublicnumbersandGoogleunderthesamebodytoformauniqueunionid,sotheycanjumpfromonetoanother,pushingtemplatemessages.Friendsrecommendbelongingtotheproduct'sself-propagationattributes,throughtheusertoshare.Theentrypointintohistoryislocatedinthediscoveryapplet.Nearbystoresarebasedonlbs,andyoucanalsogetthelatestgadgetsonthesearchpage.Snakegameisacasualpuzzlegame,throughthetouchofafingerscreen,controlthe"snake"directionofmovement,sothat"snake"caneatfruittoincreasetheirownlength,eacheatafruittoincreasegamepoints.Donotneedtoinstallanyloader,alsodonotneedtouninstallafterinstallation,greatlyreducingthephone'smemoryoverhead,sothatatyourfingertips,runoutandthengoKeywords:WechatMiniProgram目录目录PAGE7目录摘要 IAbstract II第一章绪论 11.1微信小程序贪吃蛇项目选题背景及意义 11.1.1微信小程序开发相关技术 11.2准备工作 11.3设计论文章节 1第二章微信小程序贪吃蛇游戏开发环境的介绍和搭建 32.1开发环境的介绍 32.1.1微信开发者工具的介绍 32.1.2微信小程序模拟器 32.1.3微信小程序调试工具区 错误!未定义书签。2.2开发环境的搭建 错误!未定义书签。2.2.1微信小程序开发者工具安装 42.2.2微信小程序的appid申请 52.2.3新建一个小程序项目 52.3小程序分层架构 错误!未定义书签。第三章微信小程序贪吃蛇游戏需求分析 错误!未定义书签。3.1需求分析和可行性分析 错误!未定义书签。3.1.1需求分析 错误!未定义书签。3.1.2可行性分析 73.2微信小程序例功能描述 错误!未定义书签。3.2.1游戏首页 93.2.2“关于”页面 103.2.3微信小程序分享 11第四章微信小程序贪吃蛇游戏设计与实现 错误!未定义书签。4.1首页页面 错误!未定义书签。4.2游戏页面 154.2.1首页wxml代码 154.2.2计分器 254.2.3创建食物 错误!未定义书签。4.2.4获取滑动距离 错误!未定义书签。4.2.5改变方向 错误!未定义书签。4.2.6改变方向向左 错误!未定义书签。4.2.7游戏状态 错误!未定义书签。4.3“关于”页面代码 154.4微信小程序全局配置 15第五章总结与展望 305.1毕业设计总结 315.2工作展望 31致谢 31参考文献 32淮安信息职业技术学院毕业设计论文第一章绪论第一章绪论1.1微信小程序贪吃蛇项目选题背景及意义小程序是一种不需要在手机上下载就可以使用的app，又是一项门槛很高的创新，经过近几年的发展，已经形成了一个全新的应用程序开发环境和开发者生态系统。近几年来，小程序已经成为中国IT行业一项重要的创新成果，目前已经有150多万及更多的开发者参与到小程序的开发中来，通过我们的合作，推动小程序的发展，应用程序的数量超过100万，覆盖超过200个行业，每天活跃用户超过2亿。在许多城市也实现了地铁、公交等配套服务。小企业的发展将带来更多的就业机会。1.1.1微信小程序开发相关技术微信小程序相对于手机软件大部分公司不愿意将主营的业务放到微信这个平台上，防止被腾讯受限制，可是随着现在微信小程序生态的慢慢形成，小程序也慢慢地融入每个人的生活当中来，日活动用户量最高的时候高达2亿多，微信小程序的学习门槛并不高，学习非常简单，就是说微信小程序就基于手机平台的Html5的轻应用。开发微信小程序首先要掌握html和JavaScript语言，然后学会少量的css语言，还有在微信小程序中像素单位不是使用的px而是使用的rpx。这些只是前端的开发，后端微信小程序提供了腾讯云服务，我们可以把后台数据直接放在腾讯云上面，节省了自己编写后台数据的时间及精力。1.2准备工作初学和开发小程序，准备了很久，因为之前没有学习小程序，期间大量翻书，看教学视频，请教老师和身边有专业知识的同学，利用期间所学的知识和工具完成小程序。1.3设计论文章节整个论文设计有五个章节，各章主要内容如下：绪论主要介绍该款微信小程序的选题背景，所做准备和各章节主要介绍的内容。微信小程序贪吃蛇游戏开发环境的介绍和搭建，介绍该小程序的项目结构和开发时所用到开发环境和开发平台。小程序发的可行性分析，主要阐述对小程序开发的可行性分析、需求分析等。系统功能的实现，主要展示了该小程序完成后的运行效果和完成该小程序的主要代码。毕业设计总结与工作展望，描述本人对毕业设计的总结和心得体会。第二章微信小程序贪吃蛇游戏开发环境的介绍和搭建第二章微信小程序贪吃蛇游戏开发环境的介绍和搭建2.1开发环境的介绍2.1.1微信开发者工具的介绍微信开发者工具是微信官方为开发微信小程序提供的工具，集中开发、调试、预览、上传等功能。该小组发布了微信小程序开发工具、微信小程序开发文档和微信小程序设计指南，并提供了一个集开发调试、代码编辑、程序发布等功能于一体的全新开发工具，帮助开发者方便、高效地开发微信小程序。开机工具，开发人员需要用已经绑定到后台的微信号扫描二维码登录，接下来的一切操作都将基于此微信账号。程序调试主要有三大功能区：模拟器、调试工具和小程序编辑器2.1.2微信小程序模拟器图2-1小程序模拟器模拟器可以模拟小程序在微信客户端的表现。小程序的代码通过编译后可以在模拟器上直接运行。开发者可以选择不同的设备，也可以添加自定义设备来调试小程序在不同尺寸机型上的适配问题。2.1.3微信小程序调试工具区图2-2小程序调试工具调试工具分为

6

大功能模块：console:JavaScript原生默认不包含Console对象，Console是由托管对象(即tracker)提供的内置对象。用来访问调试控制台，在不同的浏览器会有不同的效果。Sources:Sources面板几乎是我最常使用的Chrome特性面板，也是解决一般问题的主要特性面板。一般来说，只要开发过程中遇到了js报错或其他代码问题，在检查了自己的代码后，我会首先打开Sources进行js断点调试，这几乎解决了我80%的代码问题。Network:主要是用于检测诊断网络通信是否有故障，一般检查ajax数据传输是否顺畅，或者检查服务器响应情况，异常的话，会有红色报错。Appdata:用于显示当前项目运行时小程序AppData具体数据，实时地反映项目数据情况，可以在此处编辑数据，并及时地反馈到界面上。Storage：用于显示在使用wx.setStorage或wx.setStorage同步之后，当前项目的数据存储情况。数据可在Storagepanel上直接删除(按delete键)，添加，修改wxmlPannel：用于帮助开发者开发转换为wxml的界面。实际的页面结构和对应于该结构的wxss属性可以在这里看到，而对应于该结构的wxss属性可以通过修改它在模拟器中实时看到修改(仅用于实时预览，不能保存到文件中)。在模块左上角调试选择器，您也可以快速找到页面中相应的组件wxml代码。2.2开发环境的搭建2.2.1微信小程序开发者工具安装打开/miniprogram/dev/devtools/download.html找到稳定版

StableBuild

win64位点击下载，下载好之后选择安装的目录安装。图2-3开发者工具安装2.2.2微信小程序的appid申请在浏览器搜索/，点击右上角的立即注册，填写相应的信息，点击立即注册。进入微信公众平台首页，点击配置服务器的开发设置，进入就可以看到自己的appid。这个只是测试使用的id，如需云开发需要另外申请云开发专属的账号。图2-4申请appid2.2.3新建一个小程序项目打开微信开发者工具，首先选择小程序，然后点击新建，把项目名称填写好，选择需要存储的目录，然后把之前申请的AppId填入，因为咱们没有申请云开发账号，所以下面要选择不适用云服务，语言选择JavaScript，然后右下角新建。图2-5新建小程序2.3微信小程序分层架构小程序的渲染层和逻辑层分别由2个线程管理：渲染层：界面渲染相关的任务全都在

WebView

线程里执行。一个小程序存在多个界面，所以渲染层存在多个

WebView线程。逻辑层：采用

JsCore

线程运行JS脚本。在系统层中，视图层和逻辑层通过

WeixinJsBridage进行通信：逻辑层将数据更改通知视图层，触发视图层页面更新，逻辑层将触发的事件通知逻辑层用于业务处理。具体的页面绘制流程如下：在绘图层中，主机环境将

WXML转换为相应的JS对象，当逻辑层中的数据发生变化时，我们需要通过主机环境提供的setData方法将数据从逻辑层传送到绘图层，然后对前后差异进行对比，将差异应用于原始的

Dom树，绘制出正确的

UI界面。第三章微信小程序贪吃蛇游戏需求分析第三章微信小程序贪吃蛇游戏需求分析3.1需求分析和可行性分析3.1.1需求分析贪吃蛇：这个名字，用意还是很明显的.贪吃蛇其实并不贪，它是人类不断前进的象征.正如现代的人类，只有不断努力前进，才能得到自己想要的东西。食物也是随机性的，就像当今社会的机遇一样，我们只有找到自己的目标才能成功。需求：用户为解决问题或实现目标而必须具备的条件或能力；系统或系统部件要符合合同、标准、规格书或其他正式规定文件规定的条件或能力。并且它具有极强的交互性和简单易用性，能让人在短期内熟悉其游戏规则，无论用户文化水平如何，都能很容易学会使用它。3.1.2任务概述及目标当今社会，人们生活节奏越来越快，工作和学习的压力也越来越大，极大多数的人都没有足够的时间休闲娱乐、放松自己。而这个小巧的移动游戏，可以让我们在任何时候都能享受到游戏，把我们从繁重的日常工作中解放出来。为了给玩家提供一个良好的游戏环境，游戏的控制模块必须易于理解和操作。对用户没有特殊的要求。普通用户经过几分钟的练习系就能熟悉这个游戏的规则。3.2微信小程序功能描述用于用户方便了解此小程序各项功能，下面对功能详细描述3.2.1游戏首页游戏首页使用简单的wxml语言完成可视化界面，然后使用wxss进行美化。在进入小程序之后点击开始游戏即可进入贪吃蛇游戏。3.2.2“关于”页面代码在“关于”页面，用户可以在关于中查看见小程序的信息以及作者的联系方式，如果有使用上面的问题可以随时联系作者。3.2.3微信小程序的分享进入小程序点击右上角的转发按钮然后跳出发送或取消按钮，用户可自行选择；弹出页面有此款小程序分享页面信息，用户可自行选择发送或取消；点击发送之后选择需要分享到的群聊或者好友，就能分享成功。第四章微信小程序贪吃蛇设计与实现第四章微信小程序贪吃蛇设计与实现4.1首页页面进入到小程序首页。页面分为两按钮，第一个按钮“开始游戏”，点击即可进入游戏。第二个按钮是“关于”，点击就可以进入关于页面，里面可以看到作者信息。图4-1首页设计关键代码：game:function()和about:function()这两处表示点击按钮触发函数，然后跳转到相应的页面，这种写法也可以简化，game:function(){}=>game(){},可以用这种方式来写。在页面中定义onShareAppMessage:function()此函数代表页面可以转发，小程序的右上角就会出现转发的按钮。wx.navigateTo()这里面填写的是页面跳转的路径url:'../snake/snake'。<view><button

class="button"

hover-class="hover"

bindtap="game">开始游戏</button></view><view><button

bindtap="about"

class="button">关于</button></view></view>“开始游戏”和“关于”按钮使用的是button，点击这两个按钮就会跳转到相应的页面。Index.jsGame:function(){

wx.navigateTo({url:'../snake/snake'

})},About:function(){

wx.navigateTo({url:'../about/about'

})},4.2游戏页面功能介绍:此页面就是贪吃蛇游戏的操作页面，用手指滑动屏幕来控制“蛇”的移动，让“蛇”触碰到“食物”来获取游戏的积分，屏幕左划就是让蛇向左移动，向右划就是向右移动同理也可以向上向下滑动。当蛇的头部碰到自己的身体、尾巴或者周围的墙时，就会结束游戏，计算当前的游戏分数，然后弹出重新开始的按钮，点击确定，继续游戏。页面布局，左上角是用户名，上面中间是当前的游戏的得分，右上角是历史最高分。图4-2游戏页面图4-3游戏结束页面4.2.1首页wxml代码代码如下：bindtouchstart是手指触摸开始，bindtouchmove手指触摸移动，bindtouchend手指触摸结束。{{score}}{{maxscore}}分别表示的是当前得分和历史最高分，{{ground}}使用二维数组定义的操场。Wxml代码：<view

class="control"

bindtouchstart="tapStart"bindtouchmove="tapMove"

bindtouchend="tapEnd"><view

class="scorenumber">{{score}}</view><view

class="scorenumber">{{maxscore}}</view><view

class="ground"><view

class="rows"

wx:for="{{ground}}"

wx:for-item="cols"><view

wx:for="{{cols}}"

class="block

block_{{item}}"></view></view>4.2.2计分器计分器需要有当前得分和历史最高分，首先要判断出当前得分和历史最高分哪个大哪个小，有两种情况，当前的得分比历史最高分高，就要把当前的分数赋给历史最高分。主要用到了if函数来判断。

Js代码如下：

//计分器

storeScore:function(){

if(this.data.maxscore<this.data.score){

this.setData({

maxscore:this.data.score

})}

wx.setStorageSync("maxscore",

this.data.maxscore)

},4.2.2初始化操场初始化操场：操场使用的是二维数组定义的，就是一维数组代表一行，二维数组是有行的同时也有列，也就是线和面的区别。表达式arr[][]。蛇的长度也是使用二维数组行数为1，吃到“食物”之后，使用push函数给蛇的尾部长度+1。//初始化操场

initGround:function(rows,cols){

for(var

i=0;i<rows;i++){

var

arr=[];

this.data.ground.push(arr);

for(var

j=0;j<cols;j++){

this.data.ground[i].push(0)

}}},

initSnake:function(len){

for(var

i=0;i<len;i++){

this.data.ground[0][i]=1

this.data.snake.push([0,i])

}},4.2.3创建食物创建食物：“食物”的出现的点不能和蛇的坐标重合，食物的出现应该随机操场的范围内，这个食物在页面加载的时候就应该存在，所以要在onLoad里面调用一下。随机分布使用的是Math函数，使用x和y定义行数和列数，Math函数要分别乘以这个行数和列数，这样就能把这个随机的数值控制在这个操场里面。//创建食物

createFood:function(){

var

x

=

Math.floor(Math.random()*this.data.rows)

var

y

=

Math.floor(Math.random()*this.data.cols)

var

ground=this.data.ground

var

snake=this.data.snake

ground[x][y]=3

for(var

i=0;i<snake.length;i++){

var

node

=

snake[i][1]

if

(x

==

0

&&

y

==

node)

{

createFood()

return

}

else

{

this.setData({

ground:

ground,

food:

[x,

y]})

}}},4.2.4获取滑动距离获取滑动距离横坐标的结束值（endx）和初始值（startx）相减，纵坐标的结束值（endy）和初始值（starty）相减就能获取他们的差值，差值就是蛇的滑动距离。如果蛇的初始横坐标大于结束的横坐标就代表蛇是往左移动的，初始横坐标小于结束横坐标就是往右移动。同理也可以算出上下移动。//获取滑动距离

var

heng=(this.data.endx)?(this.data.endx-this.data.startx):0

var

zong=(this.data.endy)?(this.data.endy-this.data.starty):0

if(Math.abs(heng)>5||Math.abs(zong)>5){var

direction

=

Math.abs(heng)

>

Math.abs(zong)

?

puterDir(1,

heng)

:

puterDir(0,

zong)

switch(direction){

case

"left":

if(this.data.direction=="right"){

return;

}

break;使用setData来改变data里面数据

this.setData({

direction:direction,

startx:0,

starty:0,

endx:0,

endy:0

})

}

},4.2.5改变方向改变方向：是用switch函数来写的，因为他现在是有四个方向。之前使用case定义了蛇的方向，如果他打印出来的是left，说明它是向左的。之后再移动函数move：function里面调用一下。//改变方向

changeDirection:function(dir){

switch(dir){

case

"left":

return

this.changeLeft();

break;

case

"right":

return

this.changeRight();

break;

},4.2.6改变方向向左改变方向向左：首先定义出蛇和长度的变量。如果蛇吃到了食物，长度也要发生变化，也就是整个蛇的坐标也要发生变化。吃到食物时蛇头继续往前走，尾部就暂停移动一次。

//改变方向向左

changeLeft:function(){

var

arr=this.data.snake;

var

len=this.data.snake.length;

var

snakeHEAD=arr[len-1][1]

var

snakeTAIL=arr[0]

var

ground=this.data.ground

ground[snakeTAIL[0]][snakeTAIL[1]]=0

for(var

i=0;i<len-1;i++){

arr[i]=arr[i+1]

}

var

x=arr[len-1][0]

var

y=arr[len-1][1]-1

arr[len-1]=[x,y]

this.checkGame(snakeTAIL)

for(var

i=1;i<len;i++){

ground[arr[i][0]][arr[i][1]]=1

}

this.setData({

ground:ground,

snake:arr

})return

true

}4.2.7游戏状态游戏状态：首先我们使用if条件句判断蛇的坐标有没有超过操场，之前定义过操场的行数和列数，只要蛇的坐标没有超过操场的行数和列数，就代表没有超出操场，如果超出操场了，就要把定时器关掉。如果蛇头的坐标和自己身体的坐标有一样的，说明这个蛇碰咬到了自己，这时候也要把定时器关掉，游戏结束。食物只有一个，如果蛇把食物吃掉，就会在其他地方随机出现，吃掉一个当前得分就会＋10。如果蛇头snakeHEAD[0]比0小或者蛇头的坐标比操场的长度cols或宽度rows大就说明蛇已经超出操场了。这时候就要clearInterval关掉定时器，游戏结束。如果蛇头snakeHEAD[0]的横坐标坐标与自己身体的横坐标

arr[i][0]有相同的还有蛇头snakeHEAD[1]的纵坐标与自己身体的纵坐标arr[i][1]相等，就说明蛇头已经碰到了身体，所以也要clearInterval关掉定时器。snakeHEAD[0]中的0表示蛇的横坐标，1表示纵坐标。如果snakeHEAD[0]蛇头的横坐标等于food[0]的横坐标和蛇的纵坐标snakeHEAD[1]等于食物的纵坐标food[1]相等食物就会消失，然后当前得分score会+10。//游戏状态

checkGame:

function

(snakeTAIL){

var

arr=this.data.snake;

var

len=this.data.snake.length;

var

snakeHEAD=arr[len-1]if(snakeHEAD[0]<0||snakeHEAD[0]>=this.data.rows||snakeHEAD[1]<0||snakeHEAD[1]>=this.data.cols){

clearInterval(this.data.timer)

this.setData({

modalHidden:false

})

}

for(var

i=0;i<len-1;i++){

if

(snakeHEAD[0]

==

arr[i][0]

&&

snakeHEAD[1]

==

arr[i][1])

{

clearInterval(this.data.timer)

this.setData({

modalHidden:false})}}if(snakeHEAD[0]==this.data.food[0]&&snakeHEAD[1]==this.data.food[1]){

arr.unshift(snakeTAIL)

this.setData({

score:this.data.score+10

})

this.createFood()

this.storeScore()

}},4.3“关于”页面进入微信小程序后，点击首页下面的“关于”按钮，页面跳转到“关于”的页面，页面分为分享小程序和“关于”小程序两块，小程序的分享按钮可以让用户自行选择分享这个小程序，关于有小程序数据来源和开发者信息。图4-4“关于”页面图4-5页面分享关键代码：

<view

class='cc'>

<text>数据存储说明</text>

</view>

<view

class='bdContent'>

程序会自动分析当前游戏得分是否比历史最高分高，如果得分比最高分高，就会覆盖历史最高分。

</view>

<view

class='cc'>

<text>用户信息与隐私说明</text>

</view>

<view

class='bdContent'>

由于微信小程序严格的限制，sudoLite现在、将来不会在未经您本人允许的情况下获取您任何信息，请放心使用。

</view>

<view

class='cc'>

<text>联系与分享</text>

</view>

<view

class='bdContent'>Email:

<text

class='link'

bindtap='copy'

data-type="email">2640919221@</text>

</view

>

<view

class='bdContent'>

如果您感觉到这个小游戏不错，可以将这个小游戏分享给您的朋友。

</view>

这一部分是关于页面的wxml代码，onShareAppMessage:

function

()

{return

{title:

'贪吃蛇',path:

'pages/index/index'

,imageUrl:'/img/fx.jpg',}}在js中定义onShareAppMessage这个函数，就能实现小程序的页面转发，点击页面右上角的三个点就会出现转发按钮。在onShareAppMessage函数中title是转发的标题，path是转发的路径，注意这个路径必须是小程序中有的路径且需要用英文的‘’来扩起来。imageUrl是转发时所显示的图片的路径，这个图片可以是本地图片，也可以是网络图片，支持两种格式，一种是png格式，还有一种是jpg格式。如果不写imageUrl则默认使用截图。4.4微信小程序全局配置对于一个小程序项目而言，最重要的文件是app.json，如果是一个有文件的文件夹，它会看该文件夹中是否有app.json文件，如果有，则它会认为是一个小程序项目，则会打开该项目，如果文件夹中没有app.json文件，则提示无法创建项目。app.json必须放置于项目的根目录下，它是小程序项目的全局配置文件。在小程序代码包准备完成进行启动后会先读取app.json文件，进行小程序的初试化，比如初始化整个小程序外框样式，获取首页页面地址等。图4-6小程序全局配置 首先来讲一下编辑器中几个文件的作用及功能。App.wxss：这个叫公共样式，他是一个小程序的公共样式表，他有点类似于我们认识的html5里面的css文件，如果小程序其他页面没有写样式，就会默认使用公共样式。App.json：这个是全局的配置文件，创建的所有页面文件都要在app.json文件中的pages栏中写入，不然小程序就识别不出这个文件。Window栏是小程序的窗口表现，比如说tabbar这个微信小程序底部导航，就是放在window中的。App.js：文件是比较特殊的，它是微信小程序的入口文件，掌控整个小程序的生命周期，同时有一些全局的属性、变量也存放在这个文件中。不需要导入，提高代码的可重用性。第五章总结与展望第五章总结与展望5.1毕业设计总结吴军博士曾说：“如果一个大学大部分的毕业生，回想起自己的大学时代，始终充满了负面的情绪，那说明这所大学办的很失败。”他还说：“一所真正的好大学，是让它的毕业生在今后不需要提大学的名字，就足以证明自己，甚至这所大学，能够从毕业生的身上沾光。这说明它真的把人培养好了，如果是反过来，一所大学的毕业生在人前总需要提母校的名字，才能显得自己有水平，那么这四年的大学生涯算是耽误了。如果要靠沾大学名气的光才能在社会上混，那么在这个大学过去攒下的老本，过一段时间就会被吃光的。”大学期间没有接触过微信小程序，都是在手机上使用微信小程序，也没有想过去