微信平臺的共享充電小程序設計開發

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

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

關鍵詞:充電小程序;前端設計;微信平臺;交互設計

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

一、主要用到的前端技術

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

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

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

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

二、充電小程序布局與設計

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

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

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

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

三、結論

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

【參考文獻】

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

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

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

［4］趙書田，劉海姣．基于JavaScript的動態Web應用系統設計［J］．現代電子技術，2017(15):44－46+51．

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

［6］李微．HTML5+CSS3在網頁設計中的特性及優勢［J］．信息與電腦:理論版，2018(22):13－15．

作者：陳頔 王鑫宇 王瓊 單位：哈爾濱職業技術學院