社區(qū)管理系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)

沈東旭 白建 姚嘉明 張晶

摘要：現(xiàn)如今隨著互聯(lián)網(wǎng)的深入發(fā)展，移動(dòng)營(yíng)銷(xiāo)、移動(dòng)服務(wù)已經(jīng)逐漸成為主流。隨著生活水平的提高，人們對(duì)社區(qū)的活動(dòng)和管理也越來(lái)越注重。為了更好地提供社區(qū)服務(wù)，在注重社區(qū)服務(wù)的同時(shí)，針對(duì)社區(qū)的服務(wù)系統(tǒng)的要求也有所提高，社區(qū)管理系統(tǒng)的設(shè)計(jì)與開(kāi)發(fā)是必要的?？旃?jié)奏的數(shù)據(jù)信息時(shí)代，移動(dòng)終端的手機(jī)成為每個(gè)人接收信息的載體，而微信則是人們使用最多的App之一，且微信目前也是移動(dòng)端網(wǎng)站最好的載體。選用微信小程序平臺(tái)作為開(kāi)發(fā)平臺(tái)，對(duì)社區(qū)管理系統(tǒng)進(jìn)行分析和設(shè)計(jì)，在此基礎(chǔ)上研究社區(qū)用戶(hù)需求及與社區(qū)用戶(hù)相關(guān)政策的實(shí)時(shí)更新，使得社區(qū)服務(wù)不斷完善，從而設(shè)計(jì)出更符合市場(chǎng)、用戶(hù)需求的社區(qū)管理系統(tǒng)。

關(guān)鍵詞：微信;小程序;App;社區(qū)管理

中圖分類(lèi)號(hào)：TP393 文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1009-3044（2020115-0126-02

隨著互聯(lián)網(wǎng)的深入發(fā)展，移動(dòng)技術(shù)的投入數(shù)據(jù)增長(zhǎng)得特別快，遠(yuǎn)遠(yuǎn)的高于其他平臺(tái)的增長(zhǎng)，微信目前是移動(dòng)端網(wǎng)站最好的載體，微信小程序已經(jīng)完全融入移動(dòng)服務(wù)技術(shù)的發(fā)展趨勢(shì)。由于智能移動(dòng)設(shè)備在中國(guó)大面積普及，移動(dòng)設(shè)備的App成為多數(shù)人的首選，但由于App需要在移動(dòng)端下載及注冊(cè)，且開(kāi)發(fā)成本相對(duì)于微信小程序來(lái)說(shuō)偏高，因此微信小程序成為微信用戶(hù)最主要的使用功能之一。通過(guò)微信可以大大增加網(wǎng)站的訪問(wèn)人口，如朋友圈與好友直接分享鏈接、二維碼、微信公眾號(hào)、微信小程序等等。那么基于微信小程序平臺(tái)的社區(qū)管理系統(tǒng)，讓社區(qū)管理及服務(wù)更加簡(jiǎn)單、方便。

微信是眼下國(guó)內(nèi)最熱門(mén)的通訊App，社區(qū)管理系統(tǒng)使用微信小程序平臺(tái)，讓社區(qū)服務(wù)更加簡(jiǎn)單、便捷，以微信小程序作為人口，用戶(hù)可以通過(guò)微信賬號(hào)自動(dòng)注冊(cè)，且登錄過(guò)程用戶(hù)可以一鍵登錄，避免注冊(cè)的煩瑣。同時(shí)，為了用戶(hù)的使用體驗(yàn)更好，利用微信小程序收集數(shù)據(jù)進(jìn)行分析，為用戶(hù)提供更貼心的社區(qū)服務(wù)。

微信小程序開(kāi)發(fā)采用JavaScript、WXML、WXSS技術(shù)進(jìn)行，JavaScript技術(shù)是其代碼在微信App中運(yùn)行，而不是在瀏覽器里運(yùn)行，因此微信App需要提供對(duì)應(yīng)的APl支持。WXML類(lèi)似于HTML語(yǔ)言，WXML（WeiXin Markup Language）是框架設(shè)計(jì)的一套標(biāo)簽語(yǔ)言，結(jié)合基礎(chǔ)組件、事件系統(tǒng)，可以構(gòu)建出頁(yè)面的結(jié)構(gòu)。WXML是基于XML語(yǔ)法開(kāi)發(fā)的微信的語(yǔ)言，具有數(shù)據(jù)綁定、列表渲染、條件渲染、模板、事件、引用等能力。WXSS（weiXin Style Sheets）是一套樣式語(yǔ)言，用于描述WXML的組件樣式，具有CSS的大部分特性，用來(lái)決定WXML的組件應(yīng)該怎么顯示。微信的架構(gòu)，是數(shù)據(jù)驅(qū)動(dòng)的架構(gòu)模式，頁(yè)面的更新都需要通過(guò)對(duì)數(shù)據(jù)更新來(lái)實(shí)現(xiàn)，uI和數(shù)據(jù)是分離的。

微信小程序分為webview和appService。uI主要通過(guò)web-view來(lái)展現(xiàn)，appService是用來(lái)處理數(shù)據(jù)、業(yè)務(wù)和調(diào)用接口。運(yùn)行過(guò)程中，通過(guò)系統(tǒng)層JSBridge進(jìn)行通信，實(shí)現(xiàn)uI的渲染以及時(shí)間的處理等。

該設(shè)計(jì)涵蓋了目前主流金融App的主要功能，包括社區(qū)福利，社區(qū)新聞等功能，并對(duì)其進(jìn)行改進(jìn)與創(chuàng)新。

1可行性分析

作為社區(qū)管理App，在安全性和實(shí)時(shí)性穩(wěn)定的基礎(chǔ)上，設(shè)計(jì)的目的是提高用戶(hù)的體驗(yàn)，使軟件的操作更為簡(jiǎn)捷。基于微信小程序開(kāi)發(fā)平臺(tái)，省去App煩瑣的下載，通過(guò)搜索和掃一掃就可以打開(kāi)，更容易宣傳和獲取用戶(hù)信息。與App開(kāi)發(fā)成本相對(duì)比，微信小程序開(kāi)發(fā)成本較低，且微信小程序有原生的內(nèi)置組件，對(duì)于web的擴(kuò)展能力更強(qiáng)大，體驗(yàn)更好，減輕對(duì)webview的渲染工作，可以繞過(guò)setData數(shù)據(jù)通信和重渲染流程，且微信小程序基于Exparser框架，在JS環(huán)境中運(yùn)行，支持自定義組件，性能更好。安卓系統(tǒng)可以添加到移動(dòng)端桌面，與原生Aop基本相同，微信自己擁有嚴(yán)格的審查流程，為用戶(hù)提供良好的安全保障。

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

基于微信小程序的社區(qū)管理系統(tǒng)的使用者基本為社區(qū)用戶(hù)，程序在功能上應(yīng)具備一些App的主流功能，并且可以實(shí)時(shí)將最新政策更新至社區(qū)新聞。本社區(qū)用戶(hù)能夠注冊(cè)和登錄該系統(tǒng)，社區(qū)新聞應(yīng)實(shí)時(shí)隨著每天的政策第一時(shí)間更新。通過(guò)每個(gè)界面的搜索信息能搜索到社區(qū)用戶(hù)需求的相關(guān)界面的信息，并且巧用微信的搜索功能來(lái)?yè)屌盼?。社區(qū)互動(dòng)里通過(guò)咸魚(yú)商場(chǎng)來(lái)推動(dòng)國(guó)家提倡物品的二次利用。與附近的有相同興趣愛(ài)好的社區(qū)用戶(hù)可以相約一起交流，使社區(qū)生活更加融洽。通過(guò)附近娛樂(lè)展現(xiàn)附近的小程序領(lǐng)取各種優(yōu)惠券等，小程序自動(dòng)展現(xiàn)給周邊5km內(nèi)的微信用戶(hù)，所有符合條件的小程序能被免費(fèi)曝光。做一個(gè)小程序，相當(dāng)于給店鋪增加10倍曝光的機(jī)會(huì)。同時(shí)還需開(kāi)發(fā)針對(duì)管理員的后臺(tái)管理系統(tǒng)，主要用于發(fā)布新聞、用戶(hù)管理、熱門(mén)新聞推送和訂單管理等。如圖1所示。

3社區(qū)管理系統(tǒng)的功能及設(shè)計(jì)

社區(qū)管理系統(tǒng)的功能包括：登錄及驗(yàn)證、社區(qū)新聞、搜索、咸魚(yú)商城、附近娛樂(lè)、約友。

微信小程序的登錄及驗(yàn)證，點(diǎn)擊“我的”即可進(jìn)入該頁(yè)面，該頁(yè)面顯示社區(qū)用戶(hù)的注冊(cè)個(gè)人信息，包括頭像、用戶(hù)名、所屬地區(qū)和性別等，這些信息均是通過(guò)微信獲取。用戶(hù)在尚未登錄的情況下可使用該小程序。用戶(hù)進(jìn)行注冊(cè)時(shí)，小程序端wx log-in獲取code并wx request提交code給服務(wù)器，用WX～login獲取登錄憑證code。服務(wù)器提交Appid、appSecret、code到微信方服務(wù)器，獲取session_key&openid。服務(wù)器根據(jù)session_key&ope-nid生成3rd_sessio，并返回3rd_session到小程序端。小程序端wx getUserInfo獲取用戶(hù)信息和wx.getStorage獲取3rd_session數(shù)據(jù)，根據(jù)這兩項(xiàng)參數(shù)獲取到注冊(cè)用戶(hù)的基本信息，服務(wù)器SQL用戶(hù)會(huì)將數(shù)據(jù)信息更新，自動(dòng)注冊(cè)并保存在數(shù)據(jù)庫(kù)中。如圖2所示。

社區(qū)管理系統(tǒng)微信小程序的首頁(yè)為搜索和社區(qū)新聞界面，內(nèi)容主要有搜索框。通過(guò)頂部的搜索框可以搜索社區(qū)用戶(hù)需求的相關(guān)信息，然后進(jìn)入信息詳情頁(yè)面。社區(qū)新聞設(shè)置在搜索框下面，首先顯示的是社區(qū)要聞，要聞下面是一個(gè)輪播圖，主要顯示當(dāng)日頭條，圖片會(huì)自動(dòng)切換，也可以通過(guò)滑動(dòng)屏幕切換。點(diǎn)擊圖片可以進(jìn)入新聞詳情頁(yè)。輪播圖下方是社區(qū)實(shí)時(shí)新聞列表，下拉可以加載更多關(guān)于社區(qū)的新聞。

社區(qū)互動(dòng)內(nèi)容主要有搜索框，tab標(biāo)簽。通過(guò)頂部的搜索框可以搜索到社區(qū)用戶(hù)需求的相關(guān)信息，然后進(jìn)入信息詳情頁(yè)面。點(diǎn)擊tab標(biāo)簽可以對(duì)社區(qū)互動(dòng)進(jìn)行分類(lèi)，可以分為咸魚(yú)商城、附近娛樂(lè)、約友?？梢酝ㄟ^(guò)搜索框來(lái)搜索二手物品，附近的娛樂(lè)場(chǎng)所及約友信息等，每個(gè)界面能搜索到社區(qū)用戶(hù)需求的相關(guān)信息，并且巧用微信的搜索功能來(lái)?yè)屌盼唬O(shè)置標(biāo)題時(shí)標(biāo)題不能太短，建議使用長(zhǎng)尾標(biāo)題，關(guān)鍵詞描述優(yōu)化。

4系統(tǒng)測(cè)試

在社區(qū)管理系統(tǒng)完成之后需要對(duì)整個(gè)系統(tǒng)的各個(gè)功能模塊進(jìn)行測(cè)試，來(lái)驗(yàn)證其是否能正常運(yùn)行。為了系統(tǒng)的完整性與用戶(hù)體驗(yàn)，首先要測(cè)試的是前端頁(yè)面的功能邏輯是否正常，然后對(duì)數(shù)據(jù)的提交，后端數(shù)據(jù)的處理進(jìn)行檢驗(yàn)，確保沒(méi)有嚴(yán)重的錯(cuò)誤。

5總結(jié)

本系統(tǒng)基于微信小程序技術(shù)進(jìn)行開(kāi)發(fā)，采用Exparser框架作為實(shí)現(xiàn)框架，在Js環(huán)境中運(yùn)行，支持自定義組件?；诎沧肯到y(tǒng)可以添加微信小程序到移動(dòng)端桌面，與原生App基本相同，且微信自己擁有嚴(yán)格的審查流程，為用戶(hù)提供良好的安全保障，除此之外還有更多的人性化服務(wù)。本系統(tǒng)擁有簡(jiǎn)潔和易于使用的特點(diǎn)，但是還是存在很多的不足之處，比如在很多關(guān)鍵點(diǎn)都沒(méi)有設(shè)置一些提示信息，如防止用戶(hù)操作錯(cuò)誤的提示。雖然系統(tǒng)能夠很好地滿(mǎn)足實(shí)際應(yīng)用，但是由于在設(shè)計(jì)時(shí)沒(méi)有豐富的社區(qū)管理經(jīng)驗(yàn)，因此對(duì)業(yè)務(wù)的理解和設(shè)計(jì)存在一定的差距。