零基础开始学习鸿蒙开发-智能家居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)}
}

感谢大家的阅读和点赞，你们的支持 是我前进的动力，我会继续保持热爱，贡献自己的微薄码力！

’