基于微信小程序的校园信息服务系统的设计与实现

马尔康,木合亚提·尼亚孜别克,艾力克木·亚库甫,阿尔达克·叶思哈提,阿尔生·托列吾哈力

(新疆大学 计算机科学与技术学院,新疆 乌鲁木齐 830017)

一方面,在21世纪的今天,移动互联网高速发展,人们不再满足于APP所带来的方便,而是更倾向于“无须安装、触手可及、用完即走”[1]的微信小程序;另一方面,在高校校园当中,各种各样的信息分布在多个平台,且发布信息的人和获取到信息的人不能及时有效地进行沟通。针对以上两个方面,本文开发了一套基于微信小程序的校园社区系统。

1 项目背景

1.1 校园社区平台市场现状

经过调查分析,在现在的校园当中,为广大师生提供服务的平台可以大致概括为以下两个平台。第一是QQ空间的表白墙和微信的朋友圈;第二是相关的安卓APP。前者在现在的校园中广受青睐,但是存在一些痛点,比如不是每个人都可以获取到信息,不是每个获取到信息的人都能及时与发布信息的人进行沟通;后者在校园当中不是很受用,而且诸如此类的APP有很多,这样导致的结果就是信息分散,无法使信息整合在一起。

1.2 微信小程序市场现状

在现在的大学校园当中,学生和老师或多或少都会在校园当中丢失一些物品或者需要寻找某些信息。经过调查发现,现有的一些平台是有缺点的,比如信息分布在多个平台、信息获取方式多样化、信息沟通过程繁琐等。

从图1可以看出调查人群对于生活服务类有较高的需求,对于学习类,餐饮类也有一定的需求,从上述数据,我们可以得出一个结论:用微信小程序实现搭建校园社区平台是一个不错的选择。

图1 校园中各类微信小程序的使用情况

2 技术选型

2.1 微信小程序

微信小程序主要是通过JavaScript、WXML、WXSS来开发的,与传统网页端的开发有很多相似之处,但是也有不同,其中一个主要的区别是微信小程序的逻辑层和渲染层是分离的,使开发者能够更加清晰地编写代码[1]。同时从开发者的角度来说,微信小程序开发、维护和运营所需要的经济成本和技术成本都较低,同时在功能性上还能满足开发者设计的产品需要,适合低成本的项目[3]。

2.2 微信云开发

微信云开发就是在开发微信小程序时无须搭建服务器,使用云平台的API进行核心业务开发,从而实现快速上线和迭代。云开发可以通过云存储实现数据的存储,可以通过数据库存放用户的数据信息,可以通过云函数在云端运行开发者编写的代码实现对数据库的操作[2-3]。这极大地方便了开发者,同时加快项目的开发进度。

2.3 方法创新

微信小程序是一种基于微信平台的轻量级应用,可以创建简单的应用程序用于直接在微信中访问,与传统的移动应用相比,有以下创新之处:

微信小程序基于HTML5,可以跨平台使用,开发者只需要维护一套代码即可。作为微信生态的一部分,小程序可以方便地接入微信的社交功能,比如群聊、分享等,方便推广。此外,微信小程序提供了一套丰富的组件库和样式库,使得开发者能够快速搭建页面。

3 校园社区平台的设计与实现

3.1 功能概述

如图2所示,该校园社区平台主要包含登录功能、发布信息功能、查看信息功能以及聊天功能。当用户进入小程序时,如果没有登录,那么就仅可以使用查看功能,如果用户已经登录,那么用户就可以使用所有的功能。

图2 框架结构图

3.2 系统具体功能

3.2.1 登录功能

如图3所示,用户进入小程序后,可以进入“我的”页面,点击“点击登录”按钮,此时,小程序会切换到登录页面。或者当用户与人发起沟通时,如果还未登录或者用户想要发布信息时,用户还未登录,这时就会进行微信授权,当用户点击“确认授权”按钮后,就会调用myLogin方法,在myLogin方法中,会调用wx.getUserProfile接口,用户点击确认,获取到用户的头像和昵称信息后,会调用this.saveUserInfo方法,并且将获取到的用户信息作为参数传给this.saveUserInfo方法。在this.saveUserInfo方法中,在全局对象globalData中添加用户信息,再使用云函数saveuser将用户信息存储到数据库当中,如果存储成功,那么在存储成功的回调函数中,会在页面中展示“授权成功”的提示,并且在1.5 s后跳转到登录页的上一级页面。

图3 登录页面

3.2.2 发布信息功能

如图4所示,用户进入小程序后,点击“发布”进入发布页,根据用户自己的需求可以选择不同的信息类型,可选项有“失物招领”“寻物启事”“找人交友”“资料互换”。其次用户可以在下面的输入框输入自己想要的信息,然后用户如果有需要还可以添加图片,最后点击“确认发布”按钮,此时会调用onSubmit方法,在onSubmit方法中,首先会判断用户是否登录,如果没有登录就会跳转到登录页面要求用户登录,如果已经登录过,那么就会获取用户填写的信息。如果用户没有添加图片,那么直接调用pushYun方法,将所有填写的信息作为参数传给pushYun方法,在pushYun方法中又调用云函数up,通过add方法将数据存储到数据库中,如果上传成功,就会回到主页,并展示上传成功。如果用户添加了图片,那么首先就需要调用uoLodaImg方法将图片上传到云存储,上传成功后,再调用pushYun方法将数据上传到数据库[4]。

图4 发布信息界面

3.2.3 查看信息功能

用户进入小程序后,默认看到的就是主页,在主页当中,存放所有用户发布的信息。当首页加载完成后,就会调用微信小程序的生命周期函数onLoad,在onLoad方法中再调用cloudRequest方法,从数据库中请求数据,并将数据渲染到页面当中。开发者将这些信息分为四个类别,分别是“失物招领”“寻物启事”“找人交友”“资料互换”,用户可以点击这四个按钮选择自己想要的信息。比如,当用户点击失物招领时,会将name属性修改为“失物招领”,页面进行渲染时就会查找name属性为“失物招领”的内容将其渲染到页面当中[5-6]。

4 结 论

本文从解决校园生活中的实际问题出发,结合大学生在日常生活中的需求,利用微信小程序和微信云开发,构建了一个快速、便捷的平台,解决了传统方式获取信息不全面、沟通困难等问题,方便大学生在这个平台上可以准确、迅速地获取到自己想要的信息。同时同学们在使用这个小程序的过程中也弘扬了中华民族乐于助人的传统美德。但是,还存在一些待改进的地方,比如还可以开发一些“校园热搜”“休闲快递”等功能。