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