微信平台的共享充电小程序设计开发

摘要:当前信息技术高速发展，电动车、手机等移动产品的共享充电问题一直困扰着人们。传统的充电方式已不能满足人们的便捷需求。以充电原生小程序为应用背景，采用微信平台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．

作者：陈頔 王鑫宇 王琼 单位：哈尔滨职业技术学院