江苏龙网

  1. 主页 > 生活百科 > >

鸿蒙元服务开发实例：桌面卡片上的电动自行车助手E-Bike

鸿蒙

E-Bike是一款基于HarmonyOS开发的元服务，以万能卡片的形式给骑行提供便捷服务 。首先需要完成HarmonyOS开发环境搭建 。

鸿蒙元服务开发实例：桌面卡片上的电动自行车助手E-Bike

文章插图
一、元服务E-Bike简介E-Bike是一款基于HarmonyOS开发的元服务，以万能卡片的形式给骑行提供便捷服务，主要功能包括：
  • 车辆状态信息获取：用户可在元服务内连接电动自行车（真机和自行车自备），查看车辆位置、剩余电量、续航里程以及累计骑行里程 。
  • 包括响铃找车功能：按钮可触发车辆鸣响，便于快速确认车辆具体位置（真机和自行车自备） 。
  • 用户可通过右上角按钮添加2x2或2x4卡片，在桌面可直接查看车辆状态信息 。

鸿蒙元服务开发实例：桌面卡片上的电动自行车助手E-Bike

文章插图
二、环境搭建首先需要完成HarmonyOS开发环境搭建 。E-Bike是元服务，且为端云一体化开发模式，新建工程可可参照如图步骤进行（注意该模式下App为Stage模型） 。
鸿蒙元服务开发实例：桌面卡片上的电动自行车助手E-Bike

文章插图
 
鸿蒙元服务开发实例：桌面卡片上的电动自行车助手E-Bike

文章插图
软件要求
  • DevEco Studio版本：DevEco Studio 3.1 Release及以上版本 。
  • HarmonyOS SDK版本：API version 9及以上版本 。
硬件要求
  • 设备类型：华为手机或运行在DevEco Studio上的华为手机设备模拟器 。
  • HarmonyOS系统：3.1.0 Developer Release及以上版本 。
  • 电动自行车（获取真实车辆数据，车辆为作者自制）
环境搭建安装DevEco Studio，详情请参考下载和安装软件 。
设置DevEco Studio开发环境，DevEco Studio开发环境需要依赖于网络环境，需要连接上网络才能确保工具的正常使用，可以根据如下两种情况来配置开发环境：
  • 如果可以直接访问Inte.NET，只需进行下载HarmonyOS SDK操作 。
  • 如果网络不能直接访问Internet，需要通过代理服务器才可以访问，请参考配置开发环境 。
【鸿蒙元服务开发实例：桌面卡片上的电动自行车助手E-Bike】开发者可以参考以下链接，完成设备调试的相关配置：使用真机进行调试使用模拟器进行调试
三、代码结构解读本篇教程只对E-Bike实现的核心代码进行讲解，对于完整代码，会在源码下载或gitee中提供 。主要的程序框架如下：
entrysrcmAInets│ ├─common–通用常量和数据│ ├─entryability – EntryAbility.ts 程序入口│ ├─entryformability–EntryFormAbility.ts卡片入口│ ├─pages—Index.ts 应用主页│ ├─services│ ├─widget│ │ └─pages—2x2 ArkTS卡片│ └─widget24│ └─pages—2x4卡片└─resources —资源文件目录四、应用主页面UI和功能开发1、主页面UI新建工程后，在entrysrcmainetspagesIndex.ts文件中已有一个模板案例，我们需要删除其中的代码，然后构建自己的页面 。具体实现方法是：
  • 删除build() { }中的代码 。
  • 使用Column、Flex、Row容器和Button、Image、Text组件构建E-Bike布局 。
  • 在UI中加入逻辑判断具体要显示的UI组件 。如响铃找车的Image组件内容由用户的点击状态决定，点击响铃找车则Image切换为响铃状态，反之亦然 。
具体代码实现框架如下：
@Entry @Component struct Index {build() { Column({space:10}){// 背景图Image($r("app.media.Ebike"))···Flex(){// 响铃找车Column(){if(this.display_flag==1){Image($r("app.media.ic_ring_on_filled")).height("55%").objectFit(ImageFit.Contain).interpolation(ImageInterpolation.High).onClick(() => { this.display_flag +=1; if(this.display_flag>2){this.display_flag =1;}})}if(this.display_flag==2){Image($r("app.media.ic_ring_off_filled")).height("55%").objectFit(ImageFit.Contain).interpolation(ImageInterpolation.High).onClick(() => { this.display_flag+=1; if(this.display_flag>2){this.display_flag =1;}})}Text("响铃找车")···}// 获取定位Column(){Image($r("app.media.ic_statusbar_gps"))····})Text(this.bike_location)····}····}.width("95%").height("10%")// 电量 设置Flex({ direction: FlexDirection.Row,justifyContent: FlexAlign.SpaceBetween,}){// 电量Column() { Row(){Image($r("app.media.ic_power"))···// 电量值Text(this.bike_power.toString() + '%')···}Text("剩余电量")···}···// 设置Column() { Image($r("app.media.ic_public_settings_filled"))···Text("车辆设置")···}···}// 骑行数据Flex({ direction: FlexDirection.Column}){Row(){Text(" 累计骑行")··· Blank()Text("预计续航 ")···}}}}}


推荐阅读


上一篇：2023 年值得考虑的10大 React 静态站点生成器！

下一篇：系统架构设计之数据同步策略