OpenHarmony南向开发案例:【 智能家居中控】

 

 应用场景简介

  • 智能家居。

今天打造的这一款全新智能家庭控制系统,凸显应用在智能控制和用户体验的特点,开创国内智能家居系统体验新局面。新的系统主要应用在鸿蒙生态。

工程版本

  • 系统版本/API版本:OpenHarmony SDK API 8
  • IDE版本:DevEco Studio 3.0 Beta4

快速上手

准备硬件环境
  • [获取OpenHarmony系统版本]:标准系统解决方案(二进制)
  • [搭建标准系统环境]
  • [完成Dayu200开发板的烧录]
准备开发环境
  • 安装最新版[DevEco Studio]。
  • 请参考[配置OpenHarmony SDK],完成DevEco Studio的安装和开发环境配置。
  • 开发环境配置完成后,请参考[使用工程向导] 创建工程(模板选择“Empty Ability”),选择eTS语言开发。
  • 工程创建完成后,选择使用[真机进行调测]。
  • HarmonyOS与OpenHarmony鸿蒙文档籽料:mau123789是v直接拿
准备工程
工程下载
git clone https://gitee.com/openharmony-sig/knowledge_demo_smart_home.git --depth=1
工程导入
  • DevEco Studio导入本工程;

    打开DevEco Studio,点击File->Open->下载路径/FA/SmartHomeCenter

编译
  • 点击File > Project Structure > Project > Signing Configs界面勾选“Automatically generate signing”,等待自动签名完成即可,点击“OK”。如下图所示:

image-20220713103159887

  • 点击Build->Build Hap/APPs 编译,编译成功生成entry-debug-rich-signed.hap
烧录/安装
  • 识别到设备后点击,或使用默认快捷键Shift+F10(macOS为Control+R)运行应用。

img

  • [安装应用]如果IDE没有识别到设备就需要通过命令安装,如下

    打开OpenHarmony SDK路径 \toolchains 文件夹下,执行如下hdc_std命令,其中path为hap包所在绝对路径。

    hdc_std install -r path\entry-debug-rich-signed.hap//安装的hap包需为xxx-signed.hap,即安装携带签名信息的hap包。

好的接下来我将详细讲解如何制作

开发教学

创建好的 eTS工程目录

新建工程的ETS目录如下图所示。

img

各个文件夹和文件的作用:

  • index.ets:用于描述UI布局、样式、事件交互和页面逻辑。
  • app.ets:用于全局应用逻辑和应用生命周期管理。
  • pages:用于存放所有组件页面。
  • resources:用于存放资源配置文件。

接下来开始正文。

我们的主要操作都是在在pages目录中,然后我将用不到10分钟的时间,带大家实现这个功能。

鸿蒙开发参考指导文件

鸿蒙开发指导文档:gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md点击或者复制转到。

搜狗高速浏览器截图20240326151450.png

拆解

image-20220706230542588

根据设计图,我们可以分层展示,用Column包裹,大致分为这几步

image-20220706231016908

可以看下本页的结构:

image-20220706232242915

再详细一点:

image-20220706232343167

 
import { SettingDetails } from './common/SettingDetails';
import router from '@ohos.router';

@Entry
@Component
struct Index {
  @State title: string = '智能家居体验'
  @State message: string = '你现在想要打开那些设置?'
  @State desc: string = '点击所有适用的选项。这将帮助我们\n自定义您的主页'
  @State Number: String[] = ['0', '1', '2', '3', '4']
  @State private isSelect: boolean = true;

  build() {
      Column() {
        Text(this.title)
          .fontSize(80)
          .fontWeight(FontWeight.Bold).onClick(() => {
          router.push({ url: 'pages/SensorScreen' })
        }).margin({ bottom: 60, top: 40 })
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold).onClick(() => {
          router.push({ url: 'pages/SensorScreen' })
        }).margin({ bottom: 60 })
        Text(this.desc)
          .fontSize(30)
          .textAlign(TextAlign.Center)
          .fontWeight(FontWeight.Bold)
          .onClick(() => {
          })
          .margin({ bottom: 60 })
        Row() {
          SettingDetails({
            image: "common/images/setting.png",
            title: "Maintenance\nRequests",
            isSelected: this.isSelect!
          })

          SettingDetails({ image: "common/images/grain.png", title: "Integrations\n", isSelected: this.isSelect! })

          SettingDetails({
            image: "common/images/ic_highlight.png",
            title: "Light\nControl",
            isSelected: this.isSelect!
          })
        }
        Row() {
          SettingDetails({ image: "common/images/opacity.png", title: "Leak\nDetector", isSelected: this.isSelect! })
          SettingDetails({
            image: "common/images/ac_unit.png",
            title: "Temperature\nControl",
            isSelected: this.isSelect!
          })
          SettingDetails({ image: "common/images/key.png", title: "Guest\nAccess", isSelected: this.isSelect! })
        }
        Button("NEXT")
          .fontSize(60)
          .fontColor(Color.Black)
          .width(600)
          .height(100)
          .backgroundColor(Color.Red)
          .margin({ top: 100 })
          .onClick(() => {
            router.push({ url: 'pages/SensorScreen' })
          })
      }
      .width('100%')
    .height('100%').backgroundColor("#F5F5F5")
  }
}

具体布局

具体布局设计到一些细节的地方,例如间隔,边框,当前组件尺寸设置等一些特殊情况,基本上就是嵌套,一层一层去实现。

代码结构

image-20220706231113785

编码

Index.ets
import { SettingDetails } from './common/SettingDetails';
import router from '@ohos.router';
@Entry
@Component
struct Index {
  @State title: string = '智能家居体验'
  @State message: string = '你现在想要打开那些设置?'
  @State desc: string = '点击所有适用的选项。这将帮助我们\n自定义您的主页'
  @State Number: String[] = ['0', '1', '2', '3', '4']
  @State private isSelect: boolean = true;
  build() {

      Column() {
        Text(this.title)
          .fontSize(80)
          .fontWeight(FontWeight.Bold).onClick(() => {
          router.push({ url: 'pages/SensorScreen' })
        }).margin({ bottom: 60, top: 40 })
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold).onClick(() => {
          router.push({ url: 'pages/SensorScreen' })
        }).margin({ bottom: 60 })
        Text(this.desc)
          .fontSize(30)
          .textAlign(TextAlign.Center)
          .fontWeight(FontWeight.Bold)
          .onClick(() => {
          })
          .margin({ bottom: 60 })
        Row() {
          SettingDetails({
            image: "common/images/setting.png",
            title: "Maintenance\nRequests",
            isSelected: this.isSelect!
          })
          SettingDetails({ image: "common/images/grain.png", title: "Integrations\n", isSelected: this.isSelect! })

          SettingDetails({
            image: "common/images/ic_highlight.png",
            title: "Light\nControl",
            isSelected: this.isSelect!
          })
        }
        Row() {
          SettingDetails({ image: "common/images/opacity.png", title: "Leak\nDetector", isSelected: this.isSelect! })
          SettingDetails({
            image: "common/images/ac_unit.png",
            title: "Temperature\nControl",
            isSelected: this.isSelect!
          })
          SettingDetails({ image: "common/images/key.png", title: "Guest\nAccess", isSelected: this.isSelect! })
        }
        Button("NEXT")
          .fontSize(60)
          .fontColor(Color.Black)
          .width(600)
          .height(100)
          .backgroundColor(Color.Red)
          .margin({ top: 100 })
          .onClick(() => {
            router.push({ url: 'pages/SensorScreen' })
          })
      }
      .width('100%')
    .height('100%').backgroundColor("#F5F5F5")
  }
}

image-20220706230620896

针对这一页:首先是头部

image-20220706232459401

代码如下:

 Row() {

        Image($r("app.media.back"))
          .objectFit(ImageFit.Contain)
          .width(80)
          .height(80)
          .onClick(() => {
            router.back()
          })
        Blank()
        Text('Home')
          .fontSize(45)
          .fontWeight(FontWeight.Bold)
        Blank()
        Image($r("app.media.notifications_none"))
          .objectFit(ImageFit.Contain)
          .width(80)
          .height(80)
          .onClick(() => {
            router.back()
          })
      }
      .width('100%')

其次是个人信息,包括头像等信息:

image-20220706232621793

代码如下:

 Row() {

        Image($r("app.media.logo"))//头像
          .objectFit(ImageFit.Contain)
          .width(200)
          .height(200)
          .borderRadius(21)
        Column() {
          Text('June 14, 2022')
            .fontSize(40).opacity(0.4)
            .fontWeight(FontWeight.Bold)
          Text('Good Morning,\nJianGuo',)
            .fontSize(60)
            .fontWeight(FontWeight.Bold)
        }
      }

接下来就是温度和湿度

image-20220706232715798

代码如下:

ow({ space: 120 }) {
        Column() {
          Text('40°',)
            .fontSize(40).opacity(0.4)
            .fontWeight(FontWeight.Bold)
          Text('TEMPERATURE',)
            .fontSize(40).opacity(0.4)
        }.margin({ left: 60 })

        Column() {
          Text('59%',)
            .fontSize(40).opacity(0.4)
            .fontWeight(FontWeight.Bold)
          Text('HUMIDITY',)
            .fontSize(40).opacity(0.4)
        }.margin({ right: 60 })
      }.margin({ top: 20 })
SensorScreen.ets
import { HomeDetails } from './common/homedetails';
// second.ets
import router from '@ohos.router';

@Entry
@Component
struct Second {
  @State message: string = 'Hi there'
  @State private isSelect: boolean = true;
  build() {
    Column() {
      Row() {
        Image($r("app.media.back"))
          .objectFit(ImageFit.Contain)
          .width(80)
          .height(80)
          .onClick(() => {
            router.back()
          })
        Blank()
        Text('Home')
          .fontSize(45)
          .fontWeight(FontWeight.Bold)
        Blank()
        Image($r("app.media.notifications_none"))
          .objectFit(ImageFit.Contain)
          .width(80)
          .height(80)
          .onClick(() => {
            router.back()
          })
      }
      .width('100%')
      Row() {

        Image($r("app.media.logo"))
          .objectFit(ImageFit.Contain)
          .width(200)
          .height(200)
          .borderRadius(21)
        Column() {
          Text('June 14, 2022')
            .fontSize(40).opacity(0.4)
            .fontWeight(FontWeight.Bold)
          Text('Good Morning,\nJianGuo',)
            .fontSize(60)
            .fontWeight(FontWeight.Bold)
        }
      }

      Row({ space: 120 }) {
        Column() {
          Text('40°',)
            .fontSize(40).opacity(0.4)
            .fontWeight(FontWeight.Bold)
          Text('TEMPERATURE',)
            .fontSize(40).opacity(0.4)
        }.margin({ left: 60 })

        Column() {
          Text('59%',)
            .fontSize(40).opacity(0.4)
            .fontWeight(FontWeight.Bold)
          Text('HUMIDITY',)
            .fontSize(40).opacity(0.4)
        }.margin({ right: 60 })
      }.margin({ top: 20 })
      Row() {
        HomeDetails({})
        HomeDetails({ image: "common/images/lightbull.png", isSelected: this.isSelect! })
      }
      Row() {
        HomeDetails({ image: "common/images/opacity.png" })
        HomeDetails({ image: "common/images/yytem0.png" })
      }

      Row(){
       Column(){
         Text('ADD',)
           .fontSize(40).opacity(0.4)
           .fontWeight(FontWeight.Bold)
         Text('NEW CONTROL',)
           .fontSize(40).opacity(0.4)
       }
       Blank()
       Image($r("app.media.add"))
         .objectFit(ImageFit.Contain)
         .width(100)
         .height(100)
         .borderRadius(21).margin({right:40})
      }.border({
        color:Color.White,
        width:8,
        radius:20
      }).width("88%").height(150)
    }.width("100%")
    .height('100%').backgroundColor("#F5F5F5")
  }
}
我们可以对下面的这块进行

我们可以对下面的这块进行封装

image-20220706231310224

代码如下

@Entry
@Component
export struct SettingDetails {
  @State  private image: string = "common/images/setting.png"
  @State  private title: string = "Maintenance\nRequests"
  @State private isSelected: boolean = true;
  build() {
  Column() {
    Image(this.image)
      .objectFit(ImageFit.Contain)
      .width(140)
      .height(120)
      .margin(20)
      .border({
        width: 12, color: this.isSelected ? Color.White : Color.Red,
        radius: 20
      })
      .onClick(() => {
        this.isSelected = !this.isSelected;
      })
    Text(this.title).fontSize(32).width(200).textAlign(TextAlign.Center)
  }
}}

我们可以对,下面的这块进行封装

image-20220706231425068

image-20220706232810459

代码如下

@Entry
@Component
export struct SettingDetails {
  @State  private image: string = "common/images/setting.png"
  @State  private title: string = "Maintenance\nRequests"
  @State private isSelected: boolean = true;
  build() {
  Column() {
    Image(this.image)
      .objectFit(ImageFit.Contain)
      .width(140)
      .height(120)
      .margin(20)
      .border({
        width: 12, color: this.isSelected ? Color.White : Color.Red,
        radius: 20
      })
      .onClick(() => {
        this.isSelected = !this.isSelected;
      })
    Text(this.title).fontSize(32).width(200).textAlign(TextAlign.Center)
  }
}}

最后就是底部

image-20220706232904753

代码如下:

 Row(){
       Column(){
         Text('ADD',)
           .fontSize(40).opacity(0.4)
           .fontWeight(FontWeight.Bold)
         Text('NEW CONTROL',)
           .fontSize(40).opacity(0.4)
       }
       Blank()
       Image($r("app.media.add"))
         .objectFit(ImageFit.Contain)
         .width(100)
         .height(100)
         .borderRadius(21).margin({right:40})
      }.border({
        color:Color.White,
        width:8,
        radius:20
      }).width("88%").height(150)

最后呢,很多开发朋友不知道需要学习那些鸿蒙技术?鸿蒙开发岗位需要掌握那些核心技术点?为此鸿蒙的开发学习必须要系统性的进行。

而网上有关鸿蒙的开发资料非常的少,假如你想学好鸿蒙的应用开发与系统底层开发。你可以参考这份资料,少走很多弯路,节省没必要的麻烦。由两位前阿里高级研发工程师联合打造《鸿蒙NEXT星河版OpenHarmony开发文档》里面内容包含了(ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等)鸿蒙(Harmony NEXT)技术知识点

如果你是一名Android、Java、前端等等开发人员,想要转入鸿蒙方向发展。可以直接领取这份资料辅助你的学习。下面是鸿蒙开发的学习路线图。

高清完整版请点击→《鸿蒙NEXT星河版开发学习文档》

针对鸿蒙成长路线打造的鸿蒙学习文档。话不多说,我们直接看详细资料鸿蒙(OpenHarmony )学习手册(共计1236页)与鸿蒙(OpenHarmony )开发入门教学视频,帮助大家在技术的道路上更进一步。

《鸿蒙 (OpenHarmony)开发学习视频》

图片

《鸿蒙生态应用开发V2.0白皮书》

图片

《鸿蒙 (OpenHarmony)开发基础到实战手册》

获取这份鸿蒙星河版学习资料,请点击→《鸿蒙NEXT星河版开发学习文档》

OpenHarmony北向、南向开发环境搭建

图片

《鸿蒙开发基础》

  1. ArkTS语言

  2. 安装DevEco Studio

  3. 运用你的第一个ArkTS应用

  4. ArkUI声明式UI开发

  5. .……

图片

《鸿蒙开发进阶》

  1. Stage模型入门

  2. 网络管理

  3. 数据管理

  4. 电话服务

  5. 分布式应用开发

  6. 通知与窗口管理

  7. 多媒体技术

  8. 安全技能

  9. 任务管理

  10. WebGL

  11. 国际化开发

  12. 应用测试

  13. DFX面向未来设计

  14. 鸿蒙系统移植和裁剪定制

  15. ……

图片

《鸿蒙开发实战》

  1. ArkTS实践

  2. UIAbility应用

  3. 网络案例

  4. ……

图片

 获取这份鸿蒙星河版学习资料,请点击→《鸿蒙NEXT星河版开发学习文档》

总结

鸿蒙—作为国家主力推送的国产操作系统。部分的高校已经取消了安卓课程,从而开设鸿蒙课程;企业纷纷跟进启动了鸿蒙研发

并且鸿蒙是完全具备无与伦比的机遇和潜力的;预计到年底将有 5,000 款的应用完成原生鸿蒙开发,未来将会支持 50 万款的应用那么这么多的应用需要开发,也就意味着需要有更多的鸿蒙人才。鸿蒙开发工程师也将会迎来爆发式的增长,学习鸿蒙势在必行!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/568509.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

java使用Sokcet和ServerSocket类实现tcp通信

TCP通信: 面向连接,可靠通信 创建客户端程序,使用Socket类 Socket: public Socket(String host, int port) Creates a stream socket and connects it to the specified port number on the named host. 根据指定的服务器ip,…

软件测试——Postman Script脚本功能

Postman作为软件测试里一款非常流行的调试工具,给我们提供了一个执行JavaScript脚本的环境,所以我们可以使用js语言编写脚本来解决一些接口自动化的问题,比如接口依赖、接口断言等等。Postman有Pre-RequestScript和Tests两个编写js脚本的模块…

赛氪网参与第61届中国高等教育博览会,助力产教融合与科教融汇

为深入贯彻党的二十大精神,落实立德树人根本任务,推动高等教育装备现代化,第61届中国高等教育博览会(以下简称“高博会”)于近日在福建省福州市隆重开幕。作为高等教育领域内的综合性品牌博览会,此次高博会…

将MySQL数据库查询结果导出为txt文档,并建成实体类

目录 第一章、功能需求和分析1.1)具体需求1.2)分析需求转为小的问题1、如何获得数据库表的字段?2、如何将数据库查询结果导出?3.将获得的数据库查询结果转为驼峰式4.让AI建个实体类 友情提醒: 先看文章目录,大致了解文…

C语言之文件操作【万字详解】

目录 一.什么是文件? 二.为什么要使用文件? 三.文件的分类 3.1.程序文件 3.2.数据文件 四.二进制文件和文本文件 五.文件的打开和关闭 (重点) 5.1流和标准流 5.1.1何为流? 5.1.2.标准流 5.2文件指针 5.3文件的打开和关…

[Android]Jetpack Compose加载图标和图片

一、加载本地矢量图标 在 Android 开发中使用本地矢量图标是一种常见的做法,因为矢量图标(通常保存为 SVG 或 Android 的 XML vector format)具有可缩放性和较小的文件大小。 在 Jetpack Compose 中加载本地矢量图标可以使用内置的支持&…

ubuntu如何运行python程序

打开LINUX UBUNTU操作系统。 找到左边的TERMINAL,打开窗口。 输入python,如果没有安装,就会提示需要安装。 如果已经安装好python3,直接输入,那么就会进入。 exit()就可以退出python3的模式。 创建一个文件&#xff0c…

java多线程-悲观锁、乐观锁

简介 悲观锁:没有安全感,一上来就直接加锁,每次只能一个线程进入访问,访问完毕之后,再解锁。线程安全,但是性能差。乐观锁:很乐观,一开始不上锁,认为没有问题。等到要出现…

揭秘“磁盘管理未知没有初始化”背后的秘密与应对策略

在日常使用电脑的过程中,我们有时会遇到一个令人头疼的问题——磁盘管理显示“未知没有初始化”。这种情况意味着系统无法正确识别和管理该磁盘,导致我们无法访问其中的数据。那么,究竟什么是“磁盘管理未知没有初始化”?又该如何…

等保测评之主机测评详解(二级)

等保测评之主机测评详解(二级)服务器——Windows 身份鉴别: 测评项a): a)应对登录的用户进行身份标识和鉴别,身份标识具有唯一性,身份鉴别信息具有复杂度要求并定期更换; 整改方…

案例:SpringBoot集成Sharding-JDBC实现分表分库与主从同步(详细版)

案例:SpringBoot集成Sharding-JDBC实现分表分库与主从同步:详细版 1. 案例分析2. 主从同步2.1 主从数据库准备2.2 简单插点数据 3 案例代码3.1 application.properties配置信息3.2 测试 4. 遇到的坑4.1 水平分表时的属性设置4.2 绑定表的配置 1. 案例分析…

C语言为什么没有应用层开发的库

C语言是一门“古老”的语言了,在中大型的应用层项目开发中,C,Java,Python,C# 等其他编程语言能够更好地胜任,为C语言开发应用层的库简直是费力不讨好,所以几乎没人这么做。在开始前我有一些资料,是我根据网友给的问题精…

退役军人档案管理系统|DW-S403是一套成熟系统

退役军人档案管理系统是一种专门用于管理退役军人档案的信息系统,旨在提高退役军人档案的管理效率和利用价值。该系统采用先进的信息技术手段,对退役军人的档案进行全面、精准、高效的管理,为退役军人的就业、社保、优抚安置等提供有力支持。…

FreeRTOS使用中断相关的函数导致程序卡死解决办法

1.现象 想在串口中断中实现任务通知的功能,所以在串口中断服务函数中使用了xTaskGenericNotifyFromISR()函数来发送通知,发现一进入中断服务函数,程序就卡死了。下边是串口初始化和中断服务函数: void Usart_Init_U(…

这届年轻人,对AI对象上头

在AI技术飞速发展的今天,虚拟对象这一概念也流行了起来。从AI女友到AI男友,这些基于人工智能的AI社交应用正在改变我们对情感陪伴的认知。本文深入探讨了AI虚拟对象的兴起、用户需求、商业模式以及技术局限,不妨来看一下。 继2023年文生文大语…

标准版/开源版 移动端新增页面使用文档

在标准版开发的实际使用中,随着用户移动端的产品和信息内容不断增多,新增页面来展示对应的产品详情、模块等内容。针对一些概念或者步骤较多的内容,可以新增子页面构建多级模块结构,帮助用户快速定位。 下面就如何新增页面做一讲…

网际互联及OSI七层模型

1什么是OSI七层模型 2OSI每一个Layer的定义 及用途 3如何使用OSI参考模型分析网络通信过程 一、网际互联 (一)OSI的概念: open system interconnect开放系统互联参考模型,是有ISO(国际标准化组织)定义…

混合现实(MR)技术的应用场景

混合现实(MR)技术将虚拟世界和现实世界融合在一起,用户可以在现实世界中看到和与虚拟物体进行交互,同时还可以感知周围的真实环境。MR技术具有广阔的应用前景,可以应用于各行各业。以下是一些MR的应用场景。北京木奇移…

iOS ------代理 分类 拓展

代理协议 一,概念: 代理,又称委托代理(delegate),是iOS中常用的一种设计模式。顾名思义,它是把某个对象要做的事委托给别的对象去做。那么别的对象就是这个对象的代理,代替它来打理…

Linux部署MySQL8.0—手把手保姆级教程

👩🏽‍💻个人主页:阿木木AEcru 🔥 系列专栏:《Docker容器化部署系列》 《Java每日面筋》 💹每一次技术突破,都是对自我能力的挑战和超越。 目录 一、下载MySQL8.0安装包二、安装MySQ…