基于微信的我的財(cái)會(huì)管理系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)

基于微信的我的財(cái)會(huì)管理系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)

1微信小程序“輕應(yīng)用”隨著移動(dòng)通信業(yè)務(wù)和信息技術(shù)的快速發(fā)展，移動(dòng)終端應(yīng)用（app）的功能變得越來越多樣化，越來越受到重視。微信、支付寶以及各大手機(jī)品牌開始著手于“小程序”“輕應(yīng)用”的開發(fā)。在信息技術(shù)較為發(fā)達(dá)、社交軟件較為集中的當(dāng)今社會(huì)中,使用微信小程序開發(fā)程序可以實(shí)現(xiàn)用戶數(shù)量的快速擴(kuò)增。同時(shí),微信小程序的mina框架使得程序開發(fā)的效率大大提高,讓開發(fā)者能夠?qū)⒏嗟木蜁r(shí)間集中在程序功能開發(fā)上,使得開發(fā)者能在相對(duì)較短的時(shí)間內(nèi)開發(fā)出功能完善、界面美觀的程序,并在短時(shí)間內(nèi)上線供大眾使用。2系統(tǒng)的搭建結(jié)構(gòu)使用微信小程序開發(fā)者工具進(jìn)行程序的頁面邏輯編譯和前端實(shí)現(xiàn)。小程序每個(gè)頁面的編碼采用HTML+CSS+JS組合,微信開發(fā)者工具將這三種語言進(jìn)行升級(jí)修改后,對(duì)應(yīng)更名為WXML+WXSS+JS。其中WXML是用來描述當(dāng)前頁面的組成結(jié)構(gòu),WXSS用來描述頁面的顯示樣式,JS通常是用來處理該頁面的邏輯關(guān)系和功能實(shí)現(xiàn),它控制當(dāng)前頁面的用戶操作交互,監(jiān)聽并響應(yīng)用戶的操作,獲取用戶的及信息等。為簡(jiǎn)化程序開發(fā)流程,使用搭建好的Bmob云后端實(shí)現(xiàn)前端和后端的數(shù)據(jù)交互、用戶數(shù)據(jù)的增刪改查、頁面數(shù)據(jù)更換、客服聊天等功能。比目云后端和微信小程序通過特定的ID進(jìn)行綁定,根據(jù)比目云微信小程序開發(fā)文檔對(duì)數(shù)據(jù)庫/表進(jìn)行操作,用戶通過小程序的任何與后端有關(guān)的操作都會(huì)記錄在后端相應(yīng)的數(shù)據(jù)表中。3會(huì)議設(shè)備管理會(huì)務(wù)管理系統(tǒng)就是基于微信小程序開發(fā)工具平臺(tái)開發(fā)的一個(gè)即時(shí)應(yīng)用,讓用戶可以通過微信小程序搜索并直接使用該程序,方便快捷地實(shí)現(xiàn)會(huì)議的簡(jiǎn)要信息瀏覽、會(huì)議地點(diǎn)導(dǎo)航,根據(jù)用戶需求實(shí)現(xiàn)在線報(bào)名、參展、贊助,掃碼簽到(報(bào)名)、定位簽到以及取消報(bào)名、客服交談等功能。為方便用戶使用,不占用用戶更多的資源,該會(huì)務(wù)管理系統(tǒng)將服務(wù)器和保存數(shù)據(jù)都存儲(chǔ)在云端,用戶只需在網(wǎng)絡(luò)暢通的情況下,實(shí)時(shí)進(jìn)行數(shù)據(jù)調(diào)用。下圖1為總體設(shè)計(jì)思路。4整體設(shè)計(jì)4.1報(bào)名表的增加本程序使用比目后端云提供數(shù)據(jù)庫服務(wù),包括如下數(shù)據(jù)表:用戶數(shù)據(jù)表、首頁輪播圖表、圖標(biāo)icon表、近期會(huì)務(wù)表、會(huì)議報(bào)名統(tǒng)計(jì)表、贊助支持報(bào)名統(tǒng)計(jì)表、業(yè)務(wù)宣傳報(bào)名統(tǒng)計(jì)表。其中,三個(gè)報(bào)名統(tǒng)計(jì)表的數(shù)據(jù)表結(jié)構(gòu)相同,分為三個(gè)表的目的在于區(qū)分用戶目的,方便后臺(tái)數(shù)據(jù)庫的管理。下面列出與前端實(shí)現(xiàn)數(shù)據(jù)交互主要的數(shù)據(jù)表結(jié)構(gòu)、主要字段及字段描述。4.2舉辦展覽、舉辦展覽、參加展覽等活動(dòng)會(huì)務(wù)管理小程序的功能模塊主要在于會(huì)務(wù)的瀏覽、報(bào)名、參加贊助、參加展覽、查看會(huì)務(wù)詳情、地點(diǎn)導(dǎo)航、簽到定位、掃碼簽到、掃碼報(bào)名、取消參會(huì)等。主要的功能模塊如圖2所示。4.3生成本地?cái)?shù)據(jù)安全用戶進(jìn)入當(dāng)前小程序的時(shí)候,就會(huì)生成針對(duì)本程序而言唯一的openid,且不隨用戶刪除程序而變化,相當(dāng)于是該用戶對(duì)本程序的唯一身份證。為避免云端數(shù)據(jù)庫更新或刪減導(dǎo)致用戶加載數(shù)據(jù)錯(cuò)誤的發(fā)生,特定在登錄頁面制作了openid判斷。分析云數(shù)據(jù)庫是否有該用戶的數(shù)據(jù),如有則繼續(xù)執(zhí)行數(shù)據(jù)獲取;如果云數(shù)據(jù)庫誤操作刪除了該用戶的數(shù)據(jù),則會(huì)重新生成一條新的數(shù)據(jù),用于匹配該用戶已存在數(shù)據(jù)庫中的其他相關(guān)數(shù)據(jù)。如果用戶清除了本地緩存或刪除了本程序?qū)е卤镜鼐彺鏇]有openid,則會(huì)將值寫入本地緩存,重新匹配云數(shù)據(jù)庫中的關(guān)聯(lián)數(shù)據(jù)。由此實(shí)現(xiàn)用戶的唯一性及用戶數(shù)據(jù)的安全性。4.4關(guān)注等項(xiàng)目的獲取用戶報(bào)名參與,會(huì)出現(xiàn)3個(gè)入口,即:報(bào)名參與、業(yè)務(wù)宣傳、贊助支持。這3個(gè)入口通過綁定點(diǎn)擊事件的自定義參數(shù),同時(shí)傳遞當(dāng)前點(diǎn)擊項(xiàng)目的值進(jìn)行傳參跳轉(zhuǎn)到報(bào)名頁面。當(dāng)前頁面會(huì)根據(jù)當(dāng)前會(huì)務(wù)需要收集的信息進(jìn)行判斷,從而收集對(duì)應(yīng)的信息。例:若會(huì)務(wù)需要收集參會(huì)者的身份證號(hào)碼,報(bào)名頁面就會(huì)顯示出填寫身份證的輸入框;若不需要收集,則不顯示。4.5系統(tǒng)操作的實(shí)現(xiàn)當(dāng)頁面監(jiān)聽到用戶點(diǎn)擊“掃碼簽到”按鈕時(shí),首先調(diào)用微信的開啟掃碼攝像API接口,獲取被掃描二維碼的值,然后通過查詢對(duì)應(yīng)數(shù)據(jù)表跳轉(zhuǎn)到資料提交頁面,進(jìn)行會(huì)議的報(bào)名等操作。4.6系統(tǒng)頁面設(shè)計(jì)此頁面是整個(gè)小程序的入口頁面,用戶進(jìn)入程序后從后臺(tái)獲取與用戶相關(guān)的數(shù)據(jù)進(jìn)行數(shù)據(jù)更新,并相應(yīng)用戶點(diǎn)擊事件,顯示在對(duì)應(yīng)的欄目中。為了保證數(shù)據(jù)的時(shí)效性,即:用戶在其他頁面報(bào)名后,回到會(huì)務(wù)管理頁面時(shí)能見到剛才提交的數(shù)據(jù)。因此必須在當(dāng)前頁面做刷新,監(jiān)聽用戶當(dāng)前頁面,一旦此頁面顯示,立即刷新當(dāng)前頁面進(jìn)行數(shù)據(jù)更新。為了優(yōu)化用戶體驗(yàn),增加用戶的自由度,用戶可以在此頁面進(jìn)行已報(bào)名會(huì)務(wù)的取消參會(huì)、查看會(huì)議流程。此處應(yīng)用到的前端功能實(shí)現(xiàn)將于詳細(xì)設(shè)計(jì)中體現(xiàn)。數(shù)據(jù)更新,則是通過獲取用戶當(dāng)前點(diǎn)擊項(xiàng)目的數(shù)據(jù)ID,鏈接后臺(tái)數(shù)據(jù)庫進(jìn)行數(shù)據(jù)刪除,達(dá)到取消參會(huì)的功能。當(dāng)用戶取消參會(huì)時(shí),也會(huì)在該會(huì)議的參會(huì)人數(shù)中進(jìn)行人數(shù)統(tǒng)計(jì)的更新。圖3為首頁總體布局,圖4為首頁滾動(dòng)視圖展示。5序開發(fā)出“微信小程序的開發(fā),僅僅只是當(dāng)今計(jì)算機(jī)技術(shù)飛速發(fā)展的冰山一角,以后將會(huì)有更便攜的應(yīng)用程序開發(fā)出來。但程序的開發(fā)離不開基礎(chǔ)語言的學(xué)習(xí)與