APP下载

基于微信小程序的“众志集结号”设计与实现

2022-04-11沈木子方欢马世界徐永强黄帅何其乐梁子翔

电脑知识与技术 2022年5期
关键词:微信小程序志愿服务系统设计

沈木子 方欢 马世界 徐永强 黄帅 何其乐 梁子翔

摘要:志愿者作为社会服务活动的义务工作者,对于社会的进步与发展有着重要的作用,而“众志集结号”就是一个旨在为向往参加志愿活动的各类人群提供便捷功能的平台。该平台可以实现发布志愿服务活动、志愿活动展示、志愿活动报名以及志愿者与主办方之间交流等功能。该系统基于微信小程序,使用前端设计语言wxml、后端语言js、云数据库等进行开发。经过软件测试,小程序可以成功地实现各种既定功能,且具有很好的实用价值。

关键词:微信小程序;志愿服务;云数据库;云开发;系统设计

中图分类号:TP311      文献标识码:A

文章编号:1009-3044(2022)05-0070-03

1 背景

当今社会中的志愿服务工作丰富多样,参与形式众多。它们有效地促进了社会的和谐发展。目前国内比较流行的志愿服务征集方式是通过 QQ、微信、微博等社交应用来实现。借助社交平台进行志愿服务工作有时会比较低效,那么,如何使志愿者的征集工作与新兴技术融合,如何使志愿服务精准化,高效化,如何使参与的群众大众化、普遍化,这是我们急需解决的问题。本文开发的微信小程序就是为了提供这种功能,包括实现志愿者征集,志愿活动报名参与[1]等。

选用微信小程序來开发该系统,有诸多好处:首先,小程序并不占用手机太大内存,使用较为方便;其次,借助了微信平台,可以很便捷地进行推广和应用,符合当代青年人的使用习惯;再者,使用微信小程序的云开发技术,又解决了传统开发模式下效率低、运维困难等问题,大大减轻了开发者的工作负担,应用前景十分广泛。

2 系统需求分析

2.1 系统总体分析

“众志集结号”是一个功能完善的志愿者征集系统。用户可以直接使用微信,绑定个人信息,进行登录。用户被分为参与者和发起者。作为参与者,用户可先填写并完善自己的个人信息,以便于小程序后续的活动推送,然后选择自己感兴趣的活动并报名,接着查看报名情况以及与其他志愿者进行交流互动等;作为发起者,能够实现发布自己主办的志愿活动,审核报名者的报名信息以及评价志愿者等各个功能。该系统的用例图[2]如图1所示。

2.2 系统功能分析

1)登录注册:用户首先需要在个人界面进行登录,这里使用微信绑定用户个人信息,完成登录注册功能。

2)完善个人信息:用户需要在个人信息界面完善自己的性别、姓名、年龄、地址、联系方式、爱好活动类型等信息,系统后续会根据用户的兴趣爱好,有选择地为用户推荐合适的志愿活动项目。

3)发布活动:主办方可以发布新的志愿活动,并详细地介绍该活动的名称、类型、参与地点、时间、需求人数等,再将其发布到活动展示模块,供感兴趣的志愿者进行报名。

4)审核活动:在发布完志愿活动后,主办方可以对报名者的报名信息进行审核,根据实际情况,选择中意的志愿者。等志愿活动完成后,再根据志愿者的完成情况,为其适当地增减活动积分值,以激励志愿者的参与热情。

5)报名活动:志愿者可以在活动展示界面,浏览系统为他们推荐的志愿活动,也可以自己通过筛选功能,按照关键字如人数、地点、类型等选择自己喜欢的活动,查看活动详情,进行活动报名,查看报名结果等。

6)留言评论:对于新发布的活动,志愿者们可以发表自己的感悟、评论、思考等,这种设计增加了系统的交互性功能[3]。

3 系统设计

3.1整体技术框架设计

“众志集结号”旨在为广大志愿者提供一个奉献社会,提升自我的平台。从开发技术上来说,该系统包括了应用层、接口层、数据层和支撑层[4],其中支撑层指系统所需要的软硬件环境,包括微信端、云服务器以及网络环境等;各种使用数据都保存在微信小程序的云数据库中,数据库是系统的重要组成部分,在系统实现过程中有大量的数据库操作;接口层则表示在小程序开发过程中所用到的各种API接口,包括在调用地图时使用的百度地图API,用户登录以及用户信息获取时调用的API接口等;而应用层体现的是用户可以实现的各种逻辑功能。具体技术架构图如图2所示:

3.2 数据库设计

系统在云数据库中存储小程序所使用到的数据信息,方便开发人员对数据的相关操作。根据用户在使用过程中各个业务流程的情况,我们设计了四个数据表,分别为用户表、活动表、报名表、评论表,数据库设计的E-R图如图3所示。

3.3 小程序界面设计

小程序前端页面的基本元素的展示工作由wxml文件来完成,元素的样式由wxss文件来进行设计,另外使用js文件实现各种逻辑功能[5]。下面是主要功能界面的实现方法:

1)活动展示界面:界面显示为志愿者推荐的活动信息。小程序通过调用自定义方法,从云数据库中读取用户所填写的志愿偏好类型以及所在城市等信息,并以这些信息作为查询条件,再次在云数据库中查询活动记录,并以数据列表的形式显示在前端页面来进行展示。

2)活动筛选界面:使用微信小程序picker选择器组件,以需求人数、活动地点、活动时间、活动类型作为筛选条件,调用方法,从数据库中查询相应的活动,显示到前端页面。

3)活动详情页面:想要了解活动具体信息的志愿者通过点击活动列表“更多活动信息”按钮,系统会将数据库中有关该活动的详细数据传递到活动详情页面进行展示。另外,在活动详情页面点击“报名活动”后,会触发报名事件,将申请人和申请活动的相关信息写入报名表,完成报名。

4)留言评论页面:该页面采用微信小程序云函数,通过绑定事件获取用户输入的评论信息,保存到云数据库,然后读取数据显示到前端页面进行展示。

5)活动发布页面:在活动发布页面设计填写表单,让主办方填写活动信息,并上传到云数据库。其中详细活动地址的选择用到了百度地图自带的API,活动图片的显示调用了本地相册的功能,同时也实现了上传图片的函数。

6)活动审核页面:志愿者的报名数据仅传递到主办方相应页面进行显示,对于志愿者的评价打分功能也仅由主办方完成,这里的功能主要是数据库一些字段的更新操作。一切的审核操作对志愿者用户来说都是透明可见的。

以下显示微信小程序使用过程中的一些主要界面:

4 关键代码

4.1 发布活动功能部分代码

add_activity: function(activity_from_wxml) {

var my_release_object = activity_from_wxml.detail.value

my_release_object["pictures"] = that.data.pictures

my_release_object["pass"] = true

my_release_object["publisher_openid"] = that.data.openId

my_release_object["enroll"] = []

db.collection('activity_table').add({

data: my_release_object

}).then(activity_from_database => {

my_release_object["act_id"] = activity_from_database._id

db.collection("user_table").where({

"_openid": that.data.openId

}).get().then(user_information => {

db.collection("user_table")

.doc(user_information.data[0]._id).update({

data: {

my_release: _.push(my_release_object)

}

})

}}

4.2 报名活动功能部分代码

enroll: function() {

db.collection("activity_table")

.doc(this.data.current_id)

.get().then(res => {

db.collection("application_table").add({

data: {

"pass": true,

"applicant_openid": that.data.openId,

"act_id": this.data.current_id,

"publisher_openid":res.data.publisher_openid

}

}).then(res => {

wx.showToast({

title: '申请成功',

icon: 'success',

});

})

})

}

5 总结

本文通过利用wxml、wxss、js、云数据库等工具设计出“众志集结号”微信小程序,为广大志愿者提供了一个参与志愿服务活动的平台。合理使用该小程序有利于培养人们奉献他人,奉献社会的精神,有益于促进社会的和谐健康发展。该小程序功能和结构设计合理,具有很强的实用价值,希望在后期能继续为小程序添加更多有意义,更加便捷的功能,为广大的志愿者们服务。

参考文献:

[1] 张标汉.志愿服务微信小程序的设计与实现[J].攀枝花学院学报,2018,35(5):93-97.

[2] 郭鑫,毛古宝,方欢.基于微信小程序的考勤系统设计与实现[J].电脑知识与技术,2018,14(20):57-59.

[3] 于文贝,方欢,王勋.基于微信小程序的八公山智行系统设计与实现[J].电脑知识与技术,2020,16(19):78-79,81.

[4] 章文慧,王玉燕,吳俊男,等.校车需求实时反馈的微信小程序设计与实现[J].现代测绘,2021,44(1):50-54.

[5] 郭灿杰.基于微信小程序的学生成绩信息查询系统研究与设计[J].九江职业技术学院学报,2021(1):22-25.

【通联编辑:光文玲】

收稿日期:2021-06-11

基金项目:本文受国家级大学生创新创业训练项目(NO.202010361122)资助

作者简介:沈木子(2000—),男,安徽合肥人,本科,主要研究方向为数据科学与大数据技术。

猜你喜欢

微信小程序志愿服务系统设计
当图书馆遇上微信小程序
基于协同发展理论的大学生志愿服务可持续化社会支持系统研究
社会主义核心价值观视阈下的大学生志愿服务
志愿服务与“互联网+”结合模式探究
目标特性测量雷达平台建设构想