基于微信小程序的东软校园助手的设计与实现.doc

《基于微信小程序的东软校园助手的设计与实现.doc》由会员分享，可在线阅读，更多相关《基于微信小程序的东软校园助手的设计与实现.doc（32页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、摘 要在如今互联网+的时代，几乎所有高校都拥有自己的校园服务平台，我们东软也不例外。东软的校园服务主要靠教务网和微信公众号，平心而论，这样的校园服务方式有许多的不便以及滞后。随着微信小程序在人们生活中的渗透，以及其轻巧方便易开发的特点，许多机构、公司和高校都开发了属于自己的便利小程序了，东软作为IT高校又岂能落后。于是开发出基于微信小程序的“东软校园助手”就显得很有必要了。本文中所描述的“东软校园助手”是基于微信小程序轻巧方便易开发的特点和东软对该小程序的需求来开发的。其整合了东软快讯、课表查询、校历查询、成绩查询、后勤报修、失物招领、热水费查询、水电费查询等功能，以方便东软学子能获取更加便捷

2、的校园服务。关键词：校园助手；校园服务；微信小程序；AbstractIn the era of Internet plus, almost all universities have their own campus service platform, and Neusoft is no exception. To be honest, Neusofts campus service mainly relies on the educational administration network and the WeChat official account. Such a campus ser

3、vice mode has many inconveniences and lagging behind. With the penetration of wechat small programs in peoples lives, as well as its light, convenient and easy to develop features, many institutions, companies and universities have developed their own convenient small programs, how can Neusoft, as a

4、n it University, fall behind. Therefore, it is necessary to develop Neusoft campus assistant based on wechat small program. The Neusoft campus assistant described in this paper is based on the characteristics of wechat small program, which is light and easy to develop, and the needs of Neusoft for t

5、he small program. It integrates the functions of Neusoft express, timetable query, school calendar query, score query, logistics application, lost and found, hot water fee query, water and electricity fee query, so that Neusoft students can get more convenient campus services.Key words: campus assis

6、tant; campus service; wechat applet;目 录第一章 绪论11.1 项目背景11.2 国内外发展状态21.2.1 校园服务平台21.2.2 微信小程序21.2.3 综述3第二章 相关理论和技术42.1 微信小程序42.1.1 简介42.1.2 开发工具42.2 技术架构52.2.1 目录结构52.2.2 配置62.2.3 开发框架62.2.4 引用WeUI组件库72.3 本章小结8第三章 需求分析93.1 东软校园助手需求分析93.2 系统功能需求93.3 本章小结10第四章 系统设计114.1 系统设计114.1.1 设计微信小程序的原则114.1.2 系统功

7、能设计124.2 小程序页面设计134.2.1 第一层页面144.2.2 第二层页面154.2.3 第三层页面174.3 本章小结17第五章 系统的实现与测试185.1 小程序的实现185.1.1 项目的创建和配置185.1.2 引入WeUI组件库的样式表185.1.3 跳转实现185.1.4 轮播图实现185.1.5 九宫格实现195.1.6 其他功能实现195.2 页面及功能测试195.2.1 模拟器调试体验评分195.2.2 真机调试205.3 兼容性测试235.4 网络测试245.5 本章小结25第六章 总结与展望266.1 总结266.2 展望26参 考 文 献27致 谢29广东东软

8、学院本科毕业设计（论文）第一章 绪论1.1 项目背景近十年，信息技术发展迅猛，各行各业纷纷用上了信息系统，教育界自然也不会落后，高校的信息化建设显得尤为重要1。现今，各种技术更新换代的速度越来越快，传统的校园服务已经成为了一种负担，不仅开始变得不方便，而且已经无法满足学生们对校园服务需求。在东软，师生们获取校园服务主要是由教务网、公众号和线下三者组成，单一都不能有完整的服务。不仅如此，像是教务网，其需要连接内网才能访问，还要打开浏览器访问相关的Web地址，而且教务网一旦访问的人数过多就会崩溃；公众号则需要微信关注相关的公众号，且服务较为单一；线下则更加麻烦，要去相关部门所在的办公室。这样服务方

9、式极为不便，甚至是令人觉得厌烦。从2019年CNNIC发表的中国互联网络发展状况统计报告中可以看出，在上年的12月之前，我国使用网络的人数就已经有8.29亿人了，并且在这些使用者当中用手机上网的人数有8.17亿，占到了98.6%如此高的比例，而使用电脑上网网民却只占了48%的比例2，说明了现如今几乎所以网民都用手机上网；而手机网民必然会使用微信，微信官方通过发布2018微信年度数据报告称在2018年全年中，登陆微信的用户每天都在10.1亿以上3，从而说明了几乎所有的手机网民都会使用微信。一台拥有微信的手机在如今网民的生活中不可或缺，面对如此大的群体，微信的任何举动都将变得很重要。公众号曾经受到

10、了媒体和商户的重用，他们通过在公众号上发推文，目的是获取用户流量，让关注的用户能看到他们的商城广告链接，以此代替传统的app，但是事与愿违4。在2017年推出了微信小程序后，小程序便开始遍地开花，人们也开始常常在生活中使用到小程序，例如点餐、打车等很多地方都用到，因此，现在很多的企业和个人都推出了相关的微信小程序。在如今的生活当中，微信小程序无处不在，它改变了我们的生活，使我们的生活越来越方便。微信小程序其实也是一个app（Application的简称，即应用软件，通常是指iphone、安卓等手机应用软件21），只不过它是镶嵌在了微信里，在微信上才能使用，小程序应场景的设计使得它成为互联网一股

11、新的血液，它的出现被业界称为变革的先驱者。随着小程序的推广和发展，微信小程序早已渗透到各行各业、衣食住行各方各面，说它进入了“黄金时代”一点也不为过。如今是互联网时代，我们作为走在科技前沿的大学生早就使用过了各种各样的app了，许多app很好用，也很方便，我们尝尽了它的甜头5，却也被一个问题深深的困扰着，那就是手机内存不足。对于微信小程序来说，不存在这样的问题，不用下载不占内存的特点赢得了大学生的欢心6。针对传统校园服务方式的滞后性以及诸多的不便，而且小程序在大学生群体的备受欢迎，基于此推出一款小程序基于微信小程序的东软校园助手，将大学日常生活中一些所需要的校园服务，例如东软快讯、水电费查询、

12、热水费查询、校历查询、失物招领、后勤报修、课表查询、成绩查询等服务整合到一个小程序当中，方便东软广大纤纤学子随时随地就能在小程序上获取校园服务。1.2 国内外发展状态1.2.1 校园服务平台随着信息化建设欣欣向上的发展，高校信息化也在稳步推进，各个高校都纷纷使用上了自己的信息系统。但是许多高校的各个业务系统是相互独立，使用的方式是单一的web访问，在今天，这样的信息系统早已落后，而且这样的方式不再是及时有效、方便快捷7。曾经，信息化的建设使得数字化校园平台风靡一时，很多高校纷纷效仿建立并应用，这些平台提供了基本的教学管理服务，在一定程度上方便了师生，但也存在许多明显的问题，如此看来传统的校园服

13、务平台已经不再能适应校园服务的主流了。1.2.2 微信小程序在这个移动互联网的时代下，轻量化渐渐成为了主流趋势8。作为未来的主流趋势，微信小程序优势不仅仅是具有轻巧的特点，其优势不言而喻，许婉韵拿微信小程序与原生APP进行对比，得出的结论是小程序的有很大的优势，例如小程序不用安装，不用卸载，用完退出即可，容易获取；开发起来时间周期短，经济成本低；易于传播，属于轻量级别应用程序，而且小程序拥有微信庞大的用户群体；另外还具有现今比较流行的线上支付功能9。不仅有徐婉韵通过对比得出优势，更有丁益、钱文波和关维娟三人对微信小程序做了一个调查，通过分析调查内容得出以下结论，小程序目前市场占有率高，比肩AP

14、P，在如此庞大的用户市场上，已经发布了的小程序少之甚少，离饱和状态相差甚远，许多产业需求量依然巨大，以后会有越来越多的小程序被开发，并发布出来，以上结果都是因为小程序的轻量化和高便利的优势10。小程序拥有如此明显的优势，未来一定会大有作为。1.2.3 综述开发出基于微信小程序的东软校园助手，一是可以解决传统校园服务平台的不方便、移动端不实用等问题，二是可以解决教务网访问的人数过多崩溃，访问速度慢等问题，三是广大师生更能有效地、及时地、便利地获取各种校园服务，四是微信是人人必备的软件，广大师生无需下载APP或者访问web端，直接在微信上就可以操作，五是在开发方面能节约成本，而且随着它的发展，以后

15、其涉及到的技术会越来越多，以后的二次开发也更加方便快捷。综上所述，此时开发基于微信小程序的东软校园助手是天时地利人和。第二章 相关理论和技术2.1 微信小程序2.1.1 简介之所以要叫微信小程序，是因为它要在微信上才能运行，可以在为微信上面分享，使用也无需提前下载，用户在使用上有简便轻巧，实用高效的体验。微信小程序有数十亿微信用户，在海量的用户基础上，它的传播速度是非常快的，而且使用感觉也很棒。微信小程序是新的开发技术，但其语言不完全算是的语言，其语言与web开发语言极度相似，掌握web开发的人员便可在短期内阅读官方文档后快速上手。微信小程序容易上手，其开发也是比较容易，相比web，开发者开发

16、微信小程序的开发周期大大缩短。经过简单的学习和实践，开发人员可以快速、独立的完成和部署一个新小程序。开发微信小程序以个人主体去微信公众平台注册帐号一般不需要费用，开发好微信小程序后上传到官网审核通过后就可以使用了。当然，开发和发布微信小程序也有它的条件的，这个条件比较简单，那就是年满18岁的中国公民11。概括来说，小程序主要使用了JavaScript、WXML和WXSS三种技术，与web的开发很相似，可以算做是Web应用，但却有一定的去区别。微信小程序是在微信上才能使用的，而微信只分Android和IOS系统，另外就是PC端的微信开发者工具（如表2-1所示）；而Web运行的环境比较复杂，它要面

17、对这各种不同内核的浏览器。表 2-1 微信小程序各运行环境区别运行环境逻辑层渲染层微信开发者工具NWJSChrome Web ViewIOSJavaScript CoreWK Web ViewAndroidX5 JS CoreX5浏览器2.1.2 开发工具一般我们用官方给的微信开发者工具来开发小程序，它具有简单高效的特点，调试公众号网页和调试小程序是它的两种开发模式，它的前身是以前的公众号网页调试工具12。从开发语言的角度分析微信小程序和web没有太大区别：它们的逻辑代码用的是JavaScript，页面结构代码文件的话，WXML和HTML也差不多，样式表WXSS也是通过CSS的补充和修改而派生

18、出来的。但是，由于微信小程序开发与传统web页面在同一环境下运行时的机制不一样，因此，微信小程序和web的开发工具是不一样的。微信开发者工具给开发者提供了很多功能，代码编写、运行、调试都不在话下，另外它还具有真机预览、模拟器调试体验评分等功能呢。2.2 技术架构2.2.1 目录结构一个微信小程序包含一个作为核心的app和多个page13，app是整个小程序的入口，app对于一个小程序而言就相当于大脑对于一个人而言，其重要程度不言而喻，没有app的小程序就像是失去了大脑，根本就不能运行。根目录下的3个app文件是小程序的核心，它们必须放在同一个目录且是项目的根目录下，如图2-1所示。图 2-1

19、app文件结构在这3个文件中必须得有的是app.js和app.json，缺了它们当中的任何一个小程序都无法运行，而app.wxss可有可无，但是一般开发者为了追求样式复用和样式统一性，会选择配备app.wxss。另外3个app文件都不允许有错误，否则整个小程序都会无法运行。这3个文件的作用如表2-2所示。表 2-2 app文件表文件必须作用app.js必须有小程序逻辑app.json必须有小程序公共配置app.wxss非必须有小程序公共样式表小程序一般会有很多个页面，每个页面就是一个page，一般page由.wxml、.json、.js和.wxss这4个类型的文件组成，在这当中，.wxml是页

20、面描述文件必须得有，.js是页面启动文件也必须要有，.wxss和.json则不一定了，因为app文件中有了配置全局的app.json和app.wxss两个文件，当页面没有自己的变动就可以不需要.wxss和.json这两个文件了。另外，这4个描述页面的文件必须放在同一目录下，并且文件名也要相同。这4个类型文件的作用如表2-3所示。表 2-3 页面文件表文件类型必须作用.js必须有页面的入口和逻辑.wxml必须有页面的结构样式.json非必须有页面独有的配置.wxss非必须有页面的样式表微信小程序对目录结构有着严格的要求，除了上述的3个主体文件和page页面的4个文件类型外，只允许wxs、png、

21、jpg、jpeg、gif、svg、json、cer、mp3、aac、m4a、mp4、wav、ogg、silk这些类型的文件上传。2.2.2 配置微信小程序的配置包含3种，第一是全局配置（即app.json），主要是多tab 的设置和按钮的跳转路径、网络超时、窗口表现和页面文件的路径等14；第二是页面配置（即.json文件），覆盖重复项，保留不同项是其主要内容14；第三种是sitemap配置（即sitemap.json），主要是用来配置和管理小程序的页面是否允许被索引15。2.2.3 开发框架如图2-2所示，微信小程序分为视图层、逻辑层和系统层。其中系统层主要起到联通作用，通过利用JSBrida

22、ge给予显示层与逻辑层稳定的通信桥梁，如此说来，视图层和逻辑层一起组成了小程序的核心。图 22 技术框架图逻辑层同时处理着两件事，那就是接收视图层的反馈和把处理过的数据发给视图层。视图层也同时处理着两件事，一是显示出逻辑层映射过来的信息，二是给逻辑层发送用户的操作。WXML页面结构和WXSS页面修饰共同造就了视图层。2.2.4 引用WeUI组件库WeUI是微信开放文档里所提供的专门为开发者而设计的基础样式库，它同微信原生视觉体验一致，能使用户在使用时感到其统一性16，该组件库不仅能方便开发者设计使用，还能给开发者提供许多能调用的资源。使用WeUI组件库最主要是要先引用其样式表weui.wxss

23、，使用方法也比较简单，把WeUI组件库目录里的weui.wxss文件复制到自己创建的小程序的样式表目录下就行了，然后在自己项目的app.wxss里引用weui.wxss就行了，在app.wxss加上一行引用代码，代码为：import路径/weui.wxss;例如：import style/weui.wxss;只要加上了这样一行代码，在整个小程序里都能像app.wxss里的样式一样使用自如了。想要使用WeUI组件库里的表单或组件什么的可以使用example项目里的默认组件，使用方法也比较简单，复制对应表单或组件的相关代码，主要是.wxml和.js文件里的相关代码，如果有.wxss文件的话就要看自

24、己需要的表单或组件是否需要运用到里面的样式了，不需要用到就可以不理会，要用到的话就得复制对应的样式代码到自己的项目里，然后根据自己的小程序系统设计进行修改。微信小程序官方给的WeUI组件库也是很人性化，不仅仅给了前端样式，还给了对应的js，方便开发者调用相关的资源，当然这样开发出来的小程序能令用户的使用感知更加统一，使服务方与用户双赢，达到了官方的愿望17。2.3 本章小结本章主要是说明了微信小程序是什么，它与web的区别，用什么工具来开发微信小程序，开发微信小程序的目录结构是怎样的，它又要如何去配置和它的技术框架是怎样的，以及怎么引用WeUI组件库。通过对上述内容的介绍，使阅读者对微信小程序

25、有个大概的了解。第三章 需求分析3.1 东软校园助手需求分析在第十二届全国人民代表大会上，许多的政策和观点被提出，其中，李克强总理解释了“互联网+”的概念，要想提高我国经济，各行各业要合理运用科技的力量，与互联网挂钩，并以此为新方向18。在此背景下，校园服务平台APP层出不穷，弊端也层出不穷。随着经济的发展和科技的进步，智能手机正在全民普及，移动通信网络也在不断的完善，使用手机上网的用户比例也越来越高，互联网应用的地位在用户的生活中愈加重要19。而微信恰恰是手机网民必不可少的软件，通过阅读2018微信年度数据报告便可知道，2018年登陆微信的用户每天都有10.1亿人3，如此庞大打用户群，自然少

26、不了大学生群体，说白一点，微信是我国大学生必不可少的软件。在此前提下，把东软校园助手开发成小程序势在必行。3.2 系统功能需求东软校园助手作为一个校园服务的微信小程序，自然要有校园服务的常规功能和一些传统校园服务平台所没有的功能，也要像常见的小程序那样方便轻巧，开发便捷。根据东软学子常用校园服务和教务网常规功能，此小程序应包含有“东软快讯”、“校历查询”、“校园卡”、“学生证”、“课表查询”、“热水费查询”、“水电费查询”、“成绩查询”等常规功能和“失物招领”、“物业报修”等特殊功能。“课表查询”主要是给同学们提供一个查询课表的服务，其功能设置有：周课表、学期课表、过去学期课表和过去学期周课表

27、，一般以周为单位，需要学年、学期和周数选择器。其功能相对比较简单，但是作用却是方便了广大东软学子免去了以往要连接内网，再登录教务网查询课表的繁琐。“成绩查询”主要是提供一个学期期末成绩查询的服务，其功能设置有：学期成绩查询，以学期为单位，需要有学年和学期选择器。其作用也是较为明显，以往东软学子查询成绩必须要连接内网，然后上教务网查询，或者用广东东软学院校园助手公众号查询，但是往往公众号查询一开放很快就会因被不良学生举报被封而停止服务，此功能能方便东软学子随时随地查询成绩。“校历查询”主要是提供一个校历查询的服务，让一些需要提前购票的学生可以提前准备买票。其功能设置有：学期校历查询，以学期为单位

28、，需要有学年和学期选择器。“校园卡”主要是给同学们提供一个校卡信息查询和校卡挂失、补办的服务，其功能设置有：校卡信息查询，校卡挂失、补办。此功能的设置可以挂失期间防止校卡被拾取者消费，补办手续比以往简单快捷。“学生证”主要是给同学们提供一个学生证信息查询和学生证补办的服务，其功能设置有：学生证信息查询，学生证补办。此功能的设置比以往开学时辅导员通知补办学生证的方式简单快捷。“东软快讯”主要是给同学们提供一个东软校内资讯的服务。以往东软的校内资讯的发布是五花八门，各种公众号和教务网，没有一个集中的平台，此功能就显得很有必要了。“热水费查询”主要是给同学们提供一个热水费查询的服务，查询以月为单位，

29、需要有年月选择器。以往热水费都是收取方贴在墙壁上，经常都不会被留意到，所以常常出现忘交热水费的现象，此功能的设置不仅方便了同学们查询热水费，还起到了提醒同学们交热水费的作用。“水电费查询”主要是给同学们提供一个水电费查询的服务，查询以月为单位，需要有年月选择器。以往水电费都是收取方贴在墙壁上，经常都不会被同学们留意到，所以常常出现忘交水电费的现象，此功能的设置不仅方便了同学们查询水电费的多少，还起到了提醒同学们交水电费的作用。“失物招领”主要是给同学们提供一个官方的失物招领的服务，此功能在本小程序中是比较重要的功能之一。在东软就读期间，我发现许多丢了东西的同学都是通过发朋友圈和公众号帮忙寻找，

30、没有一个统一的官方的失物招领平台，找回来的概率很低，如果能有个官方的失物招领平台，那么找回几率就会比较高了。“物业报修”主要是让同学们有一个更加方便的物业报修服务，此功能在本小程序中是比较重要的功能之一。在东软，宿舍里有东西损坏了需要物业的人来修理是一件比较麻烦的事情，需要走路到物业办公室去登记，然后再等物业安排人员过来修理，经常要等很久才回来，而且有时候来修理宿舍又没人在，这个功能的设置实现了东软学子网上报修的愿望，而且在报修时可以备注修理时间，以后再也不会修理员来了宿舍没人的尴尬情况了。3.3 本章小结本章主要是分析了我院对于开发东软校园助手的需求得出有必要开发此小程序和分析了东软校园助手

31、的需求，确定了需要的功能以及为什么需要此功能和该功能的作用。第四章 系统设计4.1 系统设计4.1.1 设计微信小程序的原则微信官方希望能帮助开发者实现小程序轻便简洁的特性，不仅能让用户接受此小程序，而且还能更加的适应和支持不同的需求，当然，这一切都要以尊重用户的知情权与操作权为前提，这样能令小程序的服务和用户完美契合，实现双方共赢17。微信小程序官方给出了5条建议，一是友好礼貌、二是清晰明确、三是便捷优雅、四是统一稳定、五是视觉规范。下面进行逐一介绍：第一点，友好礼貌。人的注意力很容易被周围的突出点所干扰，针对这一特性，开发者在设计小程序是就应该要留意这个问题，避免用户在使用小程序时被无关因

32、素干扰到，要和谐展示小程序，友好引导其操作。建议明确每个页面的重点，让用户一眼就能明白，另外不要出现干扰重点的无关因素。建议流程明确，要求做到在用户进行相关的操作时，页面要顺畅，不要有与用户目标流程不符的内容出现，不能无故打断用户操作。第二点，清晰明确。作为开发人员，我们有责任、有义务让用户知道这是哪里，这里有什么，在这里能干嘛，从这里能去哪，使其在哪都游刃有余，使其有更好的体验。在此建议做到导航明确，来去自如、减少等待，反馈及时、异常可控，有路可退。导航明确，来去自如要求做到导航时用户能明确，当前在哪，可以去哪，如何回去，使导航确保用户在网页中浏览跳转时不迷路。建议在设计小程序时给所有的次级

33、页面左上角都加上一个返回上一级页面的操作。减少等待，反馈及时则是要求一旦出现了加载中和等待，要缓解用户的不良情绪，并及时给予反馈。尽量设置提示弹窗，载入进度条，加载动画和取消操作。异常可控，有路可退要求做到当异常情况发生时，不能让用户没有地方可去，卡在某一个地方这种尴尬境地，要异常状态提示，并且还要告诉用户解决的方法，使其有退路。第三点，便捷优雅。我们都知道手机使用手指操作的准确性比以往电脑使用键盘鼠标的操作差很多很多，但是小程序建立在手机微信之上，不得不使用手指操作，为了减少手指操作的烦恼，开发者在设计时要充分利用手机的特性，多多的利用现有资源，利用接口提升性能。尽量减少输入，避免误操作。减

34、少输入要求开发人员在开发时，可以用控件来代替输入的要用控件，可以用接口的要用接口，可以不用输入的就不要让用户输入。避免误操作要求做到在设计控件时，要考虑控件的尺寸，使其适合手指的操作，不会因为太小而导致手指误触。使用WeUI组件可以有效的避免不同屏幕的适配问题。利用接口提升性能要求做到尽可能的去利用微信官方推出的一套标准控件库，其已经充分考虑手机页面特点和屏幕适配问题，保证了页面的可用性和高效的操作性能。第四点，统一稳定。微信小程序官方建议开发者在设计时要注重各个页面的风格要统一，页面跳转不能有太大的格调变动，要有延续性，控件的尺寸颜色等也要一致。页面的统一性和延续性能够使用户得到更好的体验，

35、降低跳转所带来的不适感。第五点，视觉规范。字体的尺寸和颜色要和系统一样，列表、表单输入、按钮、图标等也要尽量统一样式。4.1.2 系统功能设计此小程序的功能设计较为丰富，以满足广大东软纤纤学子的各种需求。其中主要功能有10个，分别为：“东软快讯”、“失物招领”、“校历查询”、“物业报修”、“课表查询”、“成绩查询”、“校园卡”、“学生证”、“热水费查询”、“水电费查询”。不同的功能包含着不同的操作模式及操作内容，具体见下文，如表4-1所示。表 41 东软校园助手主要功能功能项操作操作内容课表查询课程详情；选择学年、选择学期、选择周数点击可查看课程详情；详细的周课表成绩查询选择学年、选择学期具体

36、学期成绩表校历查询选择学年、选择学期具体学期校历失物招领自动显示列表；输入数据滑动使用列表；通过登记实物信息上传到后台再显示到列表物业报修输入数据通过登记相关信息上传到后台显示到物业的后台列表校园卡挂失；取消挂失；补办一键挂失，拾取者无法在挂失时间段内刷卡；取消挂失后可以刷卡；当找不回时可以一键补办，相关单位收到补办消息后直接补办，办理完后通知同学去取卡学生证补办当学生证丢失而且找不回时可以一键补办，相关单位收到补办消息后直接补办，办理完后通知同学去取证东软快讯自动显示资讯列表，下拉加载更多资讯；点击浏览具体资讯内容下拉加载更多资讯；点击某条资讯跳转到第三层页面对应的具体资讯内容页热水费查询选

37、择年、选择月；选择宿舍双列选择框选择年月；双列选择框选择楼号宿舍号水电费查询选择年、选择月；选择宿舍双列选择框选择年月；双列选择框选择楼号宿舍号除了上述的10个主要功能外，其他功能有“失物/拾物登记”、“报修列表（物业）”、“详细快讯”、“推送功能”、“分享功能”等，具体见下文，如表2-1所示。表 42 东软校园助手其他功能功能项操作操作内容失物/拾物登记提交失物/拾物的相关信息填写失物/拾物的相关信息并且提交到服务器上报修列表（物业）完成修理已经修理好的可以点击完成修理详细快讯点赞；评论；转发推送功能通知推送点击进入小程序查看通知分享功能点击发送点击右上角的分享按钮就可以把小程序发送给微信好

38、友4.2 小程序页面设计东软校园助手小程序的页面主要分为3层。分别用了“首页”、“功能”、“消息”、“我的”4个主要的page构成第一层；第二层页面是各个功能的页面，主要有“东软快讯”、“物业报修”、“校历查询”、“失物招领”、“成绩查询”、“校园卡”、“学生证”、“物业报修列表（物业）”、“热水费”、“水电费”、“点赞我的”、“评论/回复我的”、“艾特我的”、“转发我的”、“个人信息”、“我的收藏”、“我的浏览”等；第三层是第二层各个功能页面里的附加功能页面，主要有“校园资讯”里的“具体资讯内容”、“失物招领”里的“失物/拾物登记”等。通过这三层页面来展示“东软校园助手”这个微信小程序，如图

39、4-1所示。图 4-1 “东软校园助手”页面设计4.2.1 第一层页面第一层页面由全局配置的顶部标题“东软校园助手”、底部“首页”、“功能”、“消息”、“我的”四个按钮和四个按钮对应的页面组成。（a）app.json-小程序全局配置全局配置：顶部标题为东软校园助手、背景为白色、底部导航栏的按钮有“首页”、“功能”、“消息”、“我的”四个，它们都是由对应的文字和图标组成。（b）“首页”页面第一层页面的第一个page-“首页”是小程序的精选内容页面，页面呈现为三栏纵向布局，页面顶部为轮播图，轮播的图片为东软比较有代表性的照片，以展示我校的美丽风景和东软学子的风采；中部为两行三列的九宫格型功能表，具

40、体的功能为此小程序的主打功能：“校历查询”、“失物招领”、“课表查询”、“物业报修”、“成绩查询”、“校园卡”；底部是东软快讯的精选，可以下拉显示更多，点击具体资讯跳转到第三层页面的具体资讯内容页。（c）“功能”页面第一层页面的第二个page-“功能”是小程序的功能列表，整个页面由九宫格型功能表组成，功能表包括了所有的功能，有“东软快讯”、“物业报修”、“校历查询”、“失物招领”、“课表查询”、“校园卡”、“成绩查询”、“学生证”、“热水费”、“水电费”，最后还有一个功能是添加功能（此用来添加后续开发的功能），所有功能按照九宫格类型排列为三行四列。点击功能按钮，则会触发页面跳转到第二层页面的对

41、应功能的页面。（d）“消息”页面第一层页面的第三个page-“消息”是小程序消息列表和通知页面，页面是两栏纵向布局，顶部是一行四列的九宫格型条状链接功能表，功能包括“点赞我的”、“评论/回复我的”、“艾特我的”、“转发我的”四个功能，然后下面一栏是可竖直滑动消息列表。（e）“我的”页面第一层页面的第四个page-“personal”，是“我的”页面，主要是展示自己相关信息和历史操作等的页面，页面呈现为三栏纵向布局，顶部是学生校园平台照片和学号、姓名组成的跳转链接，中间一栏由最近浏览、我喜欢的和我的收藏三个跳转链接组成，底部是由功能反馈和小程序介绍两个跳转链接组成。4.2.2 第二层页面（a）“

42、课表查询”页面page-“timetable”是此小程序的主要功能“课表查询”的页面，其主要作用是查看课表。页面由课表表格组成。（b）“成绩查询”页面page-“achievement”是此小程序的主要功能“成绩查询”的页面，其主要作用是对应的某个的学期成绩列成表格显示出来。页面为两栏纵向布局，学年和学期组合的两列选择器被我放在了顶部一栏；底部一栏是成绩表，成绩表则是由课程名称、学分和成绩3种内容构成。（c）“校历查询”页面page-“calendar”是小程序的“校历查询”功能的页面，其主要作用是方便同学们查询校历，以学期为单位查询。页面为两栏纵向布局，顶部一栏由学年学期双列选择框构成，底部

43、一栏则是由校历表的图片。（d）“校园卡”页面page-“campusCard”是小程序的“校园卡”功能的页面，其主要作用是让同学们查询校园卡信息和校卡挂失、补办。页面为两栏纵向布局，顶部是校园卡信息栏，底部一栏是由“一键挂失”和“一键补办”两个行按钮组成。（e）“学生证”页面page-“studentCard”是小程序的“学生证”功能的页面，其主要作用是让同学们查询学生证信息和学生证补办。页面为两栏纵向布局，顶部是校园卡信息栏，底部是“一键补办”行按钮。（f）“东软快讯”页面page-“校园资讯”是此小程序的主要功能“东软快讯”的页面，其主要作用是方便同学们了解东软的新闻。页面是由滑动新闻列表

44、组成。（g）“物业报修”页面page-“PropertyRepair”是此小程序的主要功能“物业报修”的登记页面，其主要的作用是登记相关的报修信息。页面为两栏纵向布局，顶部一栏是页面5个纵向失物/拾物相关信息填写的文本框，有联系人姓名、电话、维修内容、地点、备注；底部一栏则是提交按钮。（h）“报修列表”页面page-“repairList”是此小程序的主要功能“物业报修”的报修列表页面，其主要的作用是同学们报修的相关的报修信息列成表格显示出来，本页面是物业方才能看到的页面。页面由报修列表构成。（i）“失物招领”页面page-“loseRegisterList”是此小程序的主要功能“失物招领”的

45、失物/拾物列表页面，其主要作用是把同学们登记的失物/拾物相关信息列表显示出来。页面由失物/拾物登记行按钮和失物/拾物列表构成。（j）“热水费”页面page-“Hot-waterCharge”是此小程序的主要功能“热水费”的页面，其主要作用是查看某个月份的热水费。页面为两栏纵向布局，宿舍号和年月组合的两列选择器被我放在了顶部一栏；底部是由两行label组成，分别是使用电数和合计费用。（k）“水电费”页面page-“waterAndElectricCharge”是此小程序的主要功能“水电费”的页面，其主要作用是查看某个月份的水电费。页面为两栏纵向布局，宿舍号和年月组合的两列选择器被我放在了顶部一栏

46、；底部是由使用三行label组成，分别是用水度数、用电度数和合计费用。4.2.3 第三层页面（a）“失物/拾物登记”页面page-“loseRegister”是“失物招领”功能的“失物/拾物登记”页面，这个页面是专门用来登记失物/拾物信息的。页面为三栏纵向布局，顶部一栏是图片选择器，用于选择失物/拾物的图片；中间一栏是5个纵向失物/拾物相关信息填写的文本框，有物品名称、联系人姓名、电话、地点、备注；底部一栏则是提交按钮。（b）“详细快讯”页面page-“news”是此小程序的主要功能“东软快讯”的“详细快讯”页面，其主要作用是可以让用户阅读详细快讯的内容。页面是有滑动式新闻列表组成。4.3 本

47、章小结本章主要是说明了微信小程序的设计原则和介绍东软校园助手的功能设计和页面设计，使得作者的设计初衷和设计理念清晰明确，读者也能快速领略到东软校园助手的逻辑和使用方法。第五章 系统的实现与测试5.1 小程序的实现一般要开发一个小程序第一步是注册小程序，然后获得一个小程序的APPID，第二步就是搭建开发环境，开发环境的搭建主要安装开发工具，一般我们是默认是安装微信开发者工具，然后就可以开发小程序了。5.1.1 项目的创建和配置我们知道，开发一个小程序要先创建一个小程序项目，在这里我给东软校园助手创建的项目名称是“东软校园助手”，创建好项目后开发工具会自动生成文件结构，接下来就可以进行全局配置了，作为新手，全局配置我只配置多tab按钮和window，其他都是用默认的。小程序顶部window的标题配置为：navigationBarTitleText:东软校园助手；tab