基于微信小程序投票系統(tǒng)設(shè)計

曾國強(qiáng)，王楚虹，黃 江，師文慶

（廣東海洋大學(xué)電子與信息工程學(xué)院，廣東湛江 524088）

0 引言

投票是公民表達(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ā)成本。

1 微信投票小程序需求方法分析

與微信公眾號相比，小程序作為獨(dú)立化的應(yīng)用程序，能夠以更加多樣化的形式開展服務(wù)[6]。微信投票小程序需要實(shí)現(xiàn)微信用戶投票、發(fā)布投票、分享投票等功能，本系統(tǒng)也是一款免費(fèi)的工具類小程序，可以更加方便微信用戶使用，無須安裝下載，特別是對于手機(jī)內(nèi)存小的用戶，無須占用多大內(nèi)存，用完即走。

1.1 總體需求分析

本小程序投票主要功能需求有：（1）注冊登陸功能；（2）創(chuàng)建投票功能；（3）發(fā)布投票功能；（4）分享投票功能；（5）投票自定義單選多選、投票時間制定。

1.2 總體流程圖

系統(tǒng)流程圖如圖1所示，本微信投票小程序是實(shí)現(xiàn)投票功能，注冊登陸即可使用。首頁主要是用于展現(xiàn)投票歷史記錄，包含參與的投票，分享的投票。創(chuàng)建投票界面是用來創(chuàng)建投票；我的界面即個人中心，包含了“我的發(fā)布、我的參與”這兩個按鈕。

圖1 系統(tǒng)流程圖

2 微信投票小程序功能結(jié)果實(shí)現(xiàn)

2.1 開發(fā)相關(guān)配置

小程序經(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。

2.2 小程序底部Tab菜單

小程序底部菜單有“首頁”、“發(fā)布投票”、“我的”這3個按鈕，圖2所示為底部Tab按鈕所示，即可以點(diǎn)擊Tab按鈕“首頁”、“發(fā)布投票”、“我的”切換頁面。

圖2 底部Tab按鈕

圖3 所示為首頁index.wxml主要代碼。

圖3 首頁主要代碼

2.3 用戶注冊、登錄模塊

本微信投票小程序考慮到數(shù)據(jù)的安全性，因此加入了用戶注冊登陸功能來加強(qiáng)數(shù)據(jù)的安全性，每個用戶有專屬的賬號id和密碼pwd。圖4所示為注冊登陸展示，新用戶可以注冊并登陸。

圖4 注冊登陸展示

登陸login.wxml主要代碼如圖5所示。

圖5 登陸主要代碼

2.4 創(chuàng)建發(fā)布投票功能模塊

本投票系統(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 時間選擇器

2.5 參與投票功能模塊

用戶點(diǎn)擊相應(yīng)的投票，包括參與自己創(chuàng)建的投票、其他用戶分享的投票等都可參與投票。圖9所示為參與投票view.js主要代碼。

圖9 參與投票view.js主要代碼

2.6 分享投票模塊

一個投票系統(tǒng)，如果缺少分享功能，就不能讓參與投票的人加入，就失去了投票的意義，因此在此系統(tǒng)加入分享模塊。圖10所示為分享模塊，投票界面有分享按鈕，更加方便。

通過點(diǎn)擊分享，即可分享到對應(yīng)的微信群或者好友，可以很方便地讓需要參與投票的人參與投票。

圖10 分享模塊

2.7 投票結(jié)果統(tǒng)計模塊

投票數(shù)據(jù)最后的匯總也是這個小程序的一大亮點(diǎn)，可以讓用戶直觀地看到投票的統(tǒng)計結(jié)果。圖11所示為投票數(shù)據(jù)統(tǒng)計結(jié)果，展示了相應(yīng)的投票的票數(shù)，即可以直觀看到統(tǒng)計結(jié)果。

圖11 投票數(shù)據(jù)統(tǒng)計

2.8 用戶登陸維護(hù)模塊

使用該投票的每一個用戶，都擁有獨(dú)一的賬號id和密碼pwd，提高了數(shù)據(jù)的安全性，也方便用戶進(jìn)行管理。用戶在進(jìn)行登陸賬號密碼的時候，驗(yàn)證本地用戶是否登錄，獲取本地存lskuserid，lsktoken，得到lsktoken登錄憑證，得到lskuserid，登錄會員id號，獲取到了之后，從服務(wù)器拉取用戶信息，如果賬號和密碼不匹配會提示錯誤，圖12所示為用戶名或者密碼錯誤提示。

圖12 用戶名或者密碼錯誤提示

2.9 數(shù)據(jù)庫模塊

創(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)。

3 結(jié)束語

微信小程序就是輕型App，它是基于微信系統(tǒng)上的App[7]。在服務(wù)上，小程序聚焦用戶，細(xì)分服務(wù)，深度挖掘用戶需求，以更符合受眾偏好的形式開展信息服務(wù)[8]。本文設(shè)計的基于微信小程序投票系統(tǒng)，實(shí)現(xiàn)了注冊登陸、創(chuàng)建發(fā)布投票、參與并分享投票和查看投票結(jié)果，用戶可以通過分享功能分享到群聊和其他參與投票的用戶，也可以用此投票創(chuàng)建一個答題選擇題庫，總之，此微信投票小程序系統(tǒng)可以極大地提高投票的效率，更加方便。