基于微信小程序的校園信息服務(wù)系統(tǒng)的設(shè)計與實現(xiàn)

馬爾康,木合亞提·尼亞孜別克,艾力克木·亞庫甫,阿爾達克·葉思哈提,阿爾生·托列吾哈力

(新疆大學(xué) 計算機科學(xué)與技術(shù)學(xué)院,新疆 烏魯木齊 830017)

一方面,在21世紀(jì)的今天,移動互聯(lián)網(wǎng)高速發(fā)展,人們不再滿足于APP所帶來的方便,而是更傾向于“無須安裝、觸手可及、用完即走”[1]的微信小程序;另一方面,在高校校園當(dāng)中,各種各樣的信息分布在多個平臺,且發(fā)布信息的人和獲取到信息的人不能及時有效地進行溝通。針對以上兩個方面,本文開發(fā)了一套基于微信小程序的校園社區(qū)系統(tǒng)。

1 項目背景

1.1 校園社區(qū)平臺市場現(xiàn)狀

經(jīng)過調(diào)查分析,在現(xiàn)在的校園當(dāng)中,為廣大師生提供服務(wù)的平臺可以大致概括為以下兩個平臺。第一是QQ空間的表白墻和微信的朋友圈;第二是相關(guān)的安卓APP。前者在現(xiàn)在的校園中廣受青睞,但是存在一些痛點,比如不是每個人都可以獲取到信息,不是每個獲取到信息的人都能及時與發(fā)布信息的人進行溝通;后者在校園當(dāng)中不是很受用,而且諸如此類的APP有很多,這樣導(dǎo)致的結(jié)果就是信息分散,無法使信息整合在一起。

1.2 微信小程序市場現(xiàn)狀

在現(xiàn)在的大學(xué)校園當(dāng)中,學(xué)生和老師或多或少都會在校園當(dāng)中丟失一些物品或者需要尋找某些信息。經(jīng)過調(diào)查發(fā)現(xiàn),現(xiàn)有的一些平臺是有缺點的,比如信息分布在多個平臺、信息獲取方式多樣化、信息溝通過程繁瑣等。

從圖1可以看出調(diào)查人群對于生活服務(wù)類有較高的需求,對于學(xué)習(xí)類,餐飲類也有一定的需求,從上述數(shù)據(jù),我們可以得出一個結(jié)論:用微信小程序?qū)崿F(xiàn)搭建校園社區(qū)平臺是一個不錯的選擇。

圖1 校園中各類微信小程序的使用情況

2 技術(shù)選型

2.1 微信小程序

微信小程序主要是通過JavaScript、WXML、WXSS來開發(fā)的,與傳統(tǒng)網(wǎng)頁端的開發(fā)有很多相似之處,但是也有不同,其中一個主要的區(qū)別是微信小程序的邏輯層和渲染層是分離的,使開發(fā)者能夠更加清晰地編寫代碼[1]。同時從開發(fā)者的角度來說,微信小程序開發(fā)、維護和運營所需要的經(jīng)濟成本和技術(shù)成本都較低,同時在功能性上還能滿足開發(fā)者設(shè)計的產(chǎn)品需要,適合低成本的項目[3]。

2.2 微信云開發(fā)

微信云開發(fā)就是在開發(fā)微信小程序時無須搭建服務(wù)器,使用云平臺的API進行核心業(yè)務(wù)開發(fā),從而實現(xiàn)快速上線和迭代。云開發(fā)可以通過云存儲實現(xiàn)數(shù)據(jù)的存儲,可以通過數(shù)據(jù)庫存放用戶的數(shù)據(jù)信息,可以通過云函數(shù)在云端運行開發(fā)者編寫的代碼實現(xiàn)對數(shù)據(jù)庫的操作[2-3]。這極大地方便了開發(fā)者,同時加快項目的開發(fā)進度。

2.3 方法創(chuàng)新

微信小程序是一種基于微信平臺的輕量級應(yīng)用,可以創(chuàng)建簡單的應(yīng)用程序用于直接在微信中訪問,與傳統(tǒng)的移動應(yīng)用相比,有以下創(chuàng)新之處:

微信小程序基于HTML5,可以跨平臺使用,開發(fā)者只需要維護一套代碼即可。作為微信生態(tài)的一部分,小程序可以方便地接入微信的社交功能,比如群聊、分享等,方便推廣。此外,微信小程序提供了一套豐富的組件庫和樣式庫,使得開發(fā)者能夠快速搭建頁面。

3 校園社區(qū)平臺的設(shè)計與實現(xiàn)

3.1 功能概述

如圖2所示,該校園社區(qū)平臺主要包含登錄功能、發(fā)布信息功能、查看信息功能以及聊天功能。當(dāng)用戶進入小程序時,如果沒有登錄,那么就僅可以使用查看功能,如果用戶已經(jīng)登錄,那么用戶就可以使用所有的功能。

圖2 框架結(jié)構(gòu)圖

3.2 系統(tǒng)具體功能

3.2.1 登錄功能

如圖3所示,用戶進入小程序后,可以進入“我的”頁面,點擊“點擊登錄”按鈕,此時,小程序會切換到登錄頁面。或者當(dāng)用戶與人發(fā)起溝通時,如果還未登錄或者用戶想要發(fā)布信息時,用戶還未登錄,這時就會進行微信授權(quán),當(dāng)用戶點擊“確認(rèn)授權(quán)”按鈕后,就會調(diào)用myLogin方法,在myLogin方法中,會調(diào)用wx.getUserProfile接口,用戶點擊確認(rèn),獲取到用戶的頭像和昵稱信息后,會調(diào)用this.saveUserInfo方法,并且將獲取到的用戶信息作為參數(shù)傳給this.saveUserInfo方法。在this.saveUserInfo方法中,在全局對象globalData中添加用戶信息,再使用云函數(shù)saveuser將用戶信息存儲到數(shù)據(jù)庫當(dāng)中,如果存儲成功,那么在存儲成功的回調(diào)函數(shù)中,會在頁面中展示“授權(quán)成功”的提示,并且在1.5 s后跳轉(zhuǎn)到登錄頁的上一級頁面。

圖3 登錄頁面

3.2.2 發(fā)布信息功能

如圖4所示,用戶進入小程序后,點擊“發(fā)布”進入發(fā)布頁,根據(jù)用戶自己的需求可以選擇不同的信息類型,可選項有“失物招領(lǐng)”“尋物啟事”“找人交友”“資料互換”。其次用戶可以在下面的輸入框輸入自己想要的信息,然后用戶如果有需要還可以添加圖片,最后點擊“確認(rèn)發(fā)布”按鈕,此時會調(diào)用onSubmit方法,在onSubmit方法中,首先會判斷用戶是否登錄,如果沒有登錄就會跳轉(zhuǎn)到登錄頁面要求用戶登錄,如果已經(jīng)登錄過,那么就會獲取用戶填寫的信息。如果用戶沒有添加圖片,那么直接調(diào)用pushYun方法,將所有填寫的信息作為參數(shù)傳給pushYun方法,在pushYun方法中又調(diào)用云函數(shù)up,通過add方法將數(shù)據(jù)存儲到數(shù)據(jù)庫中,如果上傳成功,就會回到主頁,并展示上傳成功。如果用戶添加了圖片,那么首先就需要調(diào)用uoLodaImg方法將圖片上傳到云存儲,上傳成功后,再調(diào)用pushYun方法將數(shù)據(jù)上傳到數(shù)據(jù)庫[4]。

圖4 發(fā)布信息界面

3.2.3 查看信息功能

用戶進入小程序后,默認(rèn)看到的就是主頁,在主頁當(dāng)中,存放所有用戶發(fā)布的信息。當(dāng)首頁加載完成后,就會調(diào)用微信小程序的生命周期函數(shù)onLoad,在onLoad方法中再調(diào)用cloudRequest方法,從數(shù)據(jù)庫中請求數(shù)據(jù),并將數(shù)據(jù)渲染到頁面當(dāng)中。開發(fā)者將這些信息分為四個類別,分別是“失物招領(lǐng)”“尋物啟事”“找人交友”“資料互換”,用戶可以點擊這四個按鈕選擇自己想要的信息。比如,當(dāng)用戶點擊失物招領(lǐng)時,會將name屬性修改為“失物招領(lǐng)”,頁面進行渲染時就會查找name屬性為“失物招領(lǐng)”的內(nèi)容將其渲染到頁面當(dāng)中[5-6]。

4 結(jié) 論

本文從解決校園生活中的實際問題出發(fā),結(jié)合大學(xué)生在日常生活中的需求,利用微信小程序和微信云開發(fā),構(gòu)建了一個快速、便捷的平臺,解決了傳統(tǒng)方式獲取信息不全面、溝通困難等問題,方便大學(xué)生在這個平臺上可以準(zhǔn)確、迅速地獲取到自己想要的信息。同時同學(xué)們在使用這個小程序的過程中也弘揚了中華民族樂于助人的傳統(tǒng)美德。但是,還存在一些待改進的地方,比如還可以開發(fā)一些“校園熱搜”“休閑快遞”等功能。