小说网,怎样写网络小说,绝色狂妃仙魅小说

應(yīng)用場景簡介

智能家居。

今天打造的這一款全新智能家庭控制系統(tǒng)，凸顯應(yīng)用在智能控制和用戶體驗的特點，開創(chuàng)國內(nèi)智能家居系統(tǒng)體驗新局面。新的系統(tǒng)主要應(yīng)用在鴻蒙生態(tài)。

工程版本

系統(tǒng)版本/API版本：OpenHarmony SDK API 8
IDE版本：DevEco Studio 3.0 Beta4

快速上手

準(zhǔn)備硬件環(huán)境

[獲取OpenHarmony系統(tǒng)版本]：標(biāo)準(zhǔn)系統(tǒng)解決方案（二進(jìn)制）
[搭建標(biāo)準(zhǔn)系統(tǒng)環(huán)境]
[完成Dayu200開發(fā)板的燒錄]

準(zhǔn)備開發(fā)環(huán)境

安裝最新版[DevEco Studio]。
請參考[配置OpenHarmony SDK]，完成DevEco Studio的安裝和開發(fā)環(huán)境配置。
開發(fā)環(huán)境配置完成后，請參考[使用工程向?qū) 創(chuàng)建工程（模板選擇“Empty Ability”），選擇eTS語言開發(fā)。
工程創(chuàng)建完成后，選擇使用[真機(jī)進(jìn)行調(diào)測]。
HarmonyOS與OpenHarmony鴻蒙文檔籽料：mau123789是v直接拿

準(zhǔn)備工程

工程下載

git clone https://gitee.com/openharmony-sig/knowledge_demo_smart_home.git --depth=1

工程導(dǎo)入

DevEco Studio導(dǎo)入本工程;
打開DevEco Studio,點擊File->Open->下載路徑/FA/SmartHomeCenter

編譯

點擊File > Project Structure > Project > Signing Configs界面勾選“ Automatically generate signing ”，等待自動簽名完成即可，點擊“ OK ”。如下圖所示：

點擊Build->Build Hap/APPs 編譯，編譯成功生成entry-debug-rich-signed.hap

燒錄/安裝

識別到設(shè)備后點擊，或使用默認(rèn)快捷鍵Shift+F10（macOS為Control+R)運行應(yīng)用。

[安裝應(yīng)用]如果IDE沒有識別到設(shè)備就需要通過命令安裝，如下
打開OpenHarmony SDK路徑 toolchains 文件夾下，執(zhí)行如下hdc_std命令，其中path為hap包所在絕對路徑。
```
hdc_std install -r pathentry-debug-rich-signed.hap//安裝的hap包需為xxx-signed.hap，即安裝攜帶簽名信息的hap包。
```

好的接下來我將詳細(xì)講解如何制作

開發(fā)教學(xué)

創(chuàng)建好的 eTS工程目錄

新建工程的ETS目錄如下圖所示。

各個文件夾和文件的作用：

index.ets ：用于描述UI布局、樣式、事件交互和頁面邏輯。
app.ets ：用于全局應(yīng)用邏輯和應(yīng)用生命周期管理。
pages ：用于存放所有組件頁面。
resources ：用于存放資源配置文件。

接下來開始正文。

我們的主要操作都是在在pages目錄中，然后我將用不到10分鐘的時間，帶大家實現(xiàn)這個功能。

鴻蒙開發(fā)參考指導(dǎo)文件

鴻蒙開發(fā)指導(dǎo)文檔：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]

搜狗高速瀏覽器截圖20240326151450.png

拆解

根據(jù)設(shè)計圖，我們可以分層展示，用Column包裹，大致分為這幾步

可以看下本頁的結(jié)構(gòu)：

再詳細(xì)一點：

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

@Entry
@Component
struct Index {
  @State title: string = '智能家居體驗'
  @State message: string = '你現(xiàn)在想要打開那些設(shè)置？'
  @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: "MaintenancenRequests",
            isSelected: this.isSelect!
          })

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

          SettingDetails({
            image: "common/images/ic_highlight.png",
            title: "LightnControl",
            isSelected: this.isSelect!
          })
        }
        Row() {
          SettingDetails({ image: "common/images/opacity.png", title: "LeaknDetector", isSelected: this.isSelect! })
          SettingDetails({
            image: "common/images/ac_unit.png",
            title: "TemperaturenControl",
            isSelected: this.isSelect!
          })
          SettingDetails({ image: "common/images/key.png", title: "GuestnAccess", 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")
  }
}

具體布局

具體布局設(shè)計到一些細(xì)節(jié)的地方，例如間隔，邊框，當(dāng)前組件尺寸設(shè)置等一些特殊情況，基本上就是嵌套，一層一層去實現(xiàn)。

代碼結(jié)構(gòu)

編碼

Index.ets

import { SettingDetails } from './common/SettingDetails';
import router from '@ohos.router';
@Entry
@Component
struct Index {
  @State title: string = '智能家居體驗'
  @State message: string = '你現(xiàn)在想要打開那些設(shè)置？'
  @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: "MaintenancenRequests",
            isSelected: this.isSelect!
          })
          SettingDetails({ image: "common/images/grain.png", title: "Integrationsn", isSelected: this.isSelect! })

          SettingDetails({
            image: "common/images/ic_highlight.png",
            title: "LightnControl",
            isSelected: this.isSelect!
          })
        }
        Row() {
          SettingDetails({ image: "common/images/opacity.png", title: "LeaknDetector", isSelected: this.isSelect! })
          SettingDetails({
            image: "common/images/ac_unit.png",
            title: "TemperaturenControl",
            isSelected: this.isSelect!
          })
          SettingDetails({ image: "common/images/key.png", title: "GuestnAccess", 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")
  }
}

針對這一頁：首先是頭部

代碼如下：

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)
        }
      }

接下來就是溫度和濕度

代碼如下：

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")
  }
}

我們可以對下面的這塊進(jìn)行封裝

代碼如下

@Entry
@Component
export struct SettingDetails {
  @State  private image: string = "common/images/setting.png"
  @State  private title: string = "MaintenancenRequests"
  @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)
  }
}}

我們可以對，下面的這塊進(jìn)行封裝

代碼如下

@Entry
@Component
export struct SettingDetails {
  @State  private image: string = "common/images/setting.png"
  @State  private title: string = "MaintenancenRequests"
  @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)
  }
}}

最后就是底部

代碼如下：

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)

審核編輯黃宇

聲明：本文內(nèi)容及配圖由入駐作者撰寫或者入駐合作網(wǎng)站授權(quán)轉(zhuǎn)載。文章觀點僅代表作者本人，不代表電子發(fā)燒友網(wǎng)立場。文章及其配圖僅供工程師學(xué)習(xí)之用，如有內(nèi)容侵權(quán)或者其他違規(guī)問題，請聯(lián)系本站處理。舉報投訴

智能家居

智能家居

+關(guān)注

關(guān)注
1928

文章
9562

瀏覽量
185118
鴻蒙

鴻蒙

+關(guān)注

關(guān)注
57

文章
2352

瀏覽量
42858
OpenHarmony

OpenHarmony

+關(guān)注

關(guān)注
25

文章
3722

瀏覽量
16317

OpenHarmony應(yīng)用場景鴻蒙智能家居【1.0】

的效果。 智能家居中控是不是很炫酷呢？ ? 搭建OpenHarmony環(huán)境完成本篇Codelab我們首先要完成開發(fā)環(huán)境的搭建，本示例以 DaYu200 開發(fā)板為例，參照以下步驟進(jìn)行

發(fā)表于 07-13 09:24 ?3733次閱讀

<b class='flag-5'>OpenHarmony</b>應(yīng)用場景鴻蒙<b class='flag-5'>智能家居</b>【1.0】

想做智能家居中的燈光控制

各位大神，本人打算做畢業(yè)設(shè)計，想做智能家居中的燈光控制，請問有沒有好的Idea介紹呢？求指點啊，謝謝

發(fā)表于 12-18 16:34

【Tisan物聯(lián)網(wǎng)申請】基于WiFi的智能家居中央控制

申請理由：開發(fā)板適合工程要求，碩士研究生畢業(yè)，從事智能監(jiān)測設(shè)備開發(fā)，智能家居 智能電網(wǎng) 智慧城市項目開發(fā)

發(fā)表于 11-16 11:17

【orangepi zero申請】智能家居中繼器

項目名稱：智能家居中繼器試用計劃：1，作為智能家居的中繼器，向下鏈接各種傳感器板，向上連接服務(wù)器，以便實現(xiàn)數(shù)據(jù)的管理與中轉(zhuǎn)2，之前實用樹莓派完成了，由于成本原因，考慮換一個性價比更高的替代板

發(fā)表于 12-27 11:16

【NXP LPC54110試用申請】智能家居中控系統(tǒng)

。項目計劃1、閱讀文檔，對此款開發(fā)板有一個大概認(rèn)識；2、學(xué)習(xí)例子程序，熟悉開發(fā)過程3、結(jié)合開發(fā)板，學(xué)習(xí)語音處理模塊4、完成外圍傳感器的控制4、完成智能家居控制，如風(fēng)扇轉(zhuǎn)速，臺燈明亮調(diào)節(jié)

發(fā)表于 07-31 18:12

【HarmonyOS HiSpark AI Camera】智能家居中控系統(tǒng)

項目名稱：智能家居中控系統(tǒng)試用計劃：申請理由本人在物聯(lián)網(wǎng)和智能家居領(lǐng)域有十年多的學(xué)習(xí)和開發(fā)經(jīng)驗，曾設(shè)參與多個物聯(lián)網(wǎng)和智能家居項目的開發(fā)，對物

發(fā)表于 11-18 18:12

WiFi模塊智能開關(guān)在智能家居中的應(yīng)用是什么？

WiFi模塊智能開關(guān)在智能家居中的應(yīng)用是什么？

發(fā)表于 05-18 06:13

ISM頻段在物聯(lián)網(wǎng)智能家居中的應(yīng)用是什么

物聯(lián)網(wǎng)智能家居的發(fā)展物聯(lián)網(wǎng)隨著互聯(lián)網(wǎng)的發(fā)展，可以通過互聯(lián)網(wǎng)實現(xiàn)物和物的互聯(lián)，就有了物聯(lián)網(wǎng)的概念。傳統(tǒng)家居電器有了物聯(lián)網(wǎng)之后，在家居電器范圍中，就是通過物聯(lián)網(wǎng)技術(shù)將家中的各種設(shè)備連接到一起，家

發(fā)表于 07-26 07:43

物聯(lián)網(wǎng)在智能家居中的應(yīng)用案例

物聯(lián)網(wǎng)在智能家居中的應(yīng)用案例，介紹了物聯(lián)網(wǎng)在未來智能家居系統(tǒng)中能夠提供的平臺和手段。

發(fā)表于 03-04 14:46 ?14次下載

智能家居中的無線技術(shù)解析

在物聯(lián)網(wǎng)蓬勃發(fā)展的浪潮下，智能家居的熱度也隨之不斷升溫。由于智能家居的安全、節(jié)能、舒適、便利、高效等諸多特點，越來越多的客戶開始接受和開發(fā)智能家居單品和系統(tǒng)。在中國推廣Zigbee技術(shù)

發(fā)表于 08-21 10:30 ?2140次閱讀

中軟國際智能家居中控屏通過OpenHarmony兼容性測評

近日，中軟國際有限公司（以下簡稱“中軟國際”）推出的智能家居中控屏順利通過OpenAtom OpenHarmony （以下簡稱“OpenHarmony”） 3.1 Release版本兼容性測評

發(fā)表于 12-26 20:20 ?1448次閱讀

智能家居中的虛擬助手

電子發(fā)燒友網(wǎng)站提供《智能家居中的虛擬助手.zip》資料免費下載

發(fā)表于 01-05 09:24 ?1次下載

工業(yè)交換機(jī)在智能家居中的關(guān)鍵應(yīng)用

隨著科技的不斷進(jìn)步和智能家居概念的不斷普及，人們對于家居生活的要求也越來越高。而工業(yè)交換機(jī)作為一個重要的網(wǎng)絡(luò)設(shè)備，可以在智能家居中發(fā)揮關(guān)鍵作用。本文將詳細(xì)介紹工業(yè)交換機(jī)在智能家居中的應(yīng)

發(fā)表于 10-13 10:49 ?849次閱讀

鴻蒙NEXT南向開發(fā)案例：【智能臺燈】

鴻蒙南向開發(fā)之智能臺燈案例

發(fā)表于 04-03 18:00 ?1009次閱讀

OpenHarmony南向開發(fā)案例：【智能中控屏】

基于Hi3516開發(fā)板，使用開源OpenHarmony開發(fā)的應(yīng)用。通過控制面板可以控制同一局域網(wǎng)內(nèi)的空調(diào)，窗簾，燈等智能家居設(shè)備。

發(fā)表于 04-17 16:12 ?389次閱讀

在线观看www成人影院-在线观看www日本免费网站-在线观看www视频-在线观看操-欧美18在线-欧美1级

搜索歷史

OpenHarmony南向開發(fā)案例：【智能家居中控】

應(yīng)用場景簡介

工程版本

快速上手

準(zhǔn)備硬件環(huán)境

準(zhǔn)備開發(fā)環(huán)境

準(zhǔn)備工程

工程下載

工程導(dǎo)入

編譯

燒錄/安裝

開發(fā)教學(xué)

創(chuàng)建好的 eTS工程目錄

鴻蒙開發(fā)參考指導(dǎo)文件

拆解

具體布局

代碼結(jié)構(gòu)

編碼

Index.ets

SensorScreen.ets

評論

OpenHarmony應(yīng)用場景鴻蒙智能家居【1.0】

想做智能家居中的燈光控制

【Tisan物聯(lián)網(wǎng)申請】基于WiFi的智能家居中央控制

【orangepi zero申請】智能家居中繼器

【NXP LPC54110試用申請】智能家居中控系統(tǒng)

【HarmonyOS HiSpark AI Camera】智能家居中控系統(tǒng)

WiFi模塊智能開關(guān)在智能家居中的應(yīng)用是什么？

ISM頻段在物聯(lián)網(wǎng)智能家居中的應(yīng)用是什么

物聯(lián)網(wǎng)在智能家居中的應(yīng)用案例

智能家居中的無線技術(shù)解析

中軟國際智能家居中控屏通過OpenHarmony兼容性測評

智能家居中的虛擬助手

工業(yè)交換機(jī)在智能家居中的關(guān)鍵應(yīng)用

鴻蒙NEXT南向開發(fā)案例：【智能臺燈】

OpenHarmony南向開發(fā)案例：【智能中控屏】

搜索歷史

OpenHarmony南向開發(fā)案例：【 智能家居中控】

應(yīng)用場景簡介

工程版本

快速上手

準(zhǔn)備硬件環(huán)境

準(zhǔn)備開發(fā)環(huán)境

準(zhǔn)備工程

工程下載

工程導(dǎo)入

編譯

燒錄/安裝

開發(fā)教學(xué)

創(chuàng)建好的 eTS工程目錄

鴻蒙開發(fā)參考指導(dǎo)文件

具體布局

代碼結(jié)構(gòu)

編碼

Index.ets

SensorScreen.ets

評論

OpenHarmony南向開發(fā)案例：【智能家居中控】