鸿蒙电动车APP应用开发—如何实现远程实时查看车辆电量、位置，远程开关锁、响铃找车、续航估算等功能。-CSDN博客

本文链接：https://blog.csdn.net/m0_70749039/article/details/139333563

如今电动车/自行车保有量巨大，停车点混乱、拥堵现象导致用车找车困难，为了给人们更好的骑行体验，领航员1号团队基于OpenHarmony开发了丸骑行方案。用户可体验远程实时查看车辆电量、位置，远程开关锁、响铃找车、续航估算等功能。

作品标题：丸骑行

软件分类：生活类APP

应用领域：交通工具-电动车

开放源码许可证:

Apache License
Version 2.0, January 2004
http://www.apache.org/licenses/

文件说明:

IotDevice：设备开发源码

app/：OPenHrmony 应用

bin/ 设备开发固件

hap/ 应用Hap包

涉及的OH技术特性:

ArkUI、服务卡片、应用内web、分布式KvStore数据持久化、socket网络通信

运行条件

开发环境准备：

应用开发:

DevEco Studio版本：DevEco Studio 3.1.1 Release及以上版本。

OpenHarmony SDK版本：API 9， OpenHarmony 3.2 Release

设备开发：

主控芯片：RISC-V架构，Hi3861，适用于上海海思 HiSpark T1、润和 HiHope Pegasus、小熊派 BearPI Nano

本文使用Hihope Pegasus、BearPi Nano派验证通过。

OpenHarmony 版本: https://gitee.com/HiSpark/hi3861_hdu_iot_application

Windows环境搭建：hi3861_hdu_iot_application基于Hi3861V100和OpenHarmony. 开发指南文档地址: /doc/物联网设计及应用实验指导手册.pdf

运行说明

操作一：准备前文所述应用开发环境，下载hap包到本地，正确编译后上传到DAYU800开发板；
操作二：给DAYU800开发板连接上可以访问互联网的热点
操作三：【仅连接硬件需要】使用Hiburn工具下载bin文件到Hi3861开发板，使用串口工具查看当前Hi3861的IP地址
操作四：刷新设备状态
- 运行APP后，右滑进入地图页面，等待几秒(看网络情况)，地图刷新出来后页面自动刷新，看到页面获取到定位数据后，已同步保存到数据库。（若GPS未开启请点击控件开启定位功能。）
- 进入首页页面，查看对应的电量、位置等数据，因为数据写入是异步的，若未及时刷新可点击刷新数据控件获取最新数据
操作五: 桌面服务卡片
- 在桌面长按应用图标，选择添加卡片。
- 在卡片上可查看数据，当前实现了点击对应控件或者定时刷新固定的数据，暂未与数据库同步。

测试说明

关于连接硬件：
- 运行APP，点击首页的临时车辆，输入Hi3861的IP地址，然后点击wifi按钮控件连接设备，若失败重启应用或者检查IP是否正确
- 点击开锁、响铃找车按钮，硬件会做出相应动作。
- Hi3861设备默认连接的wifi信息如下
  
  #define CONFIG_WIFI_SSID "r1" // 要连接的WiFi 热点账号
  
  #define CONFIG_WIFI_PWD "88888889" // 要连接的WiFi 热点password
  
  #define CONFIG_CLIENT_PORT 8888 // 要连接的服务器端口
关于获取定位信息

定位需要GPS模块，为了评委测试方便，保证评审期间硬件设备24h不关机，每次运行APP时，每1s至少可获取1次上报数据。由于地图开放平台限额地址逆编码5000次/日，故在H5中默认限制逆编码10次/运行，若不想频繁启动APP，可修改文件src/main/resources/rawfile/index.html如下四段的定义：

<script type="text/javascript">

    var publish_topic="PilotWeb";
    ....
    var getAddressCount = 4990 // 每次逆编码数值+1，到5000停止地址逆编码
    ....
</script>

技术架构

APP功能框架

UX/UI设计

从功能需求，设计应用交互。APP包含四个页面，其中三个主要交互页面在一个Tabs组件中，可点击底部的导航bar或者左右滑动切换展示的内容，通过点击TabContent(0)页面中定位控件触发Navigator导航到屏地图页面（WebPage.ets）。

APP主要页面布局（文中不展示具体页面布局代码，主要讲解UI信息与交互）：

 build() {
    Column(){
      Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
        TabContent() {...}
        .tabBar(this.TabBuilder(0,'首页'))

        TabContent() {...}
        .tabBar(this.TabBuilder(1,'地图'))

        TabContent() {...}
        .tabBar(this.TabBuilder(2,'我的'))
      }
      .vertical(false)
      .barHeight(100)
      .onChange((index: number) => {
        this.currentIndex = index
      })
      .width('100%')
      .height('100%')

    }
    .height('100%')
    .backgroundImage($r('app.media.background_lite'))
    .backgroundImageSize({ width: '100%', height: '100%' })
  }

为了便于区分当前的Tabs的TabContent，自定义一个Tab bar，选中时显示不同图标与文字效果。

 @Builder TabBuilder(index: number ,name:string) {
    Column() {
      Image(this.currentIndex === index ? $r("app.media.bar_on") : $r("app.media.bar_off"))
        .width(50)
        .height(50)
        .margin({ bottom: 8 })
        .objectFit(ImageFit.Contain)
      Text(name)
        .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor)
        .fontSize(this.my_font_size)
        .lineHeight(this.my_font_size+2)
    }.width('100%')
  }

▍应用首页（Index.ets）