微信平臺的共享充電小程序設(shè)計開發(fā)
前言：想要寫出一篇引人入勝的文章？我們特意為您整理了微信平臺的共享充電小程序設(shè)計開發(fā)范文，希望能給你帶來靈感和參考，敬請閱讀。
摘要:當(dāng)前信息技術(shù)高速發(fā)展，電動車、手機等移動產(chǎn)品的共享充電問題一直困擾著人們。傳統(tǒng)的充電方式已不能滿足人們的便捷需求。以充電原生小程序為應(yīng)用背景，采用微信平臺API進行開發(fā)，并基于HTML5技術(shù)構(gòu)建響應(yīng)式網(wǎng)站。在布局頁面時，用HTML進行元素定義和基礎(chǔ)布局，利用CSS3對HTML元素布局進行定位渲染，保證前端界面美觀大方。利用JavaScript及Vue框架實現(xiàn)前后臺功能交互，以便使用流程人性化和簡易化。開發(fā)過程充分考慮界面的美觀性、使用的便捷性、存儲空間的性能等問題，實現(xiàn)基于二維碼設(shè)備識別技術(shù)的交互式共享充電小程序。
關(guān)鍵詞:充電小程序;前端設(shè)計;微信平臺;交互設(shè)計
隨著網(wǎng)絡(luò)與信息技術(shù)的不斷演進，5G技術(shù)已經(jīng)正式商用，新零售時代已經(jīng)到來，共享產(chǎn)品種類層出不窮，共享電動汽車和移動電子產(chǎn)品已成為人們出行時必不可少的設(shè)備。但即使移動設(shè)備電池容量不斷增大，出門在外時的充電問題依然困擾著用戶。目前，一般有兩種充電服務(wù)方式:一種是隨身攜帶充電寶等充電工具，但卻有攜帶不方便、存在用電安全隱患等弊端，且不太適用于大型電動設(shè)備;另一種是在充電樁上充電，其生產(chǎn)成本和技術(shù)要求較低，但投幣式、刷卡式等充電樁需要用戶在原地充電，難以滿足人們的便捷需求。如今，微信小程序、HTML5等技術(shù)逐漸興起，網(wǎng)站逐漸脫離了傳統(tǒng)的枯燥頁面風(fēng)格，對開發(fā)者來說更容易維護和管理，可以實現(xiàn)跨平臺開發(fā)。
一、主要用到的前端技術(shù)
本文所述的共享充電小程序，采用基于HTML5、CSS3等前端技術(shù)，保證了前端界面的美觀和操作便捷。這一小程序利用微信平臺的共享優(yōu)勢，采用微信平臺API，讓用戶快捷實現(xiàn)移動充電支付功能，使用形式多樣，消費者可以直接打開微信小程序掃描二維碼使用。商家可以合理運用小程序的二維碼宣傳海報，讓用戶自發(fā)掃描關(guān)注本微信小程序，宣傳成本和推廣投入較低。已有文獻開發(fā)出快速定位找到充電樁的微信小程序［1］。
(一)HTML5HTML5網(wǎng)頁前端技術(shù)展現(xiàn)的外觀形式更加注重易讀性以及與藝術(shù)融合達成的美觀性。通過結(jié)合CSS3，可便捷地完成設(shè)計任務(wù)［2］。一般是由HTML、CSS、JavaScript等作為基本構(gòu)建項目語言，并可同時采用WebApplicationAPI、DeviceAPI等技術(shù)［3］。基于CGI靜態(tài)的HTML頁面可以通過JavaScript提供動態(tài)實時信息，對客戶的操作進行反饋。隨著HTML5的出現(xiàn)，JavaScript的功能已經(jīng)擴展到編寫后臺開發(fā)，可避免HTML語言自身的弊端［4］。本文使用JavaScript配合HTML5來實現(xiàn)跨平臺Web的應(yīng)用開發(fā)。充電小程序的主界面主要由頂部導(dǎo)航欄、折疊面板和內(nèi)容主體區(qū)域完成，底部設(shè)置功能按鈕。主要使用HTML+CSS對頁面進行美化，頁面布局采用 Flex布局。這種布局方式會讓頁面變成彈性布局，不會因為手機尺寸變化而改變樣式。折疊面板使用vant組件庫中的collapse折疊面板，主體內(nèi)容和底部功能按鈕采用CSS中的定位功能，可將功能按鈕區(qū)域定位在頁面底部。
(二)VueVue是構(gòu)建用戶界面的框架，是一個輕量級的MVVM(ModelViewViewModel)，也就是數(shù)據(jù)的雙向綁定，是基于數(shù)據(jù)驅(qū)動和組件化的前端開發(fā)，其采用自底向上增量式開發(fā)模式，使用更加靈活、開放，架構(gòu)也更加簡單，便于與庫文件及已有項目進行整合［5］，是一種通過簡單的API就能實現(xiàn)響應(yīng)式的數(shù)據(jù)綁定和組合的視圖組件。Vue是一個構(gòu)建數(shù)據(jù)的視圖集合，其只關(guān)注視圖層，存儲空間只有幾十KB。Vue．js通過簡潔的API來提供高效的數(shù)據(jù)綁定和靈活的組件系統(tǒng)。它由我國自主開發(fā)，使用中文技術(shù)文檔，易于國人理解和學(xué)習(xí)。Vue．js通過組件，把一個單頁應(yīng)用中的各種模塊拆分為單獨的組件，只需先在父級應(yīng)用中寫好各種組件標簽(占坑)，并且在組件標簽中寫好要傳入組件的參數(shù)(就像給函數(shù)傳入?yún)?shù)一樣，這個參數(shù)叫做組件的屬性)，然后再分別寫好各種組件的實現(xiàn)(填坑)，應(yīng)用開發(fā)就可以完成。Vue使數(shù)據(jù)的更改更為簡單，無需進行邏輯代碼的修改，只需要操作數(shù)據(jù)就可完成相關(guān)操作。
(三)CSS3CSS即層疊樣式表。Web開發(fā)中采用CSS技術(shù)，可有效地控制頁面的布局、字體、顏色、背景和其他效果。CSS3帶有模塊化的特點，增加了很多新特性和選擇器，編寫樣式更加方便［6］。當(dāng)前，移動端的產(chǎn)品種類越來越多，傳統(tǒng)方式在構(gòu)造移動端的樣式時很困難，不同設(shè)備的屏幕寬度、高度不一致，所以要去適配不同屏幕寬度，開發(fā)過程比較繁瑣。而CSS3引入全新的布局方式，即flex布局，它很好地解決了這個問題，其功能主要是當(dāng)屏幕和瀏覽器窗口大小發(fā)生變化時，可以靈活調(diào)整布局;可以指定伸縮項目沿著主軸或側(cè)軸，按比例分配空余空間，從而調(diào)整伸縮項目的大小，將伸縮容器額外空間分配到項目之前、之后或之間;可以指定將垂直于元素布局軸的額外空間分布到該元素周圍，控制元素在頁面上的布局方向，按照不同標準流所指定的排序方式，對屏幕上的元素重新排序。此外，還有其他很多靈活實用的屬性。
二、充電小程序布局與設(shè)計
(一)技術(shù)架構(gòu)充電小程序的首頁由四個文件組成，分別為index．wxss、index．wxml、index．json和index．js。其中，index．wxss主要是寫CSS樣式的，index．wxml主要是寫布局結(jié)構(gòu)的，index．json主要是頁面的一些配置和引入組件的，index．js主要是處理業(yè)務(wù)邏輯的。本文借鑒Vue的設(shè)計思想，也就是將可復(fù)用的結(jié)構(gòu)封裝成組件，通過在需要的頁面注冊，該組件即可使用，以簡化頁面的代碼結(jié)構(gòu)。App．js是項目的入口文件，App全局函數(shù)掌握著程序生命周期。App．json是小程序的全局配置文件，頁面的底部導(dǎo)航欄和頂部樣式，可以在這里進行配置，每個頁面已經(jīng)配置的樣式會覆蓋全局的樣式。App．css是全局的樣式配置文件，用來配置全局的樣式，同App．json一樣，頁面的樣式會覆蓋全局的樣式。Service文件夾包含開發(fā)者封裝的JavaScript文件，可將微信的網(wǎng)絡(luò)請求進行封裝，以簡化代碼。
(二)首頁設(shè)計及使用流程用戶掃描充電樁上面的二維碼，即可進入小程序。首次進入小程序需要用戶授權(quán)。由于微信平臺不允許用戶在首頁被授權(quán)，所以當(dāng)用戶選擇充電端口時，會跳轉(zhuǎn)到授權(quán)頁面，用戶授權(quán)以后才可以正常使用充電小程序。授權(quán)之后，用戶選擇充電端口和功率大小，付款之后即可開始充電，并開始計費，如充電時間有剩余，根據(jù)剩余時間計算，返回至余額，下次繼續(xù)使用。充電小程序首頁利用移動端的flex布局和定位完成對頁面的布局，使用vant－weapp組件開發(fā)各個模塊。業(yè)務(wù)邏輯主要集中在首頁，比如數(shù)據(jù)獲取和支付邏輯。每個充電樁設(shè)備都映射為不同的設(shè)備編號，這些設(shè)備編號數(shù)據(jù)將保存到二維碼，所以設(shè)備在小程序當(dāng)前頁面需要展示設(shè)備編號。在獲取數(shù)據(jù)模塊，主要采用Promise來對小程序官方的請求進行封裝。然后，將獲取的數(shù)據(jù)的JavaScript文件封裝成可復(fù)用的JavaScript文件，以提高開發(fā)效率。充電小程序的首頁界面如下頁圖1左側(cè)所示。用戶首次掃描二維碼進入小程序時，會被要求進行授權(quán)登錄，否則無法使用。用戶選擇充電端口，然后選擇對應(yīng)的充電功率，點擊立即支付，即可下單開始充電。圖中的1分鐘代表每充電1分鐘將花費0．01元。充電時間越長，代表功率越低，價格也越便宜。考慮到每個設(shè)備的編號不同，當(dāng)用戶退出充電小程序再次使用時，會跳到掃碼界面。該界面調(diào)用了微信平臺的掃碼API，可識別二維碼中的參數(shù)，讀取參數(shù)中的設(shè)備編號，并跳轉(zhuǎn)到首頁，將設(shè)備編號顯示到導(dǎo)航欄，便于用戶再次使用。當(dāng)用戶授權(quán)登錄后，頂部導(dǎo)航欄會顯示當(dāng)前設(shè)備編號，每個二維碼都對應(yīng)唯一的設(shè)備編號。余額欄指的是當(dāng)用戶掃碼充電后，如果充電時間有剩余，則將余額直接退到用戶的賬戶，下次登錄時，用戶可以直接使用。
(三)授權(quán)頁面小程序授權(quán)頁面主要是用來獲取用戶信息的，比如頭像、微信昵稱、位置等，主要利用微信官方平臺提供的API完成用戶信息的獲取。當(dāng)用戶第一次掃碼進入充電小程序，點擊端口按鈕時，會彈出授權(quán)登錄頁面，授權(quán)以后便不再彈出該界面，除非用戶刪除該小程序。
(四)掃碼頁面當(dāng)用戶需要再次使用的時候，下拉微信，可以直接進入小程序。此時，將彈出掃碼界面，防止用戶未掃碼，出現(xiàn)設(shè)備不存在的情況。該界面主要利用微信官方的API來完成核心的邏輯，掃碼界面如圖1右側(cè)所示。充電小程序的圖標主要來自阿里巴巴的incofont字體圖標庫。獲取首頁數(shù)據(jù)之前需要調(diào)用后臺的thirdlogin接口，請求成功之后會返回一個對象，利用sessioncookie字段，使用小程序緩存將其保存到本地。由于后續(xù)請求需要將其放在請求頭里，以便讓后端程序進行驗證。
三、結(jié)論
在移動物聯(lián)網(wǎng)時代，充電樁的需求日益增大，充電小程序可為充電樁服務(wù)，緩解廣大用戶出門在外充電的需求，可以促進互聯(lián)網(wǎng)共享經(jīng)濟的發(fā)展。本文主要描述了基于微信平臺API開發(fā)，采用HTML5、CSS3等前端技術(shù)的交互式共享充電小程序，闡述了具有較高實用性的前端技術(shù)的開發(fā)環(huán)境。其主要優(yōu)點是所占存儲空間小，客戶端界面簡單大方，用戶上手容易，即用即走，無需安裝，便于推廣使用。在5G技術(shù)背景下，未來的移動應(yīng)用將迎來大爆發(fā)，隨著用戶需求的不斷增加，更新速度將更快，小程序應(yīng)用將受到前所未有的市場考驗。未來還需添加會員、充值等新功能，構(gòu)建更多功能應(yīng)用，使用戶數(shù)據(jù)更加安全，并進一步嘗試利用HTML5+CSS3+JavaScript的技術(shù)優(yōu)勢，更好地實現(xiàn)跨瀏覽器技術(shù)。
【參考文獻】
［1］周夢雨，彭長海，許冰冰，陶秋香．手機充電樁的設(shè)計與實現(xiàn)［J］．信息與電腦:理論版，2020(5):111－113．
［2］陳梅，蘇晨，高斐．HTML5在Web界面設(shè)計中的應(yīng)用［J］．電腦知識與技術(shù)，2018(5):214－215+217．
［3］劉紅英．Web開發(fā)中HTML5技術(shù)的應(yīng)用［J］．信息與電腦:理論版，2017(5):63－65．
［4］趙書田，劉海姣．基于JavaScript的動態(tài)Web應(yīng)用系統(tǒng)設(shè)計［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è)計中的特性及優(yōu)勢［J］．信息與電腦:理論版，2018(22):13－15．
作者：陳頔 王鑫宇 王瓊 單位：哈爾濱職業(yè)技術(shù)學(xué)院
