零基礎開始學習鴻蒙開發-智能家居APP離線版介紹

1.我的小屋

2.查找設備

3.個人主頁

前言

? ? ? ? 好久不發博文了，最近都忙于面試，忙于找工作，這段時間終于找到工作了。我對鴻蒙開發的激情依然沒有減退，前幾天做了一個鴻蒙的APP，現在給大家分享一下！

? ? ? 具體功能如下圖:

1.我的小屋

? ? ? ??1.1 鎖門:對大門開關鎖的控制

? ? ? ? 1.2設備狀態:展示了某臺設備的詳細信息

? ? ? ? 1.3 控制面板:房門開關、車庫門開關、窗簾開關、燈開關

? ? ? ? 1.4 添加設備:根據設備信息添加設備

我的小屋

鎖門

設備狀態

2.查找設備

? ? ? ? 2.1 搜索:對已經添加的設備進行搜索

? ? ? ? 2.2 搜索歷史:可以查看到搜索過的信息

查找設備

3.個人主頁

? ? 3.1 個人資料:展示個人的資料信息，支持修改

? ? 3.2賬號與安全:包含修改密碼和退出登錄

注冊頁面代碼

// 導入必要的模塊
import router from '@ohos.router';
import Preferences from '@ohos.data.preferences';
import UserBean from '../common/bean/UserBean';// 注冊頁面
@Entry
@Component
struct RegisterPage {@State username: string = '';@State password: string = '';@State confirmPwd: string = '';@State errorMsg: string = '';private prefKey: string = 'userData'private context = getContext(this)// 保存用戶數據（保持原邏輯）async saveUser() {try {let prefs = await Preferences.getPreferences(this.context, this.prefKey)const newUser: UserBean = {// @ts-ignoreusername: this.username,password: this.password}await prefs.put(this.username, JSON.stringify(newUser))await prefs.flush()router.back()} catch (e) {console.error('注冊失敗:', e)}}// 注冊驗證（保持原邏輯）handleRegister() {if (!this.username || !this.password) {this.errorMsg = '用戶名和密碼不能為空'return}if (this.password !== this.confirmPwd) {this.errorMsg = '兩次密碼不一致'return}this.saveUser()}build() {Column() {// 用戶名輸入框TextInput({ placeholder: '用戶名' }).width('80%').height(50).margin({ bottom: 20 }).backgroundColor('#FFFFFF')  // 新增白色背景.onChange(v => this.username = v)// 密碼輸入框// @ts-ignoreTextInput({ placeholder: '密碼', type: InputType.Password }).width('80%').height(50).margin({ bottom: 20 }).backgroundColor('#FFFFFF')  // 新增白色背景.onChange(v => this.password = v)// 確認密碼輸入框// @ts-ignoreTextInput({ placeholder: '確認密碼', type: InputType.Password }).width('80%').height(50).margin({ bottom: 20 }).backgroundColor('#FFFFFF')  // 新增白色背景.onChange(v => this.confirmPwd = v)// 錯誤提示（保持原樣）if (this.errorMsg) {Text(this.errorMsg).fontColor('red').margin({ bottom: 10 })}// 注冊按鈕（保持原樣）Button('注冊', { type: ButtonType.Capsule }).width('80%').height(50).backgroundColor('#007AFF').onClick(() => this.handleRegister())// 返回按鈕（保持原樣）Button('返回登錄', { type: ButtonType.Capsule }).width('80%').height(40).margin({ top: 20 }).backgroundColor('#34C759').onClick(() => router.back())}.width('100%').height('100%').padding(20).justifyContent(FlexAlign.Center).backgroundColor('#1A1A1A')  // 新增暗黑背景色}
}

登錄頁面代碼

// 導入必要的模塊
import router from '@ohos.router';
import Preferences from '@ohos.data.preferences';
import DeviceBean from '../common/bean/DeviceBean';// 用戶數據模型
class User {username: string = '';password: string = '';
}// 登錄頁面
@Entry
@Component
struct LoginPage {@State username: string = '';@State password: string = '';@State errorMsg: string = '';@State deviceList:Array<DeviceBean> =[new DeviceBean(0,'設備1',0,0,0,0,0,0,0,0,0,0,),new DeviceBean(1,'設備2',0,0,0,0,0,0,0,0,0,0,),new DeviceBean(3,'設備3',0,0,0,0,0,0,0,0,0,0,)];private prefKey: string = 'userData'// 獲取本地存儲上下文private context = getContext(this)// 獲取用戶數據async getUser(): Promise<User | null> {try {// @ts-ignorereturn userData ? JSON.parse(userData) : null} catch (e) {console.error('讀取失敗:', e)return null}}// 登錄處理async handleLogin(username:string,password:string,) {if (!this.username || !this.password) {this.errorMsg = '用戶名和密碼不能為空'return}const user = await this.getUser()if ( username == 'admin' && password=='123456') {AppStorage.SetOrCreate("deviceList",this.deviceList);AppStorage.SetOrCreate("signature","金克斯的含義就是金克斯")AppStorage.SetOrCreate("nickName","金克斯")AppStorage.SetOrCreate("nickname","金克斯")AppStorage.SetOrCreate("login_username",this.username)// 登錄成功跳轉主頁router.pushUrl({ url: 'pages/MainPages', params: { username: this.username } })} else {this.errorMsg = '用戶名或密碼錯誤'}}build() {Column() {// 新增歡迎語Text('歡迎登錄智能家庭app').fontSize(24).margin({ bottom: 40 }).fontColor('#FFFFFF') // 白色文字TextInput({ placeholder: '用戶名' }).width('80%').height(50).margin({ bottom: 20 }).onChange(v => this.username = v).fontColor(Color.White).placeholderColor(Color.White)// @ts-ignoreTextInput({ placeholder: '密碼', type: InputType.Password}).fontColor(Color.White).placeholderColor(Color.White).width('80%').height(50).margin({ bottom: 20 }).onChange(v => this.password = v)if (this.errorMsg) {Text(this.errorMsg).fontColor('red').margin({ bottom: 10 })}Button('登錄', { type: ButtonType.Capsule }).width('80%').height(50).backgroundColor('#007AFF').onClick(() => this.handleLogin(this.username,this.password))Button('注冊', { type: ButtonType.Capsule }).width('80%').height(40).margin({ top: 20 }).backgroundColor('#34C759').onClick(() => router.pushUrl({ url: 'pages/RegisterPage' }))}.width('100%').height('100%').padding(20).justifyContent(FlexAlign.Center).backgroundColor('#1A1A1A') // 新增暗黑背景色}
}

主頁代碼

import prompt from '@ohos.prompt';
import { TabID, TabItemList } from '../model/TabItem'
import { DeviceSearchComponent } from '../view/DeviceSearchComponent';
import HouseStateComponent from '../view/HouseStateComponent';
import { MineComponent } from '../view/MineComponent';
import { NotLogin } from '../view/NotLogin';
@Entry
@Component
struct MainPages {@State pageIndex:number = 0;//頁面索引private tabController:TabsController = new TabsController();//tab切換控制器@Builder MyTabBuilder(idx:number){Column(){Image(idx === this.pageIndex ? TabItemList[idx].icon_selected:TabItemList[idx].icon).width(32).height(32)// .margin({top:5})Text(TabItemList[idx].title).fontSize(14).fontWeight(FontWeight.Bold).fontColor(this.pageIndex === idx ? '#006eee':'#888')}}build() {Tabs({barPosition:BarPosition.End}){TabContent(){// Text('小屋狀態')HouseStateComponent()}// .tabBar('小屋狀態').tabBar(this.MyTabBuilder(TabID.HOUSE)) //調用自定義的TabBarTabContent(){// Text('搜索設備')DeviceSearchComponent()//調用設備搜索組件}// .tabBar('搜索設備').tabBar(this.MyTabBuilder(TabID.SEARCH_DEVICE)) //調用自定義的TabBarTabContent(){// Text('我的')MineComponent();//個人主頁// NotLogin()}// .tabBar('我的').tabBar(this.MyTabBuilder(TabID.MINE)) //調用自定義的TabBar}.barWidth('100%').barMode(BarMode.Fixed).width('100%').height('100%').onChange((index)=>{//綁定onChange函數切換頁簽this.pageIndex = index;}).backgroundColor('#000')}
}

我的小屋代碼

import router from '@ohos.router';
import { Action } from '@ohos.multimodalInput.keyEvent';
import DeviceBean from '../common/bean/DeviceBean';
import MainViewModel from '../model/MainViewModel';
import promptAction from '@ohos.promptAction';// 自定義彈窗組件
@CustomDialog
struct SimpleDialog {@State deviceList:Array<DeviceBean> =[new DeviceBean(0,'設備1',0,0,0,0,0,0,0,0,0,0,),new DeviceBean(1,'設備2',0,0,0,0,0,0,0,0,0,0,),new DeviceBean(3,'設備3',0,0,0,0,0,0,0,0,0,0,)];// @ts-ignore@State deviceId: number=1; //設備ID@State name: string=''; //設備名@State temperator: number=25.3; //室內溫度@State humidity: number =20; //室內濕度@State lumination: number =10; //光照@State isRain: number =30; //下雨預警 0:正常 1:觸發報警@State isSmoke: number =0; //煙霧報警 0:正常 1:觸發報警@State isFire: number=0; //火災報警 0:正常 1:觸發報警@State doorStatus: number=0; //門開關狀態 0:正常 1:開啟@State garageStatus: number=0; //車庫門開關 0:正常 1:開啟@State curtainStatus: number=0; //窗簾開關 0:正常 1:開啟@State lightStatus: number=0; //燈開關 0:正常 1:開啟@State  tempDevice: DeviceBean =  new DeviceBean(0,'',0,0,0,0,0,0,0,0,0,0,);tmpMap:Map<string, string> = new Map();controller:CustomDialogController;build() {Column() {// 設備基本信息TextInput({ placeholder: '設備ID（數字）' }).onChange(v => this.tempDevice.deviceId = Number(v))TextInput({ placeholder: '設備名稱' }).onChange(v => this.tempDevice.name = v)// 環境參數/*  TextInput({ placeholder: '溫度（0-100）' }).onChange(v => this.tempDevice.temperator = Number(v))TextInput({ placeholder: '濕度（0-100）' }).onChange(v => this.tempDevice.humidity = Number(v))TextInput({ placeholder: '光照強度' }).onChange(v => this.tempDevice.lumination = Number(v))*/Button('保存').onClick(()=>{promptAction.showToast({message:'保存成功!',duration:2000,})// 添加新設備到列表//this.deviceList = [...this.deviceList, {...this.tempDevice}];console.log(JSON.stringify(this.tempDevice))this.deviceList.push(this.tempDevice); // 關鍵步驟：創建新數組AppStorage.SetOrCreate("deviceList",this.deviceList);this.controller.close()})/*   .onClick(() => {this.deviceList = [...this.deviceList, {// @ts-ignoreid: this.id,name: this.name,}]this.controller.close()})*/}.padding(20)}
}@Component
export default struct HouseStateComponent{private exitDialog() {  }@State handlePopup: boolean = false@State devices: DeviceBean[]=[]// 確保控制器正確初始化private dialogController: CustomDialogController = new CustomDialogController({builder: SimpleDialog(),  // 確認組件正確引用cancel: this.exitDialog,  // 關閉回調autoCancel: true          // 允許點擊外部關閉})@Builder AddMenu(){Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {Column(){Text('掃一掃').fontSize(20).width('100%').height(30).align(Alignment.Center)Divider().width('80%').color('#ccc')Text('添加設備').fontSize(20).width('100%').height(30).align(Alignment.Center).onClick(()=>{this.dialogController.open()})}.padding(5).height(65)}.width(100)}build(){Column({space:8}){Row() {Text('小屋狀態').fontSize(24).fontWeight(FontWeight.Bold).fontColor(Color.White).margin({ top: 10 }).textAlign(TextAlign.Start)Image($r('app.media.jiahao_0')).width(32).height(32).margin({top:10,left:160}).bindMenu(this.AddMenu())Image($r('app.media.news')).fillColor(Color.Black).width(32).height(32).margin({top:10}).onClick(() => {this.handlePopup = !this.handlePopup}).bindPopup(this.handlePopup,{message:'當前暫無未讀消息',})// .onClick({//// })}.width('95%').justifyContent(FlexAlign.SpaceBetween)Divider().width('95%').color(Color.White)Flex({ wrap: FlexWrap.Wrap }){Button()Row() {Shape() {Circle({ width: 60, height: 60 }).fill('#494848').margin({left:15,top:'32%'}).opacity(0.7)Image($r('app.media.lock')).width(30).margin({ left: 30 ,top:'42%'})}.height('100%')Column() {Text('大門').fontSize(25).fontColor('#838383').fontWeight(FontWeight.Bold).margin({ left: 20, top: 0 })Text('已鎖').fontSize(25).fontColor('#838383').fontWeight(FontWeight.Bold).margin({ left: 20, top: 0 })}}.borderRadius(20).backgroundColor('#1c1c1e')// .backgroundImage($r('app.media.Button_img'))// .backgroundImageSize(ImageSize.Cover)// .border({ width: 1 })// .borderColor('#b9b9b9').width('47%').height(160).onClick(()=>{router.pushUrl({url:"house/HomeGate"})})Button()Row() {Shape() {Circle({ width: 60, height: 60 }).fill('#494848').margin({left:15,top:'32%'}).opacity(0.7)Image($r('app.media.Device_icon')).width(30).margin({ left: 30 ,top:'42%'})}.height('100%')Column() {Text('設備').fontSize(25).fontColor('#838383').fontWeight(FontWeight.Bold).margin({ left: 20, top: 0 })Text('狀態').fontSize(25).fontColor('#838383').fontWeight(FontWeight.Bold).margin({ left: 20, top: 0 })}}.onClick(()=>{router.pushUrl({url:"house/DeviceStatus"})}).borderRadius(20).backgroundColor('#1c1c1e').margin({left:20})// .border({ width: 1 })// .borderColor('#b9b9b9').width('47%').height(160)}.width('95%').padding(10)Flex() {Button()Row() {Shape() {Circle({ width: 60, height: 60 }).fill('#494848').margin({ left: 15, top: '32%' }).opacity(0.7)Image($r('app.media.console_1')).width(30).margin({ left: 30, top: '47%' })}.height('100%')Column() {Text('控制').fontSize(25).fontColor('#838383').fontWeight(FontWeight.Bold).margin({ left: 20, top: 0 })Text('面板').fontSize(25).fontColor('#838383').fontWeight(FontWeight.Bold).margin({ left: 20, top: 0 })}}.onClick(() => {router.pushUrl({url: "house/ControlConsole"})}).borderRadius(20).backgroundColor('#1c1c1e')// .border({ width: 1 })// .borderColor('#b9b9b9').width('47%').height(160)}.width('95%').padding(10)}.width('100%').height('100%').backgroundImage($r('app.media.index_background1')).backgroundImageSize(ImageSize.Cover)}
}

設備搜索代碼

import DeviceBean from '../common/bean/DeviceBean'
@Component
export struct DeviceSearchComponent {@State submitValue: string = '' //獲取歷史記錄數據@State allDevices:Array<DeviceBean> =[new DeviceBean(0,'設備1',0,0,0,0,0,0,0,0,0,0,),new DeviceBean(1,'設備2',0,0,0,0,0,0,0,0,0,0,)];@State all_devices:Array<DeviceBean> =AppStorage.Get("deviceList");@State filteredDevices:Array<DeviceBean>=[];controller: SearchController = new SearchController()scroll: Scroller = new Scroller()@State historyValueArr: Array<string> = [] //歷史記錄存放private swiperController: SwiperController = new SwiperController()build() {Column({ space: 8 }) {Row({space:1}){Search({placeholder:'搜索一下',controller: this.controller}).searchButton('搜索').margin(15).width('80%').height(40).backgroundColor('#F5F5F5').placeholderColor(Color.Grey).placeholderFont({ size: 14, weight: 400 }).textFont({ size: 14, weight: 400 }).onSubmit((value: string) => { //綁定 輸入內容添加到submit中this.submitValue = valuefor (let i = 0; i < this.historyValueArr.length; i++) {if (this.historyValueArr[i] === this.submitValue) {this.historyValueArr.splice(i, 1);break;}}this.historyValueArr.unshift(this.submitValue) //將輸入數據添加到歷史數據// 若歷史記錄超過10條，則移除最后一項if (this.historyValueArr.length > 10) {this.historyValueArr.splice(this.historyValueArr.length - 1);}let devices: Array<DeviceBean> = AppStorage.Get("deviceList") as Array<DeviceBean>JSON.stringify(devices);// 增加過濾邏輯this.filteredDevices = devices.filter(item =>item.name.includes(value))})// 搜索結果列表?:ml-citation{ref="7" data="citationList"}//二維碼Scroll(this.scroll){Image($r('app.media.saomiao')).width(35).height(35).objectFit(ImageFit.Contain)}}.margin({top:20})// 輪播圖Swiper(this.swiperController) {Image($r('app.media.lunbotu1' )).width('100%').height('100%').objectFit(ImageFit.Auto)     //讓圖片自適應大小 剛好沾滿// .backgroundImageSize(ImageSize.Cover)Image($r('app.media.lbt2' )).width('100%').height('100%').objectFit(ImageFit.Auto)Image($r('app.media.lbt3' )).width('100%').height('100%').objectFit(ImageFit.Auto)Image($r('app.media.lbt4' )).width('100%').height('100%').objectFit(ImageFit.Auto)Image($r('app.media.tips' )).width('100%').height('100%').objectFit(ImageFit.Auto)}.loop(true).autoPlay(true).interval(5000)    //每隔5秒換一張.width('90%').height('25%').borderRadius(20)// 歷史記錄Row() {// 搜索歷史標題Text('搜索歷史').fontSize('31lpx').fontColor("#828385")// 清空記錄按鈕Text('清空記錄').fontSize('27lpx').fontColor("#828385")// 清空記錄按鈕點擊事件，清空歷史記錄數組.onClick(() => {this.historyValueArr.length = 0;})}.margin({top:30})// 設置Row組件的寬度、對齊方式和內外邊距.width('100%').justifyContent(FlexAlign.SpaceBetween).padding({left: '37lpx',top: '11lpx',bottom: '11lpx',right: '37lpx'})Row(){// 搜索結果列表?:ml-citation{ref="7" data="citationList"}List({ space: 10 }) {if (this.filteredDevices.length===0){ListItem() {Text(`暫時未找到任何設備..`).fontColor(Color.White)}}ForEach(this.filteredDevices, (item: DeviceBean) => {ListItem() {Text(`${item.deviceId} (${item.name})`).fontColor(Color.White)}}, item => item.deviceId)}/* List({ space: 10 }) {ForEach(this.filteredDevices, (item: DeviceBean) => {ListItem() {Text('模擬設備1').fontColor(Color.White)}ListItem() {Text('模擬設備2').fontColor(Color.White)}}, item => item.id)}*/}.margin({top:50,left:30})// 使用Flex布局,包裹搜索歷史記錄Flex({direction: FlexDirection.Row,wrap: FlexWrap.Wrap,}) {// 遍歷歷史記錄數組,創建Text組件展示每一條歷史記錄ForEach(this.historyValueArr, (item: string, value: number) => {Text(item).padding({left: '15lpx',right: '15lpx',top: '7lpx',bottom: '7lpx'})// 設置背景顏色、圓角和間距.backgroundColor("#EFEFEF").borderRadius(10)// .margin('11lpx').margin({top:5,left:20})})}// 設置Flex容器的寬度和內外邊距.width('100%').padding({top: '11lpx',bottom: '11lpx',right: '26lpx'})}.width('100%').height('100%')// .backgroundColor('#f1f2f3').backgroundImage($r('app.media.index_background1')).backgroundImageSize(ImageSize.Cover)}
}
// }

個人主頁代碼

import router from '@ohos.router';
import promptAction from '@ohos.promptAction';
import UserBean from '../common/bean/UserBean';
import { InfoItem, MineItemList } from '../model/MineItemList';
@Entry
@Component
export struct MineComponent{@State userBean:UserBean = new UserBean()@State nickname:string = this.userBean.getNickName();//昵稱@State signature:string = this.userBean.getSignature();//簽名build(){Column() {Image($r('app.media.user_avtar1')).width('100%').height('25%').opacity(0.5)Column() {Shape() {Circle({ width: 80, height: 80 }).fill('#3d3f46')Image($r('app.media.user_avtar1')).width(68).height(68).margin({ top: 6, left: 6 }).borderRadius(34)}Text(`${this.nickname}`).fontSize(18).fontWeight(FontWeight.Bold).fontColor(Color.White)Text(`${this.signature}`).fontSize(14).fontColor(Color.Orange)}.width('95%').margin({ top: -34 })//功能列表Shape() {Rect().width('100%').height(240).fill('#3d3f46').radius(40).opacity(0.5)Column() {List() {ForEach(MineItemList, (item: InfoItem) => {ListItem() {// Text(item.title)Row() {Row() {Image(item.icon).width(30).height(30)if (item.title == '個人資料') {Shape() {Rect().width('80%').height(30).opacity(0)Text(item.title).fontSize(22).fontColor(Color.White).margin({ left: 10 })}.onClick(() => {router.pushUrl({url:"myhomepage/PersonalData"})})}else if (item.title == '賬號與安全') {Shape() {Rect().width('80%').height(30).opacity(0)Text(item.title).fontSize(22).fontColor(Color.White).margin({ left: 10 })}.onClick(() => {router.pushUrl({url:"myhomepage/AccountSecurity"})})}else if (item.title == '檢查更新') {Shape() {Rect().width('80%').height(30).opacity(0)Text(item.title).fontSize(22).fontColor(Color.White).margin({ left: 10 })}.onClick(()=>{promptAction.showToast({message:"當前暫無更新",duration:2000,})})}else if (item.title == '關于') {Shape() {Rect().width('80%').height(30).opacity(0)Text(item.title).fontSize(22).fontColor(Color.White).margin({ left: 10 })}.onClick(()=>{promptAction.showToast({message:"當前版本為1.0.0",duration:2000,})})}else{Text(item.title).fontSize(22).fontColor(Color.White).margin({ left: 10 })}}Image($r('app.media.right')).width(38).height(38)}.width('100%').height(52).justifyContent(FlexAlign.SpaceBetween)}// .border({//   width: { bottom: 1 },//   color: Color.Orange// })}, item => JSON.stringify(item))}.margin(10).border({radius: {topLeft: 24,topRight: 24}})// .backgroundColor('#115f7691').width('95%')// .height('100%').margin({ top: '5%', left: '5%' })}}.margin({ top: 20 }).width('90%')}.width('100%').height('100%').backgroundImage($r('app.media.index_background1')).backgroundImageSize(ImageSize.Cover)}
}

感謝大家的閱讀和點贊，你們的支持是我前進的動力，我會繼續保持熱愛，貢獻自己的微薄碼力！

’

????????