曾國(guó)強(qiáng),王楚虹,黃 江,師文慶
(廣東海洋大學(xué)電子與信息工程學(xué)院,廣東湛江 524088)
投票是公民表達(dá)自己喜好的一種方式,大到投票選舉國(guó)家領(lǐng)導(dǎo)人,小到對(duì)某一款產(chǎn)品表示喜好等等,都可以使用投票的方式[1]。在線投票系統(tǒng)的出現(xiàn)打破了傳統(tǒng)人工投票模式中時(shí)間和地域限制,擴(kuò)大參與人員范圍,拓寬宣傳渠道,增強(qiáng)人物影響力,省去人工制票、發(fā)票、收票、統(tǒng)計(jì)票數(shù)等環(huán)節(jié)[2]。傳統(tǒng)App其實(shí)就是日常使用的智能手機(jī)上的第三方應(yīng)用程序,一般都在各個(gè)平臺(tái)的應(yīng)用商城上供用戶下載使用。傳統(tǒng)意義上的App分為3種:原生應(yīng)用(Native App)、混合應(yīng)用(Hybrid App)和網(wǎng)頁(yè)應(yīng)用(Web App)[3]。
微信的目的,就是希望把用戶使用App的動(dòng)作都集中在微信上[4]。同時(shí),使用JavaScript、WXML、WXSS技術(shù)體系即可快速完成開(kāi)發(fā),操作體驗(yàn)媲美原生手機(jī)應(yīng)用,兼容iOS和安卓,開(kāi)發(fā)成本低,可維護(hù)性強(qiáng)[5]。特別是小程序無(wú)須考慮開(kāi)發(fā)的應(yīng)用是否能夠在IOS和Android兩大手機(jī)用戶,任何人只需要在微信里就能運(yùn)行小程序;小程序不僅可以縮短開(kāi)發(fā)周期,而且可以降低開(kāi)發(fā)成本。
與微信公眾號(hào)相比,小程序作為獨(dú)立化的應(yīng)用程序,能夠以更加多樣化的形式開(kāi)展服務(wù)[6]。微信投票小程序需要實(shí)現(xiàn)微信用戶投票、發(fā)布投票、分享投票等功能,本系統(tǒng)也是一款免費(fèi)的工具類小程序,可以更加方便微信用戶使用,無(wú)須安裝下載,特別是對(duì)于手機(jī)內(nèi)存小的用戶,無(wú)須占用多大內(nèi)存,用完即走。
本小程序投票主要功能需求有:(1)注冊(cè)登陸功能;(2)創(chuàng)建投票功能;(3)發(fā)布投票功能;(4)分享投票功能;(5)投票自定義單選多選、投票時(shí)間制定。
系統(tǒng)流程圖如圖1所示,本微信投票小程序是實(shí)現(xiàn)投票功能,注冊(cè)登陸即可使用。首頁(yè)主要是用于展現(xiàn)投票歷史記錄,包含參與的投票,分享的投票。創(chuàng)建投票界面是用來(lái)創(chuàng)建投票;我的界面即個(gè)人中心,包含了“我的發(fā)布、我的參與”這兩個(gè)按鈕。
圖1 系統(tǒng)流程圖
小程序經(jīng)過(guò)調(diào)試才能知道其功能是否達(dá)到預(yù)期。要實(shí)時(shí)查看修改效果也比較麻煩。比較常規(guī)的做法是先把代碼上傳到小程序后臺(tái)進(jìn)行運(yùn)行,但是此方法耗時(shí),也不便于新手進(jìn)行操作。最簡(jiǎn)單的做法是在自己的電腦上搭建一個(gè)測(cè)試環(huán)境,采用Phpstudy實(shí)現(xiàn)本地虛擬主機(jī)環(huán)境的搭建。后臺(tái)采用Php編寫(xiě),數(shù)據(jù)庫(kù)用的是可視化軟件Navicator。
小程序底部菜單有“首頁(yè)”、“發(fā)布投票”、“我的”這3個(gè)按鈕,圖2所示為底部Tab按鈕所示,即可以點(diǎn)擊Tab按鈕“首頁(yè)”、“發(fā)布投票”、“我的”切換頁(yè)面。
圖2 底部Tab按鈕
圖3 所示為首頁(yè)index.wxml主要代碼。
圖3 首頁(yè)主要代碼
本微信投票小程序考慮到數(shù)據(jù)的安全性,因此加入了用戶注冊(cè)登陸功能來(lái)加強(qiáng)數(shù)據(jù)的安全性,每個(gè)用戶有專屬的賬號(hào)id和密碼pwd。圖4所示為注冊(cè)登陸展示,新用戶可以注冊(cè)并登陸。
圖4 注冊(cè)登陸展示
登陸login.wxml主要代碼如圖5所示。
圖5 登陸主要代碼
本投票系統(tǒng)中,創(chuàng)建并發(fā)布投票是核心的模塊。登陸的用戶可以點(diǎn)擊創(chuàng)建并發(fā)布投票。圖6所示為創(chuàng)建投票主界面,投票輸入框由小程序提供的組件input實(shí)現(xiàn)輸入框功能。
點(diǎn)擊圖6中按鈕“發(fā)布投票”即可發(fā)布,顯示如圖7所示的發(fā)布投票,彈出信息提示:投票增加成功,即表明發(fā)布投票成功。
圖6 創(chuàng)建投票
圖7 發(fā)布投票
創(chuàng)建投票模塊中可以進(jìn)行單選項(xiàng)多選項(xiàng)的設(shè)置,圖8所示為時(shí)間選擇器,可以設(shè)置投票開(kāi)始時(shí)間和截止時(shí)間。
圖8 時(shí)間選擇器
用戶點(diǎn)擊相應(yīng)的投票,包括參與自己創(chuàng)建的投票、其他用戶分享的投票等都可參與投票。圖9所示為參與投票view.js主要代碼。
圖9 參與投票view.js主要代碼
一個(gè)投票系統(tǒng),如果缺少分享功能,就不能讓參與投票的人加入,就失去了投票的意義,因此在此系統(tǒng)加入分享模塊。圖10所示為分享模塊,投票界面有分享按鈕,更加方便。
通過(guò)點(diǎn)擊分享,即可分享到對(duì)應(yīng)的微信群或者好友,可以很方便地讓需要參與投票的人參與投票。
圖10 分享模塊
投票數(shù)據(jù)最后的匯總也是這個(gè)小程序的一大亮點(diǎn),可以讓用戶直觀地看到投票的統(tǒng)計(jì)結(jié)果。圖11所示為投票數(shù)據(jù)統(tǒng)計(jì)結(jié)果,展示了相應(yīng)的投票的票數(shù),即可以直觀看到統(tǒng)計(jì)結(jié)果。
圖11 投票數(shù)據(jù)統(tǒng)計(jì)
使用該投票的每一個(gè)用戶,都擁有獨(dú)一的賬號(hào)id和密碼pwd,提高了數(shù)據(jù)的安全性,也方便用戶進(jìn)行管理。用戶在進(jìn)行登陸賬號(hào)密碼的時(shí)候,驗(yàn)證本地用戶是否登錄,獲取本地存lskuserid,lsktoken,得到lsktoken登錄憑證,得到lskuserid,登錄會(huì)員id號(hào),獲取到了之后,從服務(wù)器拉取用戶信息,如果賬號(hào)和密碼不匹配會(huì)提示錯(cuò)誤,圖12所示為用戶名或者密碼錯(cuò)誤提示。
圖12 用戶名或者密碼錯(cuò)誤提示
創(chuàng)建好了投票,現(xiàn)在還只是本地上保存了,需要采用數(shù)據(jù)庫(kù)來(lái)存放,采用可視化軟件Navicat,圖13所示為投票數(shù)據(jù)庫(kù)邏輯圖。
圖13 投票數(shù)據(jù)庫(kù)邏輯圖
其中admin表為管理用戶表,admin共有3個(gè)字段,每一個(gè)賬號(hào)有一個(gè)專屬id號(hào),密碼即為password,ctime為用戶創(chuàng)建時(shí)間。User表為普通用戶表,共有5個(gè)字段,一個(gè)賬號(hào)對(duì)應(yīng)一個(gè)專屬的id號(hào),username為用戶名,pwd為用戶的密碼,lsktoken為登陸憑證,作為與后臺(tái)識(shí)別的專屬字符串,ctime為用戶創(chuàng)建的時(shí)間。vote表為投票表,共有6個(gè)字段,此處的id為此表里面的id,可以理解為對(duì)應(yīng)的序號(hào),title為用戶創(chuàng)建投票的名稱,userid可以確定是哪個(gè)用戶即user創(chuàng)建的投票,ctime為創(chuàng)建的時(shí)間,stime為投票結(jié)束的時(shí)間,xxlist為投票對(duì)應(yīng)的選項(xiàng)。
微信小程序就是輕型App,它是基于微信系統(tǒng)上的App[7]。在服務(wù)上,小程序聚焦用戶,細(xì)分服務(wù),深度挖掘用戶需求,以更符合受眾偏好的形式開(kāi)展信息服務(wù)[8]。本文設(shè)計(jì)的基于微信小程序投票系統(tǒng),實(shí)現(xiàn)了注冊(cè)登陸、創(chuàng)建發(fā)布投票、參與并分享投票和查看投票結(jié)果,用戶可以通過(guò)分享功能分享到群聊和其他參與投票的用戶,也可以用此投票創(chuàng)建一個(gè)答題選擇題庫(kù),總之,此微信投票小程序系統(tǒng)可以極大地提高投票的效率,更加方便。