陶友賢，吳龍影，白宏熙，牟 艷

（河海大學(xué)物聯(lián)網(wǎng)工程學(xué)院，江蘇 常州213022）

基于微信公眾平臺的小區(qū)信息上報系統(tǒng)設(shè)計(jì)*

陶友賢，吳龍影，白宏熙，牟 艷

（河海大學(xué)物聯(lián)網(wǎng)工程學(xué)院，江蘇 常州213022）

為方便物業(yè)管理人員與業(yè)主的溝通與交流，提高物業(yè)服務(wù)水平，開發(fā)了基于微信公眾平臺的小區(qū)信息上報系統(tǒng)。本系統(tǒng)以騰訊公司提供的微信公眾號開發(fā)平臺為基礎(chǔ)，利用HTML5、JSON數(shù)據(jù)處理和公眾號開發(fā)API，實(shí)現(xiàn)了數(shù)據(jù)、照片、語音等信息的采集、交換和消息推送。本系統(tǒng)在某住宅小區(qū)使用一年，能夠幫助小區(qū)物業(yè)管理人員和業(yè)主在微信公眾號中方便地完成通知發(fā)布、衛(wèi)生保潔、治安巡防、水電報修、失物招領(lǐng)等操作，有效地提高了小區(qū)物業(yè)服務(wù)質(zhì)量。

微信公眾平臺；信息上報；HTML5頁面；JSON數(shù)據(jù)處理；微信公眾號；物業(yè)管理

1 引言

住宅小區(qū)是城市建設(shè)管理的重要組成部分，管理好小區(qū)對帶動當(dāng)?shù)爻鞘械恼w發(fā)展起著至關(guān)重要的作用。盡管近些年來，住宅小區(qū)內(nèi)部的門禁、監(jiān)控等系統(tǒng)在一定程度上給小區(qū)管理提供了便利，但現(xiàn)階段在管理住宅小區(qū)的過程中，在物業(yè)與業(yè)主之間，由于缺乏便捷的溝通渠道，導(dǎo)致多數(shù)業(yè)主不愿意參與到住宅小區(qū)的管理中[1]；在安防方面雖然有監(jiān)控系統(tǒng)但是監(jiān)控的數(shù)量和范圍有限，導(dǎo)致住宅小區(qū)仍然存在安全“死角”，而眾多的業(yè)主只要擁有便捷的“工具”就可以幫助物業(yè)掃清這些安全“死角”，為住宅小區(qū)的安全添磚加瓦。

為了解決上述問題，為住宅小區(qū)提供智能化程度高、操作簡便易行、信息集成化的管理方式，筆者經(jīng)分析了解到當(dāng)下住宅小區(qū)信息管理中的痛點(diǎn)在于信息的采集和傳遞，依托騰訊公司提供的微信公眾號開發(fā)平臺，對比微信開發(fā)與原生應(yīng)用開發(fā)在難度和成本方面的優(yōu)勢，提出一種基于微信公眾平臺的小區(qū)信息上報系統(tǒng)（以下簡稱信息上報系統(tǒng)）設(shè)計(jì)方案。

2 系統(tǒng)概述

2.1微信公眾平臺與信息上報系統(tǒng)

在微信公眾平臺中，數(shù)據(jù)傳遞一般需要經(jīng)過微信客戶端、微信服務(wù)器、第三方服務(wù)器以及第三方數(shù)據(jù)庫服務(wù)器，其中，微信客戶端負(fù)責(zé)采集數(shù)據(jù)，微信服務(wù)器負(fù)責(zé)存儲臨時數(shù)據(jù)包和轉(zhuǎn)發(fā)數(shù)據(jù)包，第三方服務(wù)器負(fù)責(zé)接收和處理微信服務(wù)器轉(zhuǎn)發(fā)的數(shù)據(jù)包并實(shí)現(xiàn)相關(guān)業(yè)務(wù)邏輯，第三方數(shù)據(jù)庫服務(wù)器負(fù)責(zé)存儲數(shù)據(jù)。各個模塊之間各司其職又進(jìn)行著以數(shù)據(jù)為紐帶的聯(lián)系，微信服務(wù)器與第三方服務(wù)器之間以XML格式傳遞數(shù)據(jù)[2]。

基于微信公眾平臺的這種開發(fā)模式，信息上報系統(tǒng)通過微信公眾平臺提供各類接口和服務(wù)模式，來著力實(shí)現(xiàn)住宅小區(qū)中的信息上報問題。通過信息上報系統(tǒng)，業(yè)主在微信端即可閱讀物業(yè)發(fā)布的小區(qū)公告、上報小區(qū)中的異常情況、方便地發(fā)布失物招領(lǐng)信息。例如，業(yè)主在小區(qū)門口發(fā)現(xiàn)有垃圾未清理，那么打開微信中的信息上報平臺，錄入語音現(xiàn)場描述、拍照、定位再上報至系統(tǒng)，系統(tǒng)立即根據(jù)預(yù)定義的消息分發(fā)策略，通知相關(guān)工作人員。

其系統(tǒng)間數(shù)據(jù)流展示如圖1所示。

圖1 信息上報系統(tǒng)數(shù)據(jù)流展示圖

2.2 系統(tǒng)結(jié)構(gòu)

基于微信公眾平臺的小區(qū)信息上報系統(tǒng)結(jié)構(gòu)主要包括信息上報、數(shù)據(jù)處理、消息分發(fā)三個模塊。信息上報模塊主要負(fù)責(zé)與微信服務(wù)器的通信和上報數(shù)據(jù)的初步“加工”。數(shù)據(jù)處理模塊主要包括業(yè)主、工作人員、物業(yè)管理人員的業(yè)務(wù)操作（主要包括各角色權(quán)限分配、信息上報、處理結(jié)果、行為監(jiān)控等）以及與微信服務(wù)器和信息上報系統(tǒng)數(shù)據(jù)庫之間的數(shù)據(jù)操作。消息分發(fā)模塊主要用于業(yè)主和工作人員之間的消息推送。

其系統(tǒng)功能結(jié)構(gòu)如圖2所示。

圖2 信息上報系統(tǒng)功能結(jié)構(gòu)圖

對于上述功能模塊，若使用微信公眾號內(nèi)部的功能進(jìn)行操作，如發(fā)送語音、文字、圖片、地理位置來進(jìn)行數(shù)據(jù)的逐條采集，需要等待上一條數(shù)據(jù)處理完，才能處理下一條數(shù)據(jù)，不利于信息的完整性，也不夠靈活。本系統(tǒng)為了提高操作的靈活性和保障信息的完整性，消息的通知統(tǒng)一使用文字鏈接的形式，用戶點(diǎn)擊文字鏈接即可進(jìn)入相關(guān)的功能模塊，上報信息的采集和展示統(tǒng)一使用HTML5頁面來完成，充分利用微信公眾平臺提供的JS-SDK技術(shù)來采集語音、圖像、地理位置信息，讓用戶更加便捷地填寫信息和查看信息。此處，利用Bootstrap和jQuery框架，可以使信息發(fā)布界面自適應(yīng)于各類尺寸規(guī)格的移動設(shè)備[3]。

3 系統(tǒng)功能與工作流程

3.1 系統(tǒng)功能

將微信公眾平臺應(yīng)用于小區(qū)信息上報系統(tǒng)，把業(yè)主、工作人員、物業(yè)管理人員統(tǒng)一在一個平臺下，降低了信息傳遞的復(fù)雜性，便于及時通訊。為滿足信息上報系統(tǒng)需求，本系統(tǒng)主要包括了以下幾個功能：

（1）角色綁定：小區(qū)業(yè)主、工作人員和物業(yè)管理人員通過掃描小區(qū)公眾號二維碼等渠道進(jìn)入“信息上報系統(tǒng)”，綁定用戶信息即可使用。

（2）權(quán)限分配：對于業(yè)主、工作人員、物業(yè)管理人員，根據(jù)其綁定的角色來分配相應(yīng)的預(yù)先設(shè)定權(quán)限，權(quán)限統(tǒng)一由物業(yè)管理人員進(jìn)行分配。

（3）信息采集：小區(qū)業(yè)主打開信息采集頁面，選擇信息分類，根據(jù)頁面提示錄入語音信息，拍攝現(xiàn)場照片，填寫少量文字，地理位置信息等，主要的問題分類包括治安巡防、衛(wèi)生保潔、水電報修、失物招領(lǐng)等，物業(yè)管理員則可以發(fā)布公告。

（4）信息處理：系統(tǒng)對上報信息的處理包含以下幾個過程：推送相關(guān)工作人員、工作人員確認(rèn)、狀態(tài)反饋給業(yè)主、工作人員處理結(jié)果反饋、通知業(yè)主、業(yè)主確認(rèn)及評價。

（5）信息存儲：在收到業(yè)主上報的信息后，系統(tǒng)先將用戶上傳至微信服務(wù)器的多媒體文件下載到本地進(jìn)行存儲，然后根據(jù)問題標(biāo)簽進(jìn)行分類，將上報信息存入數(shù)據(jù)庫。

圖3 信息上報系統(tǒng)工作流程圖

（6）消息推送：系統(tǒng)服務(wù)器在業(yè)主、工作人員之間發(fā)布消息通知及小區(qū)相關(guān)公告信息，例如，狀態(tài)反饋、失物招領(lǐng)、小區(qū)通知等。

（7）信息管理：業(yè)主上報的所有信息都將被記錄，物業(yè)管理人員通過微信公眾平臺可以監(jiān)管整個小區(qū)的上報信息，對于不合理的上報信息進(jìn)行及時處理。

3.2 工作流程

在系統(tǒng)運(yùn)行時，業(yè)主在微信客戶端發(fā)送信息上報的請求，將語音、圖片等數(shù)據(jù)上傳至微信服務(wù)器，微信服務(wù)器將數(shù)據(jù)包轉(zhuǎn)發(fā)至系統(tǒng)服務(wù)器；在對轉(zhuǎn)發(fā)數(shù)據(jù)進(jìn)行解析后，請求微信服務(wù)器接口，下載語音、圖片到本地保存，同時將數(shù)據(jù)信息存入系統(tǒng)數(shù)據(jù)庫。系統(tǒng)服務(wù)器根據(jù)上報信息的類別，調(diào)用微信服務(wù)器的消息推送接口，向相關(guān)工作人員的微信客戶端推送待處理消息；待工作人員處理完成后，向系統(tǒng)服務(wù)器提交處理結(jié)果，經(jīng)系統(tǒng)服務(wù)器將數(shù)據(jù)存入數(shù)據(jù)庫，向業(yè)主的微信客戶端推送處理結(jié)果信息，業(yè)主將確認(rèn)、評價信息反饋到系統(tǒng)服務(wù)器，并存入系統(tǒng)數(shù)據(jù)庫，整個上報過程結(jié)束。

其系統(tǒng)工作流程如圖3所示。

4 設(shè)計(jì)思想與實(shí)現(xiàn)過程

4.1 信息上報

信息上報作為基于微信公眾平臺的小區(qū)信息上報系統(tǒng)設(shè)計(jì)的核心功能，集成了微信開發(fā)最為核心的技術(shù)——微信內(nèi)的網(wǎng)頁開發(fā)工具包，簡稱JS-SDK，它提供了圖片上傳與下載接口、語音上傳與下載接口、地理位置信息接口等，主要是為了滿足對信息采集的多方面要求，通過信息上報功能，可以全方位的采集各類信息，主要有文字，語音，圖片，地理位置[4]。在使用過程中，業(yè)主可以根據(jù)需要，上報自己所采集到的信息，工作人員對于已經(jīng)對業(yè)主上報的問題處理完成后，也可以采集圖片，語音等數(shù)據(jù)，將其反饋至系統(tǒng)服務(wù)器，其操作過程與業(yè)主相似。

JS-SDK使用步驟如下：

1.綁定域名，即在微信公眾號平臺配置系統(tǒng)服務(wù)器所綁定的域名；

2.在H5頁面引入微信官方的JS文件庫；

3.通過JS庫中的wx.config()函數(shù)接口注入權(quán)限驗(yàn)證配置；

4.通過JS庫中的wx.ready()接口處理成功驗(yàn)證；

5.通過JS庫中的wx.error()接口處理失敗驗(yàn)證；

該模塊利用微信公眾平臺提供的語音上傳接口，可以方便的調(diào)用手機(jī)的錄音功能，將用戶說的話錄制成語音，上傳到微信服務(wù)器，再利用平臺提供的下載接口將語音文件下載到系統(tǒng)服務(wù)器上，實(shí)現(xiàn)語音數(shù)據(jù)的永久性保存，同時將語音在系統(tǒng)服務(wù)器上存放的地址與其他文字信息一起存入數(shù)據(jù)庫中，這樣就可以有效保存上報信息的所有數(shù)據(jù)。對于圖片的處理，和語音上傳一致，這里不再贅述。

信息上報模塊除了調(diào)用微信公眾號開發(fā)平臺提供的多媒體上傳接口外，還需要將從住戶或者業(yè)主采集到的信息進(jìn)行初步的“加工”，因?yàn)檫@些數(shù)據(jù)是零散的，直接將其上傳到系統(tǒng)服務(wù)器則需要對這些數(shù)據(jù)進(jìn)行處理，增加了系統(tǒng)服務(wù)器的“負(fù)擔(dān)”，所以在信息上報模塊將這些數(shù)據(jù)進(jìn)行JSON序列化處理[5]，形成一個個的“報單”，處理完成后交由數(shù)據(jù)處理模塊解析，既降低了模塊之間的耦合度，也提高了數(shù)據(jù)處理的效率。

4.2 數(shù)據(jù)處理

數(shù)據(jù)處理主要負(fù)責(zé)各個模塊信息的解析、分類、匯總。這里只是在上傳語音、圖片等多媒體素材時與微信服務(wù)器進(jìn)行通信，即業(yè)主有提交圖片或者語音信息，那么微信服務(wù)器會將這個媒體文件的MediaID（媒體文件ID）返回給系統(tǒng)服務(wù)器，在系統(tǒng)服務(wù)器端進(jìn)而調(diào)用微信公眾平臺的下載接口將文件下載到本地進(jìn)行存儲[6]，業(yè)主所提交的這些文字、語音、圖片、地理位置等信息，就是上文提到信息上報模塊之后的“報單”；其他非媒體素材的上報信息不經(jīng)過微信服務(wù)器，直接提交到信息上報系統(tǒng)服務(wù)器，信息上報系統(tǒng)服務(wù)器收到的“報單”內(nèi)容如下：

該“報單”包含：上報用戶的OpenID、上報信息的分類標(biāo)簽Keywords、文字描述Desc、語音/圖片MediaID、地理位置信息Address。在收到“報單”之后，信息上報系統(tǒng)服務(wù)器要做的是解析其中的數(shù)據(jù)，按照“報單”中的標(biāo)簽進(jìn)行分類并生成一個唯一的ID編號存儲到數(shù)據(jù)庫中進(jìn)行保存，不同的“報單”以唯一標(biāo)識的ID編號進(jìn)行區(qū)分，之后調(diào)用消息分發(fā)模塊將該消息推送指定的工作人員，工作人員點(diǎn)擊該鏈接查看該消息后，可以選擇進(jìn)行處理或者忽略，若選擇處理，則該上報信息就會被鎖定，并且通知上報者已有工作人員確認(rèn)處理了這一條信息，其他工作人員無法再進(jìn)行確認(rèn)處理。

在工作人員處理完成后，同樣可以將語音，文字，圖片反饋到系統(tǒng)服務(wù)器，系統(tǒng)服務(wù)器查詢上報這則消息的業(yè)主向其定向推送處理結(jié)果，上報者可以對“反饋單”進(jìn)行確認(rèn)完成、評價等操作，為了方便物業(yè)的管理，在整個上報過程中，物業(yè)管理人員可以對所有上報的信息進(jìn)行核實(shí)和監(jiān)控，其中的每一個環(huán)節(jié)都會被記錄，以便物業(yè)后期對信息進(jìn)行匯總和統(tǒng)計(jì)。

4.3 消息分發(fā)

消息分發(fā)是信息上報系統(tǒng)提供了不同的用戶對應(yīng)于不同的角色任務(wù)，能夠上報、處理和接收的信息不盡相同。為了使消息分發(fā)適應(yīng)業(yè)務(wù)的需求并增加消息分發(fā)的靈活性，這里是采用流行的基于角色的訪問控制（RBAC）模式，簡化了權(quán)限管理，能夠有效的實(shí)現(xiàn)不同角色的權(quán)限控制[7]，不同角色各司其職，接收各自的消息互補(bǔ)干擾，很好的維護(hù)了消息分發(fā)的穩(wěn)定性和可靠性。本系統(tǒng)的主要角色有物業(yè)管理人員，工作人員，業(yè)主，其權(quán)限分別如下：

物業(yè)管理人員：查看/發(fā)布/刪除小區(qū)公告、查看上報信息、添加/刪除工作人員。

工作人員：查看小區(qū)公告、接收/查看/反饋上報信息。

業(yè)主：查看小區(qū)公告、提交/查詢/評價上報信息。

在消息分發(fā)的時候，消息分發(fā)模塊會根據(jù)收到的信息，解析出這條信息應(yīng)該由某個人或者某類人接收，所以這個分發(fā)過程可以是一對一（單發(fā)），也可以是一對多（群發(fā)）。對于業(yè)主上報的信息，首先由信息上報系統(tǒng)服務(wù)器解析出“接收者標(biāo)簽”，然后根據(jù)“接收者標(biāo)簽”去數(shù)據(jù)庫服務(wù)器查詢這個標(biāo)簽對應(yīng)的“接收者角色”，再由角色確定到具體的“接收者”，由于可以實(shí)現(xiàn)定義好“標(biāo)簽-角色-人員”視圖，所以整個查詢過程并不耗時。當(dāng)有了這個“接收者”（本質(zhì)上為用戶的OpenID）之后，調(diào)用微信公眾平臺提供的消息推送接口，向其以POST方式提交如下格式的JSON字符串：

圖4 信息上報系統(tǒng)運(yùn)行頁面

這里的touser表示接收消息者，里面填的是工作人員的OpenID，類型為文本類型，以及相關(guān)信息頁面的URL，就可以將信息文字形式發(fā)送至工作人員的微信公眾號上。工作人員只需在公眾號內(nèi)點(diǎn)擊鏈接或者圖文消息即可查看到業(yè)主提交的上報信息[8]，進(jìn)行相應(yīng)的處理。

當(dāng)工作人員處理完成后，可以將處理結(jié)果（語音、文字、圖片）提交到系統(tǒng)服務(wù)器，系統(tǒng)服務(wù)器則根據(jù)“報單”的ID編號確定上報者的OpenID，調(diào)用微信消息推送接口向其單發(fā)處理結(jié)果。

5 運(yùn)行與實(shí)施

本系統(tǒng)已穩(wěn)定地運(yùn)行于常州市新北區(qū)府琛花園小區(qū)中。通過微信客戶端的添加朋友或者掃一掃功能關(guān)注信息上報系統(tǒng)服務(wù)號。關(guān)注成功之后綁定用戶信息，即可使用信息上報系統(tǒng)。圖4為基于微信公眾平臺的小區(qū)信息上報系統(tǒng)運(yùn)行界面,（a）為信息上報頁面，（b）為上報問題狀態(tài)頁面，（c）為業(yè)主個人信息頁面。

6 結(jié)束語

基于微信公眾平臺的小區(qū)信息上報系統(tǒng)，實(shí)現(xiàn)了溝通及時性、處理方便性，利于物業(yè)集中管理住宅小區(qū)，同時充分調(diào)動業(yè)主管理小區(qū)事務(wù)的積極性，實(shí)現(xiàn)業(yè)主與物業(yè)溝通“零距離”。通過實(shí)際應(yīng)用，證明了系統(tǒng)的可行性和可用性，達(dá)到了系統(tǒng)設(shè)計(jì)的目的和使用需求，提高了住宅小區(qū)管理的效率，促使業(yè)主積極參與到小區(qū)建設(shè)和管理之中。

[1]許靜.住宅小區(qū)智能化建設(shè) [J].中外企業(yè)家,2013(29):79-80.Xu Jing.Intelligent Construction of Residential[J].Chinese and Foreign Entrepreneurs,2013(29):79-80.

[2]趙展浩.基于微信公眾平臺的智能校園信息平臺設(shè)計(jì)與實(shí)現(xiàn)[J].計(jì)算機(jī)時代,2016(5):38-40.Zhao Zhanhao.Design and Implementation of Intelligent Campus Information Platform Based on WeChat Platform[J].The Computer Age,2016(5):38-40.

[3]陶國榮.jQuery Mobile權(quán)威指南[M].上海:機(jī)械工業(yè)出版社,2012.Tao Guorong.The Definitive Guide of jQuery Mobile[M].Shanghai:China Machine Press,2012.

[4]劉斌.HTML5-未來網(wǎng)絡(luò)應(yīng)用的核心技術(shù)研究[J].自動化與儀器儀表,2010(4):30-33.Liu Bing.HTML5-Research on the Core Technology of Future Network Application[J].Automation&Instrumentation,2010(4):30-33.

[5]郭慶燕,張敏,楊賢棟.JQuery Ajax異步處理JSON數(shù)據(jù)實(shí)現(xiàn)氣象圖片的顯示[J].計(jì)算機(jī)應(yīng)用與軟件,2016,33(6):20-22.Guo Qingyan,Zhang Min,Yang Xiandong.JQuery Ajax Asynchronous Processing of JSON Data to Achieve the Display of Weather Images[J].Computer Applications and Software,2016,33(6):20-22.

[6]陳曉羅.基于微信公眾平臺的高校師生信息互動平臺研究與實(shí)現(xiàn)[J].吉林省教育學(xué)院學(xué)報旬刊,2013(9):98-99.Chen Xiaoluo.Research and Realization of Information Interaction Platform Between Teachers and Students Based on WeChat Platform [J].Journal of Jilin Province Institute of Education,2013(9):98-99.

[7]溫號,王萍,徐萌萌,等.基于微信公眾平臺的食品團(tuán)購管理系統(tǒng)設(shè)計(jì)[J].微處理機(jī),2015(6):65-69.Wen Hao,Wang Ping,Xu Mengmeng,etc.Design of Food Group Purchase Management System Based on WeChat[J].Microprocessor,2015(6):65-69.

[8]覃介右，谷岳.HTML5觸摸界面設(shè)計(jì)與開發(fā)[M].北京:人民郵電出版社,2014.Tan Jieyou，Gu Yue.HTML5 Touch Interface Design and Development[M].Beijing:Posts and Telecommunications Press,2014.

Design of Information Reporting System
for Residential District Based on WeChat Public Platform

Tao Youxian,Wu Longying,Bai Hongxi,Mou Yan
(College of Internet of Things Engineering,Hohai University,Jiangsu Changzhou,213022,China)

In order to facilitate the communication between the property management and the owners in residential district and improve the level of property services,the information reporting system for residential district based on WeChat platform is developed.This system is based on Tencent's WeChat public development platform,using HTML5,JSON data processing and WeChat public development API,realizing the collection,exchange and message-pushing of the data,photos,voices and so on.The system has been operated in some residential district for one year,helping property management and owners with the notification posting,sanitation cleaning,security patroling,water and electricity repairing,and lost thing finding,which effectively improves the residential district property service quality.

WeChat public platform;Information reporting;HTML5;JSON data processing;WeChat official account;Property management

10.3969/j.issn.1002-2279.2017.04.011

A

1002-2279-（2017）04-0039-06

*項(xiàng)目來源：國家級大學(xué)生創(chuàng)新創(chuàng)業(yè)訓(xùn)練計(jì)劃項(xiàng)目-基于微信平臺的智能小區(qū)管家，項(xiàng)目編號：201510294097

陶友賢（1995—），男，安徽省馬鞍山市人，學(xué)生，主研方向：智能信息處理理論與技術(shù)。

2017-01-11