基于微信小程序的“眾志集結(jié)號”設(shè)計與實現(xiàn)

沈木子 方歡 馬世界 徐永強 黃帥 何其樂 梁子翔

摘要：志愿者作為社會服務(wù)活動的義務(wù)工作者，對于社會的進步與發(fā)展有著重要的作用，而“眾志集結(jié)號”就是一個旨在為向往參加志愿活動的各類人群提供便捷功能的平臺。該平臺可以實現(xiàn)發(fā)布志愿服務(wù)活動、志愿活動展示、志愿活動報名以及志愿者與主辦方之間交流等功能。該系統(tǒng)基于微信小程序，使用前端設(shè)計語言wxml、后端語言js、云數(shù)據(jù)庫等進行開發(fā)。經(jīng)過軟件測試，小程序可以成功地實現(xiàn)各種既定功能，且具有很好的實用價值。

關(guān)鍵詞：微信小程序;志愿服務(wù);云數(shù)據(jù)庫;云開發(fā);系統(tǒng)設(shè)計

中圖分類號：TP311 ? ? ?文獻標識碼：A

文章編號：1009-3044（2022）05-0070-03

1 背景

當今社會中的志愿服務(wù)工作豐富多樣，參與形式眾多。它們有效地促進了社會的和諧發(fā)展。目前國內(nèi)比較流行的志愿服務(wù)征集方式是通過 QQ、微信、微博等社交應(yīng)用來實現(xiàn)。借助社交平臺進行志愿服務(wù)工作有時會比較低效，那么，如何使志愿者的征集工作與新興技術(shù)融合，如何使志愿服務(wù)精準化，高效化，如何使參與的群眾大眾化、普遍化，這是我們急需解決的問題。本文開發(fā)的微信小程序就是為了提供這種功能，包括實現(xiàn)志愿者征集，志愿活動報名參與[1]等。

選用微信小程序來開發(fā)該系統(tǒng)，有諸多好處：首先，小程序并不占用手機太大內(nèi)存，使用較為方便;其次，借助了微信平臺，可以很便捷地進行推廣和應(yīng)用，符合當代青年人的使用習(xí)慣;再者，使用微信小程序的云開發(fā)技術(shù)，又解決了傳統(tǒng)開發(fā)模式下效率低、運維困難等問題，大大減輕了開發(fā)者的工作負擔，應(yīng)用前景十分廣泛。

2 系統(tǒng)需求分析

2.1 系統(tǒng)總體分析

“眾志集結(jié)號”是一個功能完善的志愿者征集系統(tǒng)。用戶可以直接使用微信，綁定個人信息，進行登錄。用戶被分為參與者和發(fā)起者。作為參與者，用戶可先填寫并完善自己的個人信息，以便于小程序后續(xù)的活動推送，然后選擇自己感興趣的活動并報名，接著查看報名情況以及與其他志愿者進行交流互動等;作為發(fā)起者，能夠?qū)崿F(xiàn)發(fā)布自己主辦的志愿活動，審核報名者的報名信息以及評價志愿者等各個功能。該系統(tǒng)的用例圖[2]如圖1所示。

2.2 系統(tǒng)功能分析

1）登錄注冊：用戶首先需要在個人界面進行登錄，這里使用微信綁定用戶個人信息，完成登錄注冊功能。

2）完善個人信息：用戶需要在個人信息界面完善自己的性別、姓名、年齡、地址、聯(lián)系方式、愛好活動類型等信息，系統(tǒng)后續(xù)會根據(jù)用戶的興趣愛好，有選擇地為用戶推薦合適的志愿活動項目。

3）發(fā)布活動：主辦方可以發(fā)布新的志愿活動，并詳細地介紹該活動的名稱、類型、參與地點、時間、需求人數(shù)等，再將其發(fā)布到活動展示模塊，供感興趣的志愿者進行報名。

4）審核活動：在發(fā)布完志愿活動后，主辦方可以對報名者的報名信息進行審核，根據(jù)實際情況，選擇中意的志愿者。等志愿活動完成后，再根據(jù)志愿者的完成情況，為其適當?shù)卦鰷p活動積分值，以激勵志愿者的參與熱情。

5）報名活動：志愿者可以在活動展示界面，瀏覽系統(tǒng)為他們推薦的志愿活動，也可以自己通過篩選功能，按照關(guān)鍵字如人數(shù)、地點、類型等選擇自己喜歡的活動，查看活動詳情，進行活動報名，查看報名結(jié)果等。

6）留言評論：對于新發(fā)布的活動，志愿者們可以發(fā)表自己的感悟、評論、思考等，這種設(shè)計增加了系統(tǒng)的交互性功能[3]。

3 系統(tǒng)設(shè)計

3.1整體技術(shù)框架設(shè)計

“眾志集結(jié)號”旨在為廣大志愿者提供一個奉獻社會，提升自我的平臺。從開發(fā)技術(shù)上來說，該系統(tǒng)包括了應(yīng)用層、接口層、數(shù)據(jù)層和支撐層[4]，其中支撐層指系統(tǒng)所需要的軟硬件環(huán)境，包括微信端、云服務(wù)器以及網(wǎng)絡(luò)環(huán)境等;各種使用數(shù)據(jù)都保存在微信小程序的云數(shù)據(jù)庫中，數(shù)據(jù)庫是系統(tǒng)的重要組成部分，在系統(tǒng)實現(xiàn)過程中有大量的數(shù)據(jù)庫操作;接口層則表示在小程序開發(fā)過程中所用到的各種API接口，包括在調(diào)用地圖時使用的百度地圖API，用戶登錄以及用戶信息獲取時調(diào)用的API接口等;而應(yīng)用層體現(xiàn)的是用戶可以實現(xiàn)的各種邏輯功能。具體技術(shù)架構(gòu)圖如圖2所示：

3.2 數(shù)據(jù)庫設(shè)計

系統(tǒng)在云數(shù)據(jù)庫中存儲小程序所使用到的數(shù)據(jù)信息，方便開發(fā)人員對數(shù)據(jù)的相關(guān)操作。根據(jù)用戶在使用過程中各個業(yè)務(wù)流程的情況，我們設(shè)計了四個數(shù)據(jù)表，分別為用戶表、活動表、報名表、評論表，數(shù)據(jù)庫設(shè)計的E-R圖如圖3所示。

3.3 小程序界面設(shè)計

小程序前端頁面的基本元素的展示工作由wxml文件來完成，元素的樣式由wxss文件來進行設(shè)計，另外使用js文件實現(xiàn)各種邏輯功能[5]。下面是主要功能界面的實現(xiàn)方法：

1）活動展示界面：界面顯示為志愿者推薦的活動信息。小程序通過調(diào)用自定義方法，從云數(shù)據(jù)庫中讀取用戶所填寫的志愿偏好類型以及所在城市等信息，并以這些信息作為查詢條件，再次在云數(shù)據(jù)庫中查詢活動記錄，并以數(shù)據(jù)列表的形式顯示在前端頁面來進行展示。

2）活動篩選界面：使用微信小程序picker選擇器組件，以需求人數(shù)、活動地點、活動時間、活動類型作為篩選條件，調(diào)用方法，從數(shù)據(jù)庫中查詢相應(yīng)的活動，顯示到前端頁面。

3）活動詳情頁面：想要了解活動具體信息的志愿者通過點擊活動列表“更多活動信息”按鈕，系統(tǒng)會將數(shù)據(jù)庫中有關(guān)該活動的詳細數(shù)據(jù)傳遞到活動詳情頁面進行展示。另外，在活動詳情頁面點擊“報名活動”后，會觸發(fā)報名事件，將申請人和申請活動的相關(guān)信息寫入報名表，完成報名。

4）留言評論頁面：該頁面采用微信小程序云函數(shù)，通過綁定事件獲取用戶輸入的評論信息，保存到云數(shù)據(jù)庫，然后讀取數(shù)據(jù)顯示到前端頁面進行展示。

5）活動發(fā)布頁面：在活動發(fā)布頁面設(shè)計填寫表單，讓主辦方填寫活動信息，并上傳到云數(shù)據(jù)庫。其中詳細活動地址的選擇用到了百度地圖自帶的API，活動圖片的顯示調(diào)用了本地相冊的功能，同時也實現(xiàn)了上傳圖片的函數(shù)。

6）活動審核頁面：志愿者的報名數(shù)據(jù)僅傳遞到主辦方相應(yīng)頁面進行顯示，對于志愿者的評價打分功能也僅由主辦方完成，這里的功能主要是數(shù)據(jù)庫一些字段的更新操作。一切的審核操作對志愿者用戶來說都是透明可見的。

以下顯示微信小程序使用過程中的一些主要界面：

4 關(guān)鍵代碼

4.1 發(fā)布活動功能部分代碼

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 總結(jié)

本文通過利用wxml、wxss、js、云數(shù)據(jù)庫等工具設(shè)計出“眾志集結(jié)號”微信小程序，為廣大志愿者提供了一個參與志愿服務(wù)活動的平臺。合理使用該小程序有利于培養(yǎng)人們奉獻他人，奉獻社會的精神，有益于促進社會的和諧健康發(fā)展。該小程序功能和結(jié)構(gòu)設(shè)計合理，具有很強的實用價值，希望在后期能繼續(xù)為小程序添加更多有意義，更加便捷的功能，為廣大的志愿者們服務(wù)。

參考文獻：

[1] 張標漢.志愿服務(wù)微信小程序的設(shè)計與實現(xiàn)[J].攀枝花學(xué)院學(xué)報，2018，35（5）：93-97.

[2] 郭鑫，毛古寶，方歡.基于微信小程序的考勤系統(tǒng)設(shè)計與實現(xiàn)[J].電腦知識與技術(shù)，2018，14（20）：57-59.

[3] 于文貝，方歡，王勛.基于微信小程序的八公山智行系統(tǒng)設(shè)計與實現(xiàn)[J].電腦知識與技術(shù)，2020，16（19）：78-79，81.

[4] 章文慧，王玉燕，吳俊男，等.校車需求實時反饋的微信小程序設(shè)計與實現(xiàn)[J].現(xiàn)代測繪，2021，44（1）：50-54.

[5] 郭燦杰.基于微信小程序的學(xué)生成績信息查詢系統(tǒng)研究與設(shè)計[J].九江職業(yè)技術(shù)學(xué)院學(xué)報，2021（1）：22-25.

【通聯(lián)編輯：光文玲】

收稿日期：2021-06-11

基金項目：本文受國家級大學(xué)生創(chuàng)新創(chuàng)業(yè)訓(xùn)練項目（NO.202010361122）資助

作者簡介：沈木子（2000—），男，安徽合肥人，本科，主要研究方向為數(shù)據(jù)科學(xué)與大數(shù)據(jù)技術(shù)。