中南大學(xué)課設(shè)--微信小程序充電樁

1、中南大學(xué)程序設(shè)計(jì)根底實(shí)踐報(bào)告題目智能充電樁治理平臺(tái)學(xué)生姓名學(xué)院信息科學(xué)與工程學(xué)院專業(yè)班級(jí)學(xué) 號(hào)完成時(shí)間1.課程設(shè)計(jì)內(nèi)容2課程設(shè)計(jì)目的3 .背景知識(shí)4 .工具/準(zhǔn)備工作5 .設(shè)計(jì)步驟、方法等5.1. 步驟1 :用戶界面設(shè)計(jì)步驟1: UI設(shè)計(jì)贅述5.1.2 步驟2:專業(yè)設(shè)計(jì)界面流程 .45.1.3 步驟3:界面設(shè)計(jì)整體介紹 .55.1.4 步驟4:設(shè)計(jì)思想總結(jié) .55.1.5 步驟5:界面展示 .55.2. 步驟2 :微信小程序5.2.2 步驟1:前端開發(fā) 65.2.3 步驟2:后端開發(fā).653. 步驟3:模擬器搭建6 .設(shè)計(jì)結(jié)果及分析7 . 感想 .48 .參考文獻(xiàn)程序設(shè)計(jì)根底實(shí)踐報(bào)告1 .課程

2、設(shè)計(jì)內(nèi)容系統(tǒng)包括如下幾個(gè)局部：智能化云平臺(tái)、用戶 端程序、現(xiàn)場(chǎng)充電樁模擬 器.智能化云平臺(tái)具備如下功能：1、以地圖方式對(duì)系統(tǒng)內(nèi)注冊(cè)的所有充電樁進(jìn) 行實(shí)時(shí)展示,可顯示每個(gè)充電樁的實(shí)時(shí)狀態(tài)；2、對(duì)充電樁的運(yùn)行數(shù)據(jù)進(jìn)行記錄； 3、對(duì)運(yùn)行數(shù)據(jù)進(jìn)行可視化展示；4、對(duì)充電樁信息和用戶信息進(jìn)行數(shù)據(jù)維護(hù)；5、與現(xiàn)場(chǎng)充電樁模擬器進(jìn)行實(shí)時(shí)數(shù)據(jù)通信以完成充電任務(wù)；6、對(duì)充電支付進(jìn)行管理.用戶 端程序?qū)崿F(xiàn)用戶注冊(cè),錢包治理,掃碼充電功能,還可以查找最近 的充電樁.現(xiàn)場(chǎng)充電樁模擬器實(shí)現(xiàn)對(duì)充電樁各功能的模擬,包括跟云平臺(tái)的數(shù)據(jù)通信以 及與 端程序的接口等.2 .課程設(shè)計(jì)目的建立一套智能化的共享充電樁治理平臺(tái),以實(shí)現(xiàn)充電樁

3、的智能化運(yùn)營(yíng).實(shí)驗(yàn)?zāi)康? .了解小程序的構(gòu)架和掌握程序代碼的編寫2 .了解學(xué)習(xí)CSS,HTML,PH瞅據(jù)庫等代碼的運(yùn)行方式3 .掌握后臺(tái)治理的代碼運(yùn)行和與前端的數(shù)據(jù)交互4 .掌握用戶交互的界面設(shè)計(jì),把握微信小程序的整體功能5 .前端與機(jī)器之間的數(shù)據(jù)收發(fā)和統(tǒng)計(jì)6 .學(xué)會(huì)簡(jiǎn)單的微信小程序的開發(fā)和運(yùn)營(yíng)前臺(tái)采用微信一的框架,后臺(tái)可以任意挑選,PHPnode.js , Java都是主流,MVCt世種不錯(cuò)的選擇.個(gè)人選擇的net MVCI1架,在并發(fā)處理,模塊化方面都有很 好表現(xiàn).效勞器可以自己搭建,也可以直接用騰訊云3 .背景知識(shí)隨著新能源汽車的普及,充電樁成為一項(xiàng)非常重要的根底設(shè)施, 此題目的目 的是

4、建立一套智能化的充電樁治理平臺(tái),以實(shí)現(xiàn)充電樁的智能化運(yùn)營(yíng).4 .工具/準(zhǔn)備工作微信小程序開發(fā)平臺(tái)、云效勞器購置；5 .設(shè)計(jì)步驟、方法等5.1. 步驟1:用戶界面設(shè)計(jì)本系統(tǒng)堅(jiān)持圖形用戶界面設(shè)計(jì)原那么,界面直觀、對(duì)用戶透明：用戶接觸軟件 后對(duì)界面上對(duì)應(yīng)的功能一目了然、不需要多少培訓(xùn)就可以方便使用本應(yīng)用系統(tǒng). 界面設(shè)計(jì)員應(yīng)該明白軟件中用戶是所有處理的核心,不應(yīng)該有應(yīng)用程序來決定處理過程,所以用戶界面應(yīng)當(dāng)由用戶來限制應(yīng)用如何工作、如何響應(yīng),而不是由開發(fā)者按自己的意愿把操作流程強(qiáng)加給用戶.?界面設(shè)計(jì)必須經(jīng)過確認(rèn)才能完成.在界面設(shè)計(jì)中應(yīng)該保持界面的一致性.一致性既包括使用標(biāo)準(zhǔn)的控件,也指使 用相同的信息表

5、現(xiàn)方法,如在字體、標(biāo)簽風(fēng)格、顏色、術(shù)語、顯示錯(cuò)誤信息等方 面保證一致.5.1.1. 步驟1: UI設(shè)計(jì)贅述UI即UseEnterface用戶界面的簡(jiǎn)稱.UI設(shè)計(jì)那么是指對(duì)軟件的人機(jī)交互、 操作邏輯、界面美觀的整體設(shè)計(jì).好的UI設(shè)計(jì)不僅是讓軟件變得有個(gè)性有品味, 還要讓軟件的操作變得舒適、簡(jiǎn)單、自由,充分表達(dá)軟件的定位和特點(diǎn).UI設(shè)計(jì)的職能,大體分為3個(gè)方面.1 .圖形設(shè)計(jì).對(duì)軟件產(chǎn)品的外形進(jìn)行“視覺設(shè)計(jì).2 .交互設(shè)計(jì),設(shè)計(jì)軟件的操作流程、樹狀結(jié)構(gòu)、操作標(biāo)準(zhǔn)等.3 .用戶測(cè)試/研究,測(cè)驗(yàn)交互設(shè)計(jì)的合理性,以及圖形設(shè)計(jì)的美觀性.好的UI設(shè)計(jì)根底界面要做到能夠吸引人,給人耳目一新的感覺這就要求工作

6、 者不僅要具備廣告創(chuàng)意和美工藝術(shù),還要了解心理學(xué),抓住用戶的心理.UI設(shè)計(jì)里面最重要的就是交互設(shè)計(jì),負(fù)責(zé)人類與機(jī)器之間的交流,這一操作要簡(jiǎn)單, 便捷,直接有效.通過這一操作從而到達(dá)用戶的使用目的, 這也是交互設(shè)計(jì)的目 的5.1.2. 步驟2:專業(yè)頁面設(shè)計(jì)流程1 .熟悉產(chǎn)品所要解決的問題2 .收集能解決這一問題的用戶相關(guān)的信息3 .提供這一問題的解決方案4 .驗(yàn)證所提出的解決方案4.1. 用戶測(cè)試4.2. AB測(cè)試4.3. 五秒測(cè)試4.4. 遠(yuǎn)程測(cè)試4.5. 圖測(cè)試5 .改善解決方案5.1.3. 步驟3:界面設(shè)計(jì)整體介紹用戶界面分為三個(gè)板塊,分別是掃碼充電局部,在地圖上查找局部以及用戶 個(gè)人中央

7、局部.掃碼充電核心就是通過掃描二維碼,識(shí)別出用戶將要使用的充電樁,并將充電樁情況回饋用戶,如果可以使用那么跳轉(zhuǎn)到支付頁面.在地圖上查找局部核心就是通過定位用戶所在的位置,向用戶反響周邊充電 樁所在的位置以及這些充電樁的使用情況.用戶個(gè)人中央局部就是實(shí)現(xiàn)用戶登陸、查看錢包、充值等功能.5.2. 步驟2:小程序開發(fā)局部小程序開發(fā)局部是本次設(shè)計(jì)的核心局部,包括前端搭建和后臺(tái)限制.5.2.1. 步驟2.1:前端搭建在本次前臺(tái)搭建中,由于微信小程序官方推出的大量專用代碼以及相應(yīng)的使 用說明,所以完成的相對(duì)順利.首先是登陸,我們直接采用了微信賬號(hào)登陸的方法,微信的官方文檔詳細(xì)的 介紹了登錄的流程,從流程中

8、我們可以提煉出關(guān)鍵的流程點(diǎn)：1 .小程序端調(diào)用wx.login()?接口,獲取登錄需要用到的code2 .小程序端通過wx.request(),與開發(fā)者的效勞器進(jìn)行通信3 .開發(fā)者獲取到code?W,與微信的效勞器進(jìn)行通信,獲取openid體口session_key4 .利用隨機(jī)值來作為鍵、利用?openid?f口session_key祚為值,保存用戶的登錄狀 態(tài)信息5 .效勞器返回隨機(jī)值到小程序的客戶端,以后小程序的請(qǐng)求附帶返回的隨機(jī)值來 保證用戶的合法性其次是在小程序中引入地圖定位,微信小程序提供了幾個(gè)方式,引入地圖, 如果想解析地址的話,微信小程序沒有提供地址解析,所以必須引入地圖插件,

9、 看了高德、百度和騰訊的地圖,發(fā)現(xiàn)騰訊地圖對(duì)小程序,支持的功能多,最方便.再次是掃碼充電,首先是在小程序中插入掃描二維碼功能,這一步在微信小 程序的官方文檔中有詳細(xì)教程,然后跳轉(zhuǎn)頁面到支付界面.5.2.2. 步驟2.2:后端搭建由于充電樁發(fā)布在不同的地點(diǎn),我們對(duì)每個(gè)充電樁的位置和狀態(tài)進(jìn)行了展 示.進(jìn)入小程序頁面后,點(diǎn)擊查找附近就會(huì)出現(xiàn)的地圖并顯示當(dāng)前用戶所在的位 置,以及附近充電樁的位置和使用情況.掃碼使用：用戶可直接在首頁點(diǎn)擊掃碼,然后掃描充電樁上顯示的二維碼進(jìn) 行使用,如當(dāng)前干衣機(jī)不是可用狀態(tài),那么顯示干衣機(jī)不可使用的信息；假設(shè)可用, 那么直接進(jìn)入選擇時(shí)長(zhǎng)并支付的界面.充電樁狀態(tài)顯示：充電

10、樁有三種狀態(tài)：空閑、運(yùn)行中、故障,分別用綠色、 紅色、橙色的圖標(biāo)進(jìn)行展示.支付：由于微信對(duì)支付的限制,作為個(gè)人小程序,我們并不能真正的完成支 付功能,只能對(duì)支付進(jìn)行一個(gè)簡(jiǎn)單的模擬. 每個(gè)用戶第一次注冊(cè)該小程序時(shí), 我 們?yōu)槠湓跀?shù)據(jù)庫中寫入一條數(shù)據(jù)以保存該用戶的信息及錢包余額,當(dāng)然,這里的余額只是一個(gè)虛擬的數(shù)字,通過用戶的充值和支付操作進(jìn)行增減.用戶必須在小 程序的錢包中有足夠余額時(shí)才能使用干衣機(jī),否那么系統(tǒng)將顯示余額缺乏.后臺(tái)治理云平臺(tái)系統(tǒng)：進(jìn)入治理系統(tǒng)后,可在相應(yīng)頁面查看充電樁運(yùn)行相關(guān)數(shù)據(jù),如狀態(tài)、運(yùn)行總 時(shí)長(zhǎng)、運(yùn)行的時(shí)間段等.還可查看并治理相應(yīng)狀態(tài)的訂單數(shù)據(jù),已完成的訂單、進(jìn)行中的訂單、以

11、及 故障訂單.同時(shí)可實(shí)時(shí)監(jiān)測(cè)系統(tǒng)的當(dāng)前收入.由于本次程序設(shè)計(jì)由團(tuán)隊(duì)完成,這局部?jī)?nèi)容由另一位程序員設(shè)計(jì)完成.5.3. 步驟3:模擬器搭建模擬器的搭建主要就是測(cè)試程序的可靠性.我們用模擬器來代表充電樁,每 臺(tái)模擬器上都有一個(gè)二維碼,用于用戶通過掃二維碼進(jìn)入程序.模擬器充電樁運(yùn)行與狀態(tài),從小程序獲取用戶信息、時(shí)間以及余額,將其寫 入數(shù)據(jù)庫6 .設(shè)計(jì)結(jié)果及分析7 .12 圖標(biāo)展示7 .感想這次程序設(shè)計(jì)我選擇了微信小程序,一方面的原因是微信小程序作為騰訊推 出的一種程序類型,它的開發(fā)與設(shè)計(jì)有一點(diǎn)的定式,開發(fā)簡(jiǎn)單便捷,后期的維護(hù)也方便一點(diǎn),而且在安卓與iOS平臺(tái)都可以使用；另一方面,我認(rèn)為智能充電樁 這樣

12、的程序更適合用微信小程序來開發(fā)與設(shè)計(jì).微信小程序作為輕型應(yīng)用很有可能會(huì)是未來移動(dòng)互聯(lián)網(wǎng)應(yīng)用的主要形式,它的特點(diǎn)是小而快,但我認(rèn)為它不會(huì)替代所有的 App,由于微信小程序目的主要還 是解決小應(yīng)用的問題,重點(diǎn)在于靈活、快捷、用完即走.微信小程序不能完全取 代APP我認(rèn)為可能的原因有兩個(gè)：一是入口不容易找到,浪費(fèi)用戶時(shí)間；二是 一局部用戶在嘗鮮之后就回歸到了原生 App,由于原生App的體驗(yàn)可能更加豐富. 但是當(dāng)小程序解決了這些問題,各種AP可艮有可能會(huì)被淘汰.微信小程序未來的 應(yīng)用空間還是很大的,它的價(jià)值也還需要時(shí)間的檢驗(yàn).就像是這次我完成的充電樁小程序, 屬于一個(gè)剛需但是低頻的程序,人們一 天中總會(huì)有使用的時(shí)候,但是很明顯不會(huì)有很多的使用次數(shù), 有些用戶可能不會(huì) 去選擇下載APP像是這種程序,選擇微信小程序是一條很好的出路,需要使用 時(shí)翻開小程序,用完了就可以關(guān)掉,不會(huì)一直占 內(nèi)存,不想用了還可以刪掉. 這用完即走的特點(diǎn)正好滿足用戶使用低頻效勞類 APP寸的需求,比方要買車票時(shí) 翻開小程序,買完票就關(guān)閉它,等要用時(shí)再翻開,預(yù)防AP屋直在 里占內(nèi)存 卻又很少用.另一方面用戶在線下消費(fèi)的需求正是“快捷、“靈活、“用完即走. 比方在餐館點(diǎn)菜,只需掃描二維碼,