微信平臺(tái)的共享充電小程序設(shè)計(jì)開發(fā)

前言：想要寫出一篇引人入勝的文章？我們特意為您整理了微信平臺(tái)的共享充電小程序設(shè)計(jì)開發(fā)范文，希望能給你帶來靈感和參考，敬請閱讀。

摘要:當(dāng)前信息技術(shù)高速發(fā)展，電動(dòng)車、手機(jī)等移動(dòng)產(chǎn)品的共享充電問題一直困擾著人們。傳統(tǒng)的充電方式已不能滿足人們的便捷需求。以充電原生小程序?yàn)閼?yīng)用背景，采用微信平臺(tái)API進(jìn)行開發(fā)，并基于HTML5技術(shù)構(gòu)建響應(yīng)式網(wǎng)站。在布局頁面時(shí)，用HTML進(jìn)行元素定義和基礎(chǔ)布局，利用CSS3對HTML元素布局進(jìn)行定位渲染，保證前端界面美觀大方。利用JavaScript及Vue框架實(shí)現(xiàn)前后臺(tái)功能交互，以便使用流程人性化和簡易化。開發(fā)過程充分考慮界面的美觀性、使用的便捷性、存儲(chǔ)空間的性能等問題，實(shí)現(xiàn)基于二維碼設(shè)備識(shí)別技術(shù)的交互式共享充電小程序。

關(guān)鍵詞:充電小程序;前端設(shè)計(jì);微信平臺(tái);交互設(shè)計(jì)

隨著網(wǎng)絡(luò)與信息技術(shù)的不斷演進(jìn)，5G技術(shù)已經(jīng)正式商用，新零售時(shí)代已經(jīng)到來，共享產(chǎn)品種類層出不窮，共享電動(dòng)汽車和移動(dòng)電子產(chǎn)品已成為人們出行時(shí)必不可少的設(shè)備。但即使移動(dòng)設(shè)備電池容量不斷增大，出門在外時(shí)的充電問題依然困擾著用戶。目前，一般有兩種充電服務(wù)方式:一種是隨身攜帶充電寶等充電工具，但卻有攜帶不方便、存在用電安全隱患等弊端，且不太適用于大型電動(dòng)設(shè)備;另一種是在充電樁上充電，其生產(chǎn)成本和技術(shù)要求較低，但投幣式、刷卡式等充電樁需要用戶在原地充電，難以滿足人們的便捷需求。如今，微信小程序、HTML5等技術(shù)逐漸興起，網(wǎng)站逐漸脫離了傳統(tǒng)的枯燥頁面風(fēng)格，對開發(fā)者來說更容易維護(hù)和管理，可以實(shí)現(xiàn)跨平臺(tái)開發(fā)。

一、主要用到的前端技術(shù)

本文所述的共享充電小程序，采用基于HTML5、CSS3等前端技術(shù)，保證了前端界面的美觀和操作便捷。這一小程序利用微信平臺(tái)的共享優(yōu)勢，采用微信平臺(tái)API，讓用戶快捷實(shí)現(xiàn)移動(dòng)充電支付功能，使用形式多樣，消費(fèi)者可以直接打開微信小程序掃描二維碼使用。商家可以合理運(yùn)用小程序的二維碼宣傳海報(bào)，讓用戶自發(fā)掃描關(guān)注本微信小程序，宣傳成本和推廣投入較低。已有文獻(xiàn)開發(fā)出快速定位找到充電樁的微信小程序［1］。

(一)HTML5HTML5網(wǎng)頁前端技術(shù)展現(xiàn)的外觀形式更加注重易讀性以及與藝術(shù)融合達(dá)成的美觀性。通過結(jié)合CSS3，可便捷地完成設(shè)計(jì)任務(wù)［2］。一般是由HTML、CSS、JavaScript等作為基本構(gòu)建項(xiàng)目語言，并可同時(shí)采用WebApplicationAPI、DeviceAPI等技術(shù)［3］。基于CGI靜態(tài)的HTML頁面可以通過JavaScript提供動(dòng)態(tài)實(shí)時(shí)信息，對客戶的操作進(jìn)行反饋。隨著HTML5的出現(xiàn)，JavaScript的功能已經(jīng)擴(kuò)展到編寫后臺(tái)開發(fā)，可避免HTML語言自身的弊端［4］。本文使用JavaScript配合HTML5來實(shí)現(xiàn)跨平臺(tái)Web的應(yīng)用開發(fā)。充電小程序的主界面主要由頂部導(dǎo)航欄、折疊面板和內(nèi)容主體區(qū)域完成，底部設(shè)置功能按鈕。主要使用HTML+CSS對頁面進(jìn)行美化，頁面布局采用 Flex布局。這種布局方式會(huì)讓頁面變成彈性布局，不會(huì)因?yàn)槭謾C(jī)尺寸變化而改變樣式。折疊面板使用vant組件庫中的collapse折疊面板，主體內(nèi)容和底部功能按鈕采用CSS中的定位功能，可將功能按鈕區(qū)域定位在頁面底部。

(二)VueVue是構(gòu)建用戶界面的框架，是一個(gè)輕量級的MVVM(ModelViewViewModel)，也就是數(shù)據(jù)的雙向綁定，是基于數(shù)據(jù)驅(qū)動(dòng)和組件化的前端開發(fā)，其采用自底向上增量式開發(fā)模式，使用更加靈活、開放，架構(gòu)也更加簡單，便于與庫文件及已有項(xiàng)目進(jìn)行整合［5］，是一種通過簡單的API就能實(shí)現(xiàn)響應(yīng)式的數(shù)據(jù)綁定和組合的視圖組件。Vue是一個(gè)構(gòu)建數(shù)據(jù)的視圖集合，其只關(guān)注視圖層，存儲(chǔ)空間只有幾十KB。Vue．js通過簡潔的API來提供高效的數(shù)據(jù)綁定和靈活的組件系統(tǒng)。它由我國自主開發(fā)，使用中文技術(shù)文檔，易于國人理解和學(xué)習(xí)。Vue．js通過組件，把一個(gè)單頁應(yīng)用中的各種模塊拆分為單獨(dú)的組件，只需先在父級應(yīng)用中寫好各種組件標(biāo)簽(占坑)，并且在組件標(biāo)簽中寫好要傳入組件的參數(shù)(就像給函數(shù)傳入?yún)?shù)一樣，這個(gè)參數(shù)叫做組件的屬性)，然后再分別寫好各種組件的實(shí)現(xiàn)(填坑)，應(yīng)用開發(fā)就可以完成。Vue使數(shù)據(jù)的更改更為簡單，無需進(jìn)行邏輯代碼的修改，只需要操作數(shù)據(jù)就可完成相關(guān)操作。

(三)CSS3CSS即層疊樣式表。Web開發(fā)中采用CSS技術(shù)，可有效地控制頁面的布局、字體、顏色、背景和其他效果。CSS3帶有模塊化的特點(diǎn)，增加了很多新特性和選擇器，編寫樣式更加方便［6］。當(dāng)前，移動(dòng)端的產(chǎn)品種類越來越多，傳統(tǒng)方式在構(gòu)造移動(dòng)端的樣式時(shí)很困難，不同設(shè)備的屏幕寬度、高度不一致，所以要去適配不同屏幕寬度，開發(fā)過程比較繁瑣。而CSS3引入全新的布局方式，即flex布局，它很好地解決了這個(gè)問題，其功能主要是當(dāng)屏幕和瀏覽器窗口大小發(fā)生變化時(shí)，可以靈活調(diào)整布局;可以指定伸縮項(xiàng)目沿著主軸或側(cè)軸，按比例分配空余空間，從而調(diào)整伸縮項(xiàng)目的大小，將伸縮容器額外空間分配到項(xiàng)目之前、之后或之間;可以指定將垂直于元素布局軸的額外空間分布到該元素周圍，控制元素在頁面上的布局方向，按照不同標(biāo)準(zhǔn)流所指定的排序方式，對屏幕上的元素重新排序。此外，還有其他很多靈活實(shí)用的屬性。

二、充電小程序布局與設(shè)計(jì)

(一)技術(shù)架構(gòu)充電小程序的首頁由四個(gè)文件組成，分別為index．wxss、index．wxml、index．json和index．js。其中，index．wxss主要是寫CSS樣式的，index．wxml主要是寫布局結(jié)構(gòu)的，index．json主要是頁面的一些配置和引入組件的，index．js主要是處理業(yè)務(wù)邏輯的。本文借鑒Vue的設(shè)計(jì)思想，也就是將可復(fù)用的結(jié)構(gòu)封裝成組件，通過在需要的頁面注冊，該組件即可使用，以簡化頁面的代碼結(jié)構(gòu)。App．js是項(xiàng)目的入口文件，App全局函數(shù)掌握著程序生命周期。App．json是小程序的全局配置文件，頁面的底部導(dǎo)航欄和頂部樣式，可以在這里進(jìn)行配置，每個(gè)頁面已經(jīng)配置的樣式會(huì)覆蓋全局的樣式。App．css是全局的樣式配置文件，用來配置全局的樣式，同App．json一樣，頁面的樣式會(huì)覆蓋全局的樣式。Service文件夾包含開發(fā)者封裝的JavaScript文件，可將微信的網(wǎng)絡(luò)請求進(jìn)行封裝，以簡化代碼。

(二)首頁設(shè)計(jì)及使用流程用戶掃描充電樁上面的二維碼，即可進(jìn)入小程序。首次進(jìn)入小程序需要用戶授權(quán)。由于微信平臺(tái)不允許用戶在首頁被授權(quán)，所以當(dāng)用戶選擇充電端口時(shí)，會(huì)跳轉(zhuǎn)到授權(quán)頁面，用戶授權(quán)以后才可以正常使用充電小程序。授權(quán)之后，用戶選擇充電端口和功率大小，付款之后即可開始充電，并開始計(jì)費(fèi)，如充電時(shí)間有剩余，根據(jù)剩余時(shí)間計(jì)算，返回至余額，下次繼續(xù)使用。充電小程序首頁利用移動(dòng)端的flex布局和定位完成對頁面的布局，使用vant－weapp組件開發(fā)各個(gè)模塊。業(yè)務(wù)邏輯主要集中在首頁，比如數(shù)據(jù)獲取和支付邏輯。每個(gè)充電樁設(shè)備都映射為不同的設(shè)備編號，這些設(shè)備編號數(shù)據(jù)將保存到二維碼，所以設(shè)備在小程序當(dāng)前頁面需要展示設(shè)備編號。在獲取數(shù)據(jù)模塊，主要采用Promise來對小程序官方的請求進(jìn)行封裝。然后，將獲取的數(shù)據(jù)的JavaScript文件封裝成可復(fù)用的JavaScript文件，以提高開發(fā)效率。充電小程序的首頁界面如下頁圖1左側(cè)所示。用戶首次掃描二維碼進(jìn)入小程序時(shí)，會(huì)被要求進(jìn)行授權(quán)登錄，否則無法使用。用戶選擇充電端口，然后選擇對應(yīng)的充電功率，點(diǎn)擊立即支付，即可下單開始充電。圖中的1分鐘代表每充電1分鐘將花費(fèi)0．01元。充電時(shí)間越長，代表功率越低，價(jià)格也越便宜。考慮到每個(gè)設(shè)備的編號不同，當(dāng)用戶退出充電小程序再次使用時(shí)，會(huì)跳到掃碼界面。該界面調(diào)用了微信平臺(tái)的掃碼API，可識(shí)別二維碼中的參數(shù)，讀取參數(shù)中的設(shè)備編號，并跳轉(zhuǎn)到首頁，將設(shè)備編號顯示到導(dǎo)航欄，便于用戶再次使用。當(dāng)用戶授權(quán)登錄后，頂部導(dǎo)航欄會(huì)顯示當(dāng)前設(shè)備編號，每個(gè)二維碼都對應(yīng)唯一的設(shè)備編號。余額欄指的是當(dāng)用戶掃碼充電后，如果充電時(shí)間有剩余，則將余額直接退到用戶的賬戶，下次登錄時(shí)，用戶可以直接使用。

(三)授權(quán)頁面小程序授權(quán)頁面主要是用來獲取用戶信息的，比如頭像、微信昵稱、位置等，主要利用微信官方平臺(tái)提供的API完成用戶信息的獲取。當(dāng)用戶第一次掃碼進(jìn)入充電小程序，點(diǎn)擊端口按鈕時(shí)，會(huì)彈出授權(quán)登錄頁面，授權(quán)以后便不再彈出該界面，除非用戶刪除該小程序。

(四)掃碼頁面當(dāng)用戶需要再次使用的時(shí)候，下拉微信，可以直接進(jìn)入小程序。此時(shí)，將彈出掃碼界面，防止用戶未掃碼，出現(xiàn)設(shè)備不存在的情況。該界面主要利用微信官方的API來完成核心的邏輯，掃碼界面如圖1右側(cè)所示。充電小程序的圖標(biāo)主要來自阿里巴巴的incofont字體圖標(biāo)庫。獲取首頁數(shù)據(jù)之前需要調(diào)用后臺(tái)的thirdlogin接口，請求成功之后會(huì)返回一個(gè)對象，利用sessioncookie字段，使用小程序緩存將其保存到本地。由于后續(xù)請求需要將其放在請求頭里，以便讓后端程序進(jìn)行驗(yàn)證。

三、結(jié)論

在移動(dòng)物聯(lián)網(wǎng)時(shí)代，充電樁的需求日益增大，充電小程序可為充電樁服務(wù)，緩解廣大用戶出門在外充電的需求，可以促進(jìn)互聯(lián)網(wǎng)共享經(jīng)濟(jì)的發(fā)展。本文主要描述了基于微信平臺(tái)API開發(fā)，采用HTML5、CSS3等前端技術(shù)的交互式共享充電小程序，闡述了具有較高實(shí)用性的前端技術(shù)的開發(fā)環(huán)境。其主要優(yōu)點(diǎn)是所占存儲(chǔ)空間小，客戶端界面簡單大方，用戶上手容易，即用即走，無需安裝，便于推廣使用。在5G技術(shù)背景下，未來的移動(dòng)應(yīng)用將迎來大爆發(fā)，隨著用戶需求的不斷增加，更新速度將更快，小程序應(yīng)用將受到前所未有的市場考驗(yàn)。未來還需添加會(huì)員、充值等新功能，構(gòu)建更多功能應(yīng)用，使用戶數(shù)據(jù)更加安全，并進(jìn)一步嘗試?yán)肏TML5+CSS3+JavaScript的技術(shù)優(yōu)勢，更好地實(shí)現(xiàn)跨瀏覽器技術(shù)。

【參考文獻(xiàn)】

［1］周夢雨，彭長海，許冰冰，陶秋香．手機(jī)充電樁的設(shè)計(jì)與實(shí)現(xiàn)［J］．信息與電腦:理論版，2020(5):111－113．

［2］陳梅，蘇晨，高斐．HTML5在Web界面設(shè)計(jì)中的應(yīng)用［J］．電腦知識(shí)與技術(shù)，2018(5):214－215+217．

［3］劉紅英．Web開發(fā)中HTML5技術(shù)的應(yīng)用［J］．信息與電腦:理論版，2017(5):63－65．

［4］趙書田，劉海姣．基于JavaScript的動(dòng)態(tài)Web應(yīng)用系統(tǒng)設(shè)計(jì)［J］．現(xiàn)代電子技術(shù)，2017(15):44－46+51．

［5］朱二華．基于Vue．js的Web前端應(yīng)用研究［J］．科技與創(chuàng)新，2017(20):119－121．

［6］李微．HTML5+CSS3在網(wǎng)頁設(shè)計(jì)中的特性及優(yōu)勢［J］．信息與電腦:理論版，2018(22):13－15．

作者：陳頔 王鑫宇 王瓊 單位：哈爾濱職業(yè)技術(shù)學(xué)院