基于以上行业分析，本期将介绍鸿蒙生态市场房产装修类行业模板——智慧家居应用模板，为行业提供常用功能的开发案例，构建了一款包含设备添加、设备管理的智能家居应用，并构建了设备模拟端，实现与该模板的蓝牙、MQTT交互，从而整体功能的闭环展示。
为支持开发者单独获取特定场景的页面和功能，本模板将功能完全自闭环的部分能力抽离出独立的行业组件模块，不依赖公共基础能力包，开发者可以单独集成，开箱即用，降低使用难度。
├─commons // 公共层
│ ├─external_interactions // 外部交互
│ │ └─src
│ │ └─main
│ │ └─ets
│ │ RemoteProxyModel.ets // 代理后端
│ │
│ ├─uicomponents // 公共UI组件
│ │ └─src
│ │ └─main
│ │ └─ets
│ │ AccessSettingBarView.ets // 应用权限设置bar视图
│ │ CommonBarView.ets // 公共bar视图
│ │ DeviceBaseInfoView.ets // 设备基本信息视图，图片+名字
│ │ ImageSettingBarView.ets // 图片设置bar视图，例如设置头像
│ │ NavBarListView.ets // 导航bar列表视图，用于我的页面
│ │ NavBarView.ets // 单个导航bar视图
│ │ SettingBarView.ets // 设置bar视图，供图片、文字设置bar使用
│ │ TextBarView.ets // 展示文字的bar视图
│ │ TextSettingBarView.ets // 文字设置bar视图，例如设备名称
│ │ TextShowBarView.ets // 文字显示bar视图，例如账号信息
│ │
│ └─utils // 公共功能
│ └─src
│ └─main
│ └─ets
│ Constants.ets // 常量定义
│ LogUtil.ets // 日志
│ ObserverMngModel.ets // 观察者模式，供viewModel层订阅model层数据
│ StorageUtil.ets // 数据存储
│ Tools.ets // 小工具
│
├─features // 特性层
│ ├─device_add // 设备添加特性
│ │ └─src
│ │ └─main
│ │ └─ets
│ │ ├─model // model层
│ │ │ BleClientModel.ets // ble客户端模型，包括ble扫描、连接等
│ │ │ GetWifiInfoModel.ets // 获取周边wifi信息模型
│ │ │
│ │ ├─pages // page页
│ │ │ AddDevicePage.ets // 添加设备页
│ │ │ AddInstructionPage.ets // 添加指导页
│ │ │ ConfigDevicePage.ets // 配置设备页
│ │ │ ManualAddPage.ets // 手动添加设备页
│ │ │ SearchDevicePage.ets // 搜索设备页
│ │ │ SelectWifiPage.ets // 设置wifi页
│ │ │
│ │ ├─view // view层
│ │ │ AddButtonView.ets // 扫码添加/手动添加视图
│ │ │ AddEntryView.ets // 添加设备的+号视图
│ │ │ BleScannedDevicesView.ets // ble扫描出的设备展示视图
│ │ │ BleScanView.ets // ble扫描视图
│ │ │ TwoLevelListView.ets // 二级联动列表视图
│ │ │
│ │ └─viewmodel // viewModel层
│ │ AddDeviceViewModel.ets // 添加设备视图模型
│ │ AddInstructionViewModel.ets // 添加指导视图模型
│ │ BleScanViewModel.ets // ble扫描视图模型
│ │ ConfigDeviceViewModel.ets // 配置设备视图模型
│ │ ProductListViewModel.ets // 手动添加页的商品列表视图模型
│ │ SearchDeviceViewModel.ets // 搜索设备视图模型
│ │ SelectWifiViewModel.ets // 设置wifi视图模型
│ │
│ ├─device_mng // 设备管理特性
│ │ └─src
│ │ └─main
│ │ └─ets
│ │ ├─model // model层
│ │ │ AddedDevicesModel.ets // 设备管理模型
│ │ │ MqttClientModel.ets // mqtt客户端模型
│ │ │ WebInteractModel.ets // ets与h5交互模型
│ │ │
│ │ ├─pages // page页
│ │ │ BaseSettingPage.ets // 设备基本信息设置页
│ │ │ DeviceDetailPage.ets // 设备详细页
│ │ │ DeviceNotifyListPage.ets // 单设备的通知消息列表页
│ │ │ DevicesNotifyPage.ets // 所有设备的最新通知消息页
│ │ │
│ │ ├─view // view层
│ │ │ DeviceCardView.ets // 首页的设备卡片视图
│ │ │ DeviceCommonInfoView.ets // 设备详情页中的设备公共信息视图
│ │ │ DeviceNotifyListView.ets // 设备通知消息列表视图
│ │ │ DevicePrivateInfoView.ets // 设备详情页中的设备私有信息视图
│ │ │ DevicesNotifyView.ets // 所有设备的最新通知消息视图
│ │ │ NotifyEntryView.ets // 用于首页的通知图标视图
│ │ │
│ │ └─viewmodel // viewModel层
│ │ BaseSettingViewModel.ets // 设备基本信息设置视图模型
│ │ DeviceCardViewModel.ets // 单个设备卡片视图模型
│ │ DeviceDetailViewModel.ets // 设备详细视图模型
│ │ DeviceNotifyListViewModel.ets // 设备通知消息列表视图模型
│ │ DevicesCardsViewModel.ets // 所有设备卡片的视图模型
│ │ DevicesNotifyViewModel.ets // 所有设备的最新通知消息视图模型
│ │ NotifyEntryViewModel.ets // 用于首页的通知图标视图模型
│ │
│ └─device_service // 设备服务特性
│ └─src
│ └─main
│ └─ets
│ ├─model // model层
│ │ ErrorCodeEntity.ets // 登录错误码
│ │ PersonalInfoModel.ets // 个人信息模型
│ │
│ ├─pages // page页
│ │ AboutUsPage.ets // 关于我们页
│ │ AdviceFeedbackPage.ets // 意见反馈页
│ │ HelpCenterPage.ets // 帮助中心页
│ │ PersonalCenterPage.ets // 个人中心页
│ │ PrivacyPolicyPage.ets // 隐私政策页
│ │ QuickLoginPage.ets // 快速登录页
│ │ TermsOfServicePage.ets // 用户协议页
│ │
│ ├─view // view层
│ │ AgreementView.ets // 用于登录页的同意对话框
│ │ PersonalProfileView.ets // 个人头像/昵称视图
│ │ PersonalTitleView.ets // 个人标题，首页左上角
│ │
│ └─viewmodel // viewModel层
│ AdviceFeedbackViewModel.ets // 意见反馈视图模型
│ PersonalCenterViewModel.ets // 个人中心视图模型
│ PersonalProfileViewModel.ets // 个人头像/昵称视图模型
│ PersonalTitleViewModel.ets // 个人标题视图模型
│
├─products // 产品层
│ └─phone // 手机
│ └─src
│ └─main
│ └─ets
│ ├─pages // page页
│ │ AccessControlPage.ets // 权限管理页
│ │ HomePage.ets // 首页
│ │ Index.ets // Index
│ │ MinePage.ets // 我的
│ │ ProductPage.ets // 产品
│ ├─phoneability
│ │ PhoneAbility.ets // 应用主窗口
│ │
│ ├─phoneformability
│ │ PhoneFormAbility.ets // 设备桌面卡片
│ │
│ ├─view // view层
│ │ DevicesCardsView.ets // 首页的设备卡片视图
│ │
│ ├─viewmodel // viewModel层
│ │ AccessControlViewModel.ets // 权限管理视图模型
│ │ HomeViewModel.ets // 首页视图模型
│ │ ProductViewModel.ets // 产品视图模型
│ │
│ └─widget
│ └─pages
│ WidgetCard.ets // 桌面设备卡片
│
└─test // 测试相关
└─device_simulation // 设备模拟
└─src
└─main
└─ets
├─device_simulationability
│ Device_simulationAbility.ets // 设备模拟窗口
├─model // model层
│ ArrayBufferUtils.ets // ArrayBuffer处理
│ BleServerModel.ets // ble服务端模型
│ LogUtil.ets // 日志
│ MqttClientModel.ets // mqtt客户端模型
│
└─pages // page页
Index.ets // Index
将commons/lib_common/src/main/ets/httprequest/HttpRequestApi.ets文件中的mock接口替换为真实的服务器接口。
在commons/lib_common/src/main/ets/httprequest/HttpRequest.ets文件中将云侧开发者自定义的数据结构转换为端侧数据结构。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。