基于微信小程序的物業(yè)繳費(fèi)系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)

史可欣, 楊俊杰

(上海電機(jī)學(xué)院 電子信息學(xué)院, 上海201306)

目前,物業(yè)管理系統(tǒng)大多數(shù)采用WEB網(wǎng)站以及手機(jī)APP的開發(fā)方式[1-6]。開發(fā)這樣的系統(tǒng),需要搭建、購置服務(wù)器,注冊(cè)并備案域名[7-9],成本開支不小。同時(shí),這種前后端分離的開發(fā)方式經(jīng)常產(chǎn)生權(quán)責(zé)不清、討論溝通時(shí)間長、調(diào)試麻煩等問題,降低了開發(fā)效率。為此,設(shè)計(jì)開發(fā)了一套基于微信小程序的物業(yè)繳費(fèi)系統(tǒng),無需搭建服務(wù)器和管理后端服務(wù)架構(gòu),極大減輕了開發(fā)過程中復(fù)雜的后端操作。同時(shí),實(shí)現(xiàn)了業(yè)主足不出戶,隨時(shí)隨地完成一鍵繳費(fèi)和自行管理發(fā)票收據(jù)等功能,對(duì)提升居民的生活質(zhì)量有積極意義,具有一定的推廣價(jià)值。

1 小程序及其相關(guān)技術(shù)

1.1 微信小程序

當(dāng)前各類移動(dòng)應(yīng)用程序APP使用十分廣泛,在很大程度上提高了人們生活的便利性。但隨之而來也出現(xiàn)了很多的問題,例如:有很多下載的APP使用次數(shù)較少,但又不能將其刪除不用,這時(shí)就會(huì)出現(xiàn)手機(jī)內(nèi)存容量不足的問題;當(dāng)多個(gè)APP在后臺(tái)同時(shí)運(yùn)行時(shí),手機(jī)就容易出現(xiàn)運(yùn)行速度變慢的情況。針對(duì)日益豐富的APP與手機(jī)內(nèi)存以及運(yùn)行速度之間的問題,微信在2017年推出了小程序。小程序最大的特點(diǎn)就是“即點(diǎn)(掃)即用”,用戶只需要掃一掃就可打開應(yīng)用,不需要下載安裝。這也體現(xiàn)了“用完即走”的理念,用戶不用關(guān)心是否安裝太多應(yīng)用程序的問題。應(yīng)用程序?qū)o處不在,隨時(shí)可用,但又無需安裝卸載[10],既方便又快捷,而且不會(huì)太占用手機(jī)內(nèi)存。微信小程序自推出后,在很多領(lǐng)域得到了廣泛的應(yīng)用,但在現(xiàn)有的物業(yè)管理中,應(yīng)用較少。而微信小程序因?yàn)榘踩Ｃ苄詮?qiáng)、輕應(yīng)用、大流量以及體驗(yàn)更流暢等特點(diǎn)[11],可以很好解決物業(yè)管理中遇到的實(shí)際問題。

1.2 小程序的MINA框架

MINA框架結(jié)構(gòu)如圖1所示。MINA框架是一個(gè)網(wǎng)絡(luò)通信應(yīng)用框架,其核心是一個(gè)響應(yīng)的數(shù)據(jù)綁定系統(tǒng),有著接近原生APP的運(yùn)行速度,對(duì)IOS端和Android端做到了充分的展現(xiàn)。其框架包含4類文件:①JS文件。屬于邏輯層框架,用來處理事務(wù)邏輯、實(shí)現(xiàn)數(shù)據(jù)的管理以及網(wǎng)絡(luò)的通信應(yīng)用等。②WXML文件。屬于設(shè)計(jì)的標(biāo)簽語言,類似于WEB中的HTML。③WXSS文件。屬于描述WXML的組件樣式,類似于WEB中的CSS。④JSON文件。屬于配置文件,用于單個(gè)頁面和整個(gè)項(xiàng)目的配置。由MINA框架的結(jié)構(gòu)可以看出,頁面視圖層與應(yīng)用邏輯層之間進(jìn)行的數(shù)據(jù)、事件交互,需要通過系統(tǒng)層來實(shí)現(xiàn)。其最大的優(yōu)點(diǎn)就是當(dāng)開發(fā)人員處理數(shù)據(jù)的時(shí)候,只需要考慮邏輯層的數(shù)據(jù)處理(開發(fā)人員不需要關(guān)注其他層的內(nèi)容,只專注業(yè)務(wù)邏輯上的處理即可),視圖層會(huì)自動(dòng)做出對(duì)應(yīng)的更新。

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

1.3 小程序的云開發(fā)

目前,一般程序項(xiàng)目的設(shè)計(jì)和開發(fā)大多數(shù)采用前后分離的方式進(jìn)行[12]。小程序云開發(fā)采用了無服務(wù)化的開發(fā),將后端服務(wù)封裝成許多個(gè)特定的接口,并且提供了存文件的云存儲(chǔ)、存數(shù)據(jù)的數(shù)據(jù)庫以及具有運(yùn)行業(yè)務(wù)邏輯能力的云函數(shù)三大功能。采用小程序云開發(fā)可以使開發(fā)效率大大提高,開發(fā)人員需要管理的東西逐漸減少,使程序更具高性能、高可用性和高擴(kuò)展性的特點(diǎn)。基于小程序云開發(fā),無需部署Node.js、搭建服務(wù)器,削弱了服務(wù)端的概念,并且使用平臺(tái)提供的API接口,可以快速高效地開發(fā)上線[13]。圖2是傳統(tǒng)開發(fā)模式與云開發(fā)模式架構(gòu)的對(duì)比。

圖2 傳統(tǒng)開發(fā)模式與云開發(fā)模式架構(gòu)對(duì)比

1.3.1 數(shù)據(jù)庫 云開發(fā)提供的數(shù)據(jù)庫與傳統(tǒng)關(guān)系型數(shù)據(jù)庫有所不同,其采用鍵值對(duì)的存儲(chǔ)方式,屬于JSON文檔數(shù)據(jù)庫。可以通過小程序端直接調(diào)用非敏感的數(shù)據(jù)[14],同時(shí)由于小程序端和云函數(shù)是相互獨(dú)立的,也可通過云函數(shù)更加安全、私密地調(diào)用安全性較高的數(shù)據(jù)。

鍵值對(duì),即一個(gè)獨(dú)特的key指向一個(gè)獨(dú)特的value,兩者之間通過哈希算法關(guān)聯(lián)起來,達(dá)到快速查詢的目的,保證用戶的訪問速度,使用戶的體驗(yàn)度更高。表1為文檔型數(shù)據(jù)庫與關(guān)系型數(shù)據(jù)庫的對(duì)應(yīng)關(guān)系。

表1 文檔型數(shù)據(jù)庫與關(guān)系型數(shù)據(jù)庫的對(duì)應(yīng)關(guān)系

1.3.2 云函數(shù) 云函數(shù)是一段能在云端運(yùn)行的代碼,不需要管理服務(wù)器,只要在開發(fā)工具內(nèi)進(jìn)行編寫,一鍵上傳部署就可運(yùn)行的后端代碼[14]。像OpenID這種能唯一標(biāo)識(shí)的數(shù)據(jù)信息保存在云端,可以方便開發(fā)者的調(diào)用。云端代碼可以實(shí)現(xiàn)多開發(fā)者的共享使用,有利于代碼的維護(hù)。

1.3.3 存儲(chǔ)器 開發(fā)者可以在云函數(shù)或者小程序端通過API使用云存儲(chǔ)的功能,進(jìn)行上傳文件和圖片的操作,并且可以按權(quán)限在小程序端完成下載文件和圖片的操作。

1.4 微信支付接口

申請(qǐng)appid和mch_id,兩者需具備綁定關(guān)系,以此來使用微信支付提供的開放接口,對(duì)用戶提供服務(wù)。微信支付接口如圖3所示。

圖3 微信支付接口

2 小程序總體設(shè)計(jì)

2.1 小程序整體架構(gòu)

物業(yè)繳費(fèi)小程序的開發(fā)根據(jù)現(xiàn)有需求分析制定功能。主要包括業(yè)主用戶端的發(fā)票收據(jù)管理模塊、繳費(fèi)模塊、投訴模塊等以及管理員端的業(yè)主繳費(fèi)信息模塊、通知公告模塊(各類費(fèi)用定期繳費(fèi)的提醒)等。系統(tǒng)功能結(jié)構(gòu)如圖4所示。

圖4 物業(yè)繳費(fèi)系統(tǒng)功能結(jié)構(gòu)

2.2 小程序功能設(shè)計(jì)

物業(yè)管理小程序包含業(yè)主和管理員兩大用戶。業(yè)主所涉及的模塊主要包括投訴模塊、繳費(fèi)模塊等,其中創(chuàng)新的模塊如下:

(1) 繳費(fèi)模塊。業(yè)主可以足不出戶、不限時(shí)間地使用微信支付水電燃?xì)狻⑽飿I(yè)費(fèi)等費(fèi)用,支付成功后會(huì)收到一張電子收據(jù)單作為繳費(fèi)憑證。每個(gè)月月底會(huì)收到當(dāng)月繳費(fèi)憑證,生成當(dāng)月報(bào)表數(shù)據(jù)(折線統(tǒng)計(jì)圖),業(yè)主一目了然。

(2) 發(fā)票收據(jù)管理模塊。通過繳費(fèi)后生成的收據(jù)會(huì)保存在這個(gè)模塊下,按年、月分類。同時(shí),也可以將自己其他類型的發(fā)票收據(jù)拍照上傳到此模塊進(jìn)行管理,避免了票據(jù)丟失造成的不必要麻煩。模塊還具備票據(jù)下載的功能。

管理員所涉及的模塊主要包括繳費(fèi)信息模塊、通知公告模塊等,其中繳費(fèi)信息管理模塊有創(chuàng)新。此模塊生成每戶每月的報(bào)表數(shù)據(jù)、未按時(shí)繳費(fèi)的人員名單等信息。管理員可以對(duì)在規(guī)定時(shí)間內(nèi)未按時(shí)繳費(fèi)的人員發(fā)出告知。

3 小程序功能的實(shí)現(xiàn)

3.1 小程序的整體架構(gòu)

本程序整體采用3層架構(gòu)的設(shè)計(jì)思想,分別為表現(xiàn)層(前端界面)、業(yè)務(wù)邏輯層、數(shù)據(jù)訪問層(持久層)。具體結(jié)構(gòu)如圖5所示。

(1) 表現(xiàn)層(前端顯示頁面)。其技術(shù)路線采用WXML以及WXSS,其中WXML類似于WEB中的HTML,為設(shè)計(jì)的標(biāo)簽語言;WXSS類似于WEB中的CSS,為描述WXML組件的樣式。

(2) 業(yè)務(wù)邏輯層(整個(gè)程序的核心)。其技術(shù)路線采用小程序的原生接口實(shí)現(xiàn)。程序的用戶包括業(yè)主和物業(yè)管理員。在程序中,業(yè)主可以注冊(cè)并登錄,進(jìn)行線上繳費(fèi)、微信支付以及發(fā)票收據(jù)的上傳、下載;物業(yè)管理員對(duì)應(yīng)管理業(yè)主的繳費(fèi)信息、通知公告等。

(3) 數(shù)據(jù)訪問層(持久層)。數(shù)據(jù)訪問層包括了數(shù)據(jù)信息和文件、圖片的存儲(chǔ)功能。本程序的發(fā)票收據(jù)管理功能就是基于數(shù)據(jù)訪問層的云存儲(chǔ),具有圖片的上傳、下載和預(yù)覽功能。

圖5 程序結(jié)構(gòu)

3.2 功能的實(shí)現(xiàn)

3.2.1 小程序主界面 不管是業(yè)主還是管理員都需要輸入用戶名和密碼才能進(jìn)入系統(tǒng)。通過后臺(tái)登錄權(quán)限的驗(yàn)證,不同的角色會(huì)進(jìn)入到不同的程序主頁面。圖6為小程序主頁面。

圖6 小程序主頁面

3.2.2 繳費(fèi)功能 繳費(fèi)功能實(shí)現(xiàn)一鍵繳費(fèi),用戶進(jìn)入繳費(fèi)界面時(shí),可查看需要繳費(fèi)的項(xiàng)目,若想一鍵繳費(fèi),則需要綁定微信支付,綁定成功后即可一鍵繳費(fèi)。

該模塊關(guān)鍵代碼如下:

do Wx Pay(param) {

wx.request Payment({

time Stamp:param.data.time Stamp,

nonce Str:param.data.nonce Str,

package:param.data.package,

sign Type:’MD5’,

pay Sign:param.data.pay Sign,

success:f unction (event) {

console.log(event);

wx.show Toast({

title:’支付成功’,

icon:’success’,

duration:2000

});

},

fail:f unction (error){

console.log("支付失敗")

console.log(error)

}

3.2.3 發(fā)票收據(jù)管理功能 發(fā)票收據(jù)管理功能將紙質(zhì)版的發(fā)票收據(jù)拍照后上傳至云存儲(chǔ),將照片路徑添加到云數(shù)據(jù)庫中。如果業(yè)主想查看票據(jù),可以使用預(yù)覽功能。已上傳的票據(jù),也可以下載。這樣在一定程度上解決了手機(jī)相冊(cè)存儲(chǔ)過多,手機(jī)內(nèi)存不足的問題。

該模塊關(guān)鍵代碼如下:

/*上傳圖片模塊*/

let ti mes Tamps=Date.parse(new Date());

①讓用戶選擇圖片,最多一次可以上傳三張

wx.choose Image({

count:3,

success:choose Result=＞{

choose Result.temp File Paths.for Each((item,

times Tamps)=＞{

②上傳圖片至云存儲(chǔ)

wx.cloud.upload File({

③指定上傳到的云路徑

cloud Path:times Tamps+'.png',

④指定文件的臨時(shí)路徑

file Path:item,

success:res=＞{

console.log('上傳成功',res)

that.set Data({

img Url:res.file ID})}})})

4 結(jié) 語

本文物業(yè)繳費(fèi)小程序投入運(yùn)營后,降低了物業(yè)管理人員的勞動(dòng)強(qiáng)度,方便了業(yè)主線上繳費(fèi)。它具有成本低、開發(fā)周期短、易維護(hù)、體驗(yàn)度高等優(yōu)點(diǎn),經(jīng)過測(cè)試和運(yùn)行,達(dá)到了預(yù)期的目標(biāo),具有一定的推廣價(jià)值。