中南大学课设微信小程序充电桩.docx
- 文档编号:10487081
- 上传时间:2023-02-13
- 格式:DOCX
- 页数:11
- 大小:446.17KB
中南大学课设微信小程序充电桩.docx
《中南大学课设微信小程序充电桩.docx》由会员分享,可在线阅读,更多相关《中南大学课设微信小程序充电桩.docx(11页珍藏版)》请在冰豆网上搜索。
中南大学课设微信小程序充电桩
中南大学
程序设计基础实践报告
题目智能充电桩管理平台
学生姓名
学院信息科学与工程学院
专业班级
学号
完成时间
5.1.2步骤2:
专业设计界面流程…………….……………………………...4
5.1.3步骤3:
界面设计整体介绍…………..………………………………..5
5.1.4步骤4:
设计思想总结…………….…………………………………...5
5.1.5步骤5:
界面展示…………..…………………………………………..5
5.2.1步骤1:
前端开发……………………………………………...………6
5.2.2步骤2:
后端开发………………………………………....….………..6
7.感想……………………………………………………………………………….4
程序设计基础实践报告
1.课程设计内容
系统包括如下几个部分:
智能化云平台、用户手机端程序、现场充电桩模拟器。
智能化云平台具备如下功能:
1、以地图方式对系统内注册的所有充电桩进行实时展示,可显示每个充电桩的实时状态;2、对充电桩的运行数据进行记录;3、对运行数据进行可视化展示;4、对充电桩信息和用户信息进行数据维护;5、与现场充电桩模拟器进行实时数据通信以完成充电任务;6、对充电支付进行管理。
用户手机端程序实现用户注册,钱包管理,扫码充电功能,还可以查找最近的充电桩。
现场充电桩模拟器实现对充电桩各功能的模拟,包括跟云平台的数据通信以及与手机端程序的接口等。
2.课程设计目的
建立一套智能化的共享充电桩管理平台,以实现充电桩的智能化运营。
实验目的
1.了解小程序的构架和掌握程序代码的编写
2.了解学习CSS,HTML,PHP,数据库等代码的运行方式
3.掌握后台管理的代码运行和与前端的数据交互
4.掌握用户交互的界面设计,把握微信小程序的整体功能
5.前端与机器之间的数据收发和统计
6.学会简单的微信小程序的开发和运营
前台采用微信统一的框架,后台可以任意挑选,PHP,node.js,Java都是主流,MVC也是一种不错的选择。
个人选择的netMVC框架,在并发处理,模块化方面都有很好表现。
服务器可以自己搭建,也可以直接用腾讯云
3.背景知识
随着新能源汽车的普及,充电桩成为一项非常重要的基础设施,本题目的目的是建立一套智能化的充电桩管理平台,以实现充电桩的智能化运营。
4.工具/准备工作
微信小程序开发平台、云服务器购买;
5.设计步骤、方法等
5.1.步骤1:
用户界面设计
本系统坚持图形用户界面设计原则,界面直观、对用户透明:
用户接触软件后对界面上对应的功能一目了然、不需要多少培训就可以方便使用本应用系统。
界面设计员应该明白软件中用户是所有处理的核心,不应该有应用程序来决定处理过程,所以用户界面应当由用户来控制应用如何工作、如何响应,而不是由开发者按自己的意愿把操作流程强加给用户。
界面设计必须经过确认才能完成。
在界面设计中应该保持界面的一致性。
一致性既包括使用标准的控件,也指使用相同的信息表现方法,如在字体、标签风格、颜色、术语、显示错误信息等方面确保一致。
5.1.1.步骤1:
UI设计赘述
UI即UserInterface(用户界面)的简称。
UI设计则是指对软件的人机交互、操作逻辑、界面美观的整体设计。
好的UI设计不仅是让软件变得有个性有品味,还要让软件的操作变得舒适、简单、自由,充分体现软件的定位和特点。
UI设计的职能,大体分为3个方面。
1.图形设计.对软件产品的外形进行“视觉设计”。
2.交互设计,设计软件的操作流程、树状结构、操作规范等。
3.用户测试/研究,测验交互设计的合理性,以及图形设计的美观性。
好的UI设计基础界面要做到能够吸引人,给人耳目一新的感觉这就要求工作者不仅要具备广告创意和美工艺术,还要了解心理学,抓住用户的心理。
UI设计里面最重要的就是交互设计,负责人类与机器之间的交流,这一操作要简单,便捷,直接有效。
通过这一操作从而达到用户的使用目的,这也是交互设计的目的
5.1.2.步骤2:
专业页面设计流程
1.认识产品所要解决的问题
2.收集能解决这一问题的用户相关的信息
3.提供这一问题的解决方案
4.验证所提出的解决方案
4.1.用户测试
4.2.AB测试
4.3.五秒测试
4.4.远程测试
4.5热图测试
5.改善解决方案
5.1.3.步骤3:
界面设计整体介绍
用户界面分为三个板块,分别是扫码充电部分,在地图上查找部分以及用户个人中心部分。
扫码充电核心就是通过扫描二维码,识别出用户将要使用的充电桩,并将充电桩情况回馈用户,如果可以使用则跳转到支付页面。
在地图上查找部分核心就是通过定位用户所在的位置,向用户反馈周边充电桩所在的位置以及这些充电桩的使用情况。
用户个人中心部分就是实现·用户登陆、查看钱包、充值等功能。
5.2.步骤2:
小程序开发部分
小程序开发部分是本次设计的核心部分,包括前端搭建和后台控制。
5.2.1.步骤2.1:
前端搭建
在本次前台搭建中,由于微信小程序官方推出的大量专用代码以及相应的使用说明,所以完成的相对顺利。
首先是登陆,我们直接采用了微信账号登陆的方法,微信的官方文档详细的介绍了登录的流程,从流程中我们可以提炼出关键的流程点:
1.小程序端调用 wx.login() 接口,获取登录需要用到的 code
2.小程序端通过 wx.request(),与开发者的服务器进行通信
3.开发者获取到 code 后,与微信的服务器进行通信,获取 openid 和 session_key
4.利用随机值来作为键、利用 openid 和 session_key 作为值,保存用户的登录状态信息
5.服务器返回随机值到小程序的客户端,以后小程序的请求附带返回的随机值来确保用户的合法性
其次是在小程序中引入地图定位,微信小程序提供了几个方式,引入地图,如果想解析地址的话,微信小程序没有提供地址解析,所以必须引入地图插件,看了高德、XX和腾讯的地图,发现腾讯地图对小程序,支持的功能多,最方便。
再次是扫码充电,首先是在小程序中插入扫描二维码功能,这一步在微信小程序的官方文档中有详细教程,然后跳转页面到支付界面。
5.2.2.步骤2.2:
后端搭建
由于充电桩发布在不同的地点,我们对每个充电桩的位置和状态进行了展示。
进入小程序页面后,点击查找附近就会出现的地图并显示当前用户所在的位置,以及附近充电桩的位置和使用情况。
扫码使用:
用户可直接在首页点击扫码,然后扫描充电桩上显示的二维码进行使用,如当前干衣机不是可用状态,则显示干衣机不可使用的信息;若可用,则直接进入选择时长并支付的界面。
充电桩状态显示:
充电桩有三种状态:
空闲、运行中、故障,分别用绿色、红色、橙色的图标进行展示。
支付:
由于微信对支付的限制,作为个人小程序,我们并不能真正的完成支付功能,只能对支付进行一个简单的模拟。
每个用户第一次注册该小程序时,我们为其在数据库中写入一条数据以保存该用户的信息及钱包余额,当然,这里的余额只是一个虚拟的数字,通过用户的充值和支付操作进行增减。
用户必须在小程序的钱包中有足够余额时才能使用干衣机,否则系统将显示余额不足。
后台管理云平台系统:
进入管理系统后,可在相应页面查看充电桩运行相关数据,如状态、运行总时长、运行的时间段等。
还可查看并管理相应状态的订单数据,已完成的订单、进行中的订单、以及故障订单。
同时可实时监测系统的当前收入。
由于本次程序设计由团队完成,这部分内容由另一位程序员设计完成。
5.3.步骤3:
模拟器搭建
模拟器的搭建主要就是测试程序的可靠性。
我们用模拟器来代表充电桩,每台模拟器上都有一个二维码,用于用户通过扫二维码进入程序。
模拟器充电桩运行与状态,从小程序获取用户信息、时间以及余额,将其写入数据库
6.设计结果及分析
2.12图标展示
7.感想
这次程序设计我选择了微信小程序,一方面的原因是微信小程序作为腾讯推出的一种程序类型,它的开发与设计有一点的定式,开发简单便捷,后期的维护也方便一点,而且在安卓与iOS平台都可以使用;另一方面,我认为智能充电桩这样的程序更适合用微信小程序来开发与设计。
微信小程序作为轻型应用很有可能会是未来移动互联网应用的主要形式,它的特点是小而快,但我认为它不会替代所有的App,因为微信小程序目的主要还是解决小应用的问题,重点在于灵活、快捷、用完即走。
微信小程序不能完全取代APP,我认为可能的原因有两个:
一是入口不容易找到,浪费用户时间;二是一部分用户在尝鲜之后就回归到了原生App,因为原生App的体验可能更加丰富。
但是当小程序解决了这些问题,各种APP很有可能会被淘汰。
微信小程序未来的应用空间还是很大的,它的价值也还需要时间的检验。
就像是这次我完成的充电桩小程序,属于一个刚需但是低频的程序,人们一天中总会有使用的时候,但是很明显不会有很多的使用次数,有些用户可能不会去选择下载APP。
像是这种程序,选择微信小程序是一条很好的出路,需要使用时打开小程序,用完了就可以关掉,不会一直占手机内存,不想用了还可以删掉。
这用完即走的特点正好满足用户使用低频服务类APP时的需求,比如要买车票时打开小程序,买完票就关闭它,等要用时再打开,避免APP一直在手机里占内存却又很少用。
另一方面用户在线下消费的需求正是“快捷”、“灵活”、“用完即走”。
比如在餐馆点菜,只需扫描二维码,就可以接入小程序,立马就能完成点菜,不必下载APP,也不必关注公众号,也不用排队等餐馆的服务员,对用户来说,可以说是最方便的方式。
作为一名大学生,现在的我们并不能改变世界,但是我们有着比大多数人更开阔的视野,能够获得更多的咨询,我们可以紧紧地跟随世界的变化,让自己实现更大的价值。
8.参考文献
1.《7小时入门小程序——从入门到放弃》(视频版)
2.《微信小程序攻城狮培养计划》
3.PNG图标来源:
4.
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 中南 大学 课设微信小 程序 充电