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

server/2024/9/23 12:20:36/

 

 应用场景简介

  • 智能家居。

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

工程版本

  • 系统版本/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 万款的应用。那么这么多的应用需要开发，也就意味着需要有更多的鸿蒙人才。鸿蒙开发>鸿蒙开发工程师也将会迎来爆发式的增长，学习鸿蒙势在必行！
 

 












http://www.ppmy.cn/server/12158.html












相关文章










探索设计模式的魅力：主从模式与AI大模型的结合-开启机器学习新纪元









探索设计模式的魅力：主从模式与AI大模型的结合-开启机器学习新纪元




​🌈 个人主页：danci_ 🔥 系列专栏：《设计模式》 💪🏻 制定明确可量化的目标，坚持默默的做事。 ✨欢迎加入探索主从模式与AI大模型之旅✨     🌟Hey, tech enthusiasts! 你是否还在追…




阅读更多...

















动态创建链表 与头插法 和头插法的优化









动态创建链表 与头插法 和头插法的优化




1.代码一 
思想：在main函数中实行三次头插法，在insertFromHead（）函数中，主要创建新的节点new，开辟空间，输入想要增加的data；根据头节点的情况来判断插入， 
如果head  NUL…




阅读更多...

















【贪心算法】Leetcode 55. 跳跃游戏【中等】









【贪心算法】Leetcode 55. 跳跃游戏【中等】




跳跃游戏 
给你一个非负整数数组 nums ，你最初位于数组的 第一个下标 。数组中的每个元素代表你在该位置可以跳跃的最大长度。 
判断你是否能够到达最后一个下标，如果可以，返回 true ；否则，返回 false 。 
示例 1&…




阅读更多...

















Android视角看鸿蒙第十二课-鸿蒙的布局之相对布局RelativeContainer









Android视角看鸿蒙第十二课-鸿蒙的布局之相对布局RelativeContainer




Android视角看鸿蒙第十二课-鸿蒙的布局之相对布局RelativeContainer 
导读 
相对布局和线性、层叠布局一样都是类似于Android布局的，之前两篇文章已经了解线性、层叠布局的使用方法，这篇文章一起来学习下鸿蒙中的相对布局。 之前的文章中，我偶…




阅读更多...

















MySQL的数据类型









MySQL的数据类型




以下是 MySQL 中一些常见的数据类型及其相关信息： 
INT：整数类型，有不同的长度，如 INT(4) 表示 4 字节整数，取值范围为 -2147483648 到 2147483647。BIGINT：大整数类型，8 字节，取值范…




阅读更多...

















前端预处理器-stylus入门使用方法









前端预处理器-stylus入门使用方法




Stylus是一款支持多样性的CSS预处理器，它的语法和普通的CSS有些不同，但更为简洁和灵活。以下是Stylus的入门使用方法： 安装Stylus：首先，你需要安装Node.js，这是运行Stylus的基础。然后，使用npm&…




阅读更多...

















【java毕业设计】 基于Spring Boot+mysql的免税商品优选购物商城设计与实现（程序源码）-免税商品优选购物商城









【java毕业设计】 基于Spring Boot+mysql的免税商品优选购物商城设计与实现（程序源码）-免税商品优选购物商城




基于Spring Bootmysql的免税商品优选购物商城设计与实现（程序源码毕业论文） 大家好，今天给大家介绍基于Spring Bootmysql的免税商品优选购物商城设计与实现，本论文只截取部分文章重点，文章末尾附有本毕业设计完整源码及…




阅读更多...

















小程序AI智能名片S2B2C商城系统：解锁内容深耕新境界，助力品牌企业高效定制内容策略









小程序AI智能名片S2B2C商城系统：解锁内容深耕新境界，助力品牌企业高效定制内容策略




在数字化时代，内容营销已成为品牌企业获取市场份额、增强用户黏性的关键武器。然而，面对海量的互联网信息和复杂多样的社交媒体平台，如何有效地深耕内容，成为众多品牌企业面临的难题。 传统的内容分类与识别方式，往往依…




阅读更多...















 
 
 
 










最新文章







 





















Copyright @ 2022~2023