基于微信小程序的“眾志集結號”設計與實現

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

摘要：志愿者作為社會服務活動的義務工作者，對于社會的進步與發展有著重要的作用，而“眾志集結號”就是一個旨在為向往參加志愿活動的各類人群提供便捷功能的平臺。該平臺可以實現發布志愿服務活動、志愿活動展示、志愿活動報名以及志愿者與主辦方之間交流等功能。該系統基于微信小程序，使用前端設計語言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—），男，安徽合肥人，本科，主要研究方向為數據科學與大數據技術。