设备控制 UI 业务包

进行UI设计培训，提升UI设计师职业技能。 #生活技巧# #工作学习技巧# #技能证书培训#

设备控制 UI 业务包是涂鸦智能设备控制面板的免开发维护、且具备动态更新的面板控制解决方案。在智能生活 App SDK 的基础上，设备控制 UI 业务包提供一套完整的面板加载展示、设备控制的能力。您无需额外开发，接入 UI 业务包即可使用。涂鸦提供两种技术方案，即 RN 面板 和 小程序面板。下文是关于 RN 面板的接入文档，如果要使用小程序面板方案，参考 小程序接入文档。

准备工作

在 Android Studio 中建立您的工程，接入 智能生活 App SDK 和添加 UI 业务包框架，完成相关资源的引入及初始化工作。详情请参考 接入框架。

另外，您可以在 GitHub 下载 UI 业务包 Demo，修改 Demo 中的 Panel 模块的依赖来调试设备控制 UI 业务包，以及参考其中 app 模块的配置。

接入配置

必选配置

dependencies { api enforcedPlatform("com.thingclips.smart:thingsmart-BizBundlesBom:${biz_bom_version}") //设备控制业务包-必选 implementation 'com.thingclips.smart:thingsmart-bizbundle-panel' //基础扩展能力-必选 implementation "com.thingclips.smart:thingsmart-bizbundle-basekit" //业务扩展能力-必选 implementation "com.thingclips.smart:thingsmart-bizbundle-bizkit" //设备控制相关能力-必选 implementation "com.thingclips.smart:thingsmart-bizbundle-devicekit" api "com.thingclips.smart:thingsmart:${sdk_version}}" }

可选配置

多媒体扩展能力

implementation "com.thingclips.smart:thingsmart-bizbundle-mediakit"

家庭服务相关依赖

家庭也是场景智能执行的最大单位。家庭服务主要包括家庭管理、成员管理、房间管理等业务，是对配网后的设备进行管理的基础条件。设备在配网后可设置家庭中设备所处的房间，同时，家庭下拥有不同权限的家庭成员对应着不同的操作权限。

implementation "com.thingclips.smart:thingsmart-bizbundle-family"

IPC 面板相关依赖项

此依赖包含加载 IPC 面板所需的所有相关依赖。如您无需 IPC 面板，不建议添加此依赖。如非必要而引入，会增加资源冲突的风险，同时也会增大 APK 包的体积。

implementation 'com.thingclips.smart:thingsmart-bizbundle-camera_panel'

地图相关依赖项

设备控制 UI 业务包中包含地图能力相关 API，底层通过接入第三方库来实现。

地图扩展能力

implementation "com.thingclips.smart:thingsmart-bizbundle-mapkit"

高德地图依赖项

中国大陆地区业务只能依赖高德地图。基于设备控制 UI 业务包开发的 App，如果需要发布在中国大陆应用市场，请选择依赖高德地图。

implementation 'com.thingclips.smart:thingsmart-react-native-amap:5.5.0' implementation 'com.amap.api:search:7.9.0' implementation 'com.amap.api:3dmap:8.1.0'

谷歌地图依赖项

其他国家或地区业务只能依赖谷歌地图。基于设备控制 UI 业务包开发的 App，如果需要发布在其他国家或地区，请选择依赖谷歌地图。

implementation 'com.thingclips.smart:thingsmart-react-native-googlemap:4.8.2' implementation 'com.google.android.gms:play-services-maps:18.0.0'

RN 面板调试依赖项

当需要调试 RN 面板时，可以依赖以下组件。建议在 release 包中移除这些依赖。

implementation "com.thingclips.android.debugtool:thing_panel_tool:1.0.0"

业务包环境配置

混淆配置

在项目的 proguard-rules.pro 文件中，请您配置设备控制 UI 业务包混淆信息，以确保其能正常运行。

# react-native -keep,allowobfuscation @interface com.facebook.common.internal.DoNotStrip -keep,allowobfuscation @interface com.facebook.proguard.annotations.DoNotStrip -keep,allowobfuscation @interface com.facebook.proguard.annotations.KeepGettersAndSetters # Do not strip any method/class that is annotated with @DoNotStrip -keep @com.facebook.proguard.annotations.DoNotStrip class * -keep @com.facebook.common.internal.DoNotStrip class * -keepclassmembers class * { @com.facebook.proguard.annotations.DoNotStrip *; @com.facebook.common.internal.DoNotStrip *; } -keepclassmembers @com.facebook.proguard.annotations.KeepGettersAndSetters class * { void set*(***); *** get*(); } -keep class * extends com.facebook.react.bridge.JavaScriptModule { *; } -keep class * extends com.facebook.react.bridge.NativeModule { *; } -keepclassmembers,includedescriptorclasses class * { native <methods>; } -keepclassmembers class * { @com.facebook.react.uimanager.UIProp <fields>; } -keepclassmembers class * { @com.facebook.react.uimanager.annotations.ReactProp <methods>; } -keepclassmembers class * { @com.facebook.react.uimanager.annotations.ReactPropGroup <methods>; } -dontwarn com.facebook.react.** -keep class com.facebook.** { *; } -keep,includedescriptorclasses class com.facebook.react.bridge.** { *; } # 高德地图 -dontwarn com.amap.** -keep class com.amap.api.maps.** { *; } -keep class com.autonavi.** { *; } -keep class com.amap.api.trace.** { *; } -keep class com.amap.api.navi.** { *; } -keep class com.autonavi.** { *; } -keep class com.amap.api.location.** { *; } -keep class com.amap.api.fence.** { *; } -keep class com.autonavi.aps.amapapi.model.** { *; } -keep class com.amap.api.maps.model.** { *; } -keep class com.amap.api.services.** { *; } # Google Play Services -keep class com.google.android.gms.common.** {*;} -keep class com.google.android.gms.ads.identifier.** {*;} -keepattributes Signature,*Annotation*,EnclosingMethod -dontwarn com.google.android.gms.** # MPAndroidChart -keep class com.github.mikephil.charting.** { *; } -dontwarn com.github.mikephil.charting.** -keep class com.thingclips.**.**{*;} -dontwarn com.thingclips.**.** -keep,includedescriptorclasses class com.facebook.v8.** { *; } #TTT -keep class * extends com.thingclips.android.universal.base.ThingBaseUniPlugin { *; } -keep class com.thingclips.smart.plugin.*.bean.**{ *; }

React Native 环境配置

涂鸦设备控制 UI 业务包包含开源框架 React Native，版本为 0.59.10。

若您的 Android 工程未集成 React Native，请按本文步骤集成设备控制 UI 业务包。 若您的 Android 工程已集成 React Native，需按下面步骤操作，以确定是否可集成设备控制 UI 业务包： 若已集成 React Native，且版本 > 0.59.10，因版本兼容性问题，则无法集成设备控制 UI 业务包。 若已集成 React Native，且 0.59.10 ≥ 版本 > 0.51，因 React Native 库冲突，不保证能够正常接入涂鸦面板。按下面两种方式进行操作： 移除您 Android 工程中的 React Native，使用设备控制 UI 业务包依赖的 React Native 0.59.10。 将您 Android 工程中集成的 React Native 进行更名，从而避免与业务包集成的 React Native 冲突。

若上述方式均无法集成 UI 业务包，则您无法接入集成设备控制 UI 业务包。

使用说明

本章节只展示部分跳转面板的接口。更多的详细的接口，请查看 AbsPanelCallerService 类。

打开设备面板

跳转设备面板，无提示

接口说明

跳转到设备面板。如果设备已不存在，不会弹出 Toast 提示，直接 return 返回。

goPanel(Activity activity, DeviceBean deviceBean);

参数说明

参数 说明 activity 当前页面 context deviceBean 设备信息

示例代码

AbsPanelCallerService service = MicroContext.getServiceManager().findServiceByInterface(AbsPanelCallerService.class.getName()); service.goPanel(PanelActivity.this, deviceBean);

跳转设备面板，有提示

接口说明

跳转到设备面板，如果设备已不存在，会弹出 Toast 提示。

goPanelWithCheckAndTip(Activity activity, String devId)

参数说明

参数 说明 activity 当前页面 context devId 设备 ID，您可以通过智能生活 App SDK 接口获取

示例代码

AbsPanelCallerService service = MicroContext.getServiceManager().findServiceByInterface(AbsPanelCallerService.class.getName()); service.goPanelWithCheckAndTip(PanelActivity.this,devId);

打开群组面板

跳转群组面板，无提示

接口说明

跳转到群组。默认存在防抖，防抖阈值为 1.5 秒。如果群组已不存在，不会弹出 Toast 提示。

goPanel(Activity activity, GroupBean groupBean, boolean isAdmin);

参数说明

参数 说明 activity 当前页面 context groupBean 群组信息 isAdmin 是否是管理员。 如果非管理员，当群组没有设备时，仅弹出 Toast 提示。 如果是管理员，会引导进入群组管理。

示例代码

AbsPanelCallerService service = MicroContext.getServiceManager().findServiceByInterface(AbsPanelCallerService.class.getName()); service.goPanel(PanelActivity.this, groupBean, false);

跳转面板，有提示

接口说明

跳转到设备面板，如果设备已不存在，会弹出 Toast 提示。

goPanelWithCheckAndTip(Activity activity, long groupId, boolean isAdmin);

参数说明

参数 说明 activity 当前页面 context groupId 设备 groupId，可以通过智能生活 App SDK 接口获取 isAdmin 是否是管理员。 如果非管理员，当群组没有设备时，仅弹出 Toast 提示。 如果是管理员，会引导进入群组管理。

示例代码

AbsPanelCallerService service = MicroContext.getServiceManager().findServiceByInterface(AbsPanelCallerService.class.getName()); service.goPanelWithCheckAndTip(PanelActivity.this, groupId,true);

关闭设备控制面板

ThingSmartSdk.getEventBus().post(new PageCloseEventModel());

清除缓存

在加载面板过程中，会将面板文件会存放在当前 app 存储目录下。下次打开面板时，从缓存中加载该文件。如果面板文件包内容发生变更，需先清除缓存，再重新拉起新的面板文件包，变更内容才会生效。

调用该接口会删除所有面板文件，加载面板时都将重新拉取文件。

示例代码

ClearCacheService service = MicroContext.getServiceManager().findServiceByInterface(ClearCacheService.class.getName()) if (service != null) { service.clearCache(PanelActivity.this); }

设置面板调试功能

在依赖了面板调试的可选依赖后，打开以下页面，来设置面板调试的连接 IP 地址。

示例代码

startActivity(new Intent(this, ThingRCTPanelDebugActivity.class));

GitHub 示例代码

请访问 GitHub 获取 tuya-ui-bizbundle-android-demo。

常见问题

打开设备面板时，提示当前版本不支持该设备，请至应用市场升级 App

检查项目的 module_app.json 文件中是否配置了 com.thingclips.smart.paneloutside.RNVersionPipeline。

如果未配置，请在 PIPE_LINE_APPLICATION_SYNC 下增加该 PipeLine 配置。

如果已配置，请检查配置的位置是否正确。

"PIPE_LINE_APPLICATION_SYNC": [ ... "com.thingclips.smart.paneloutside.RNVersionPipeline" ]

设备面板中的 GIF 图无动效

可在项目中配置下列最新版本的依赖。

implementation 'com.facebook.fresco:animated-drawable:2.6.0' implementation 'com.facebook.fresco:animated-webp:2.6.0' implementation 'com.facebook.fresco:animated-gif'

Release 包的设备控制 UI 业务包部分功能无法使用

请先检查 混淆配置 是否正确。

无法使用打开设备面板

接入设备控制 UI 业务包之后，必须实现 家庭服务。否则，无法正常打开面板。

AbsBizBundleFamilyService familyService = MicroServiceManager.getInstance().findServiceByInterface(AbsBizBundleFamilyService.class.getName()); familyService.shiftCurrentFamily(homeBean.getHomeId(), homeBean.getName());

网址：设备控制 UI 业务包 https://www.yuejiaxmz.com/news/view/181060

相关内容

三星 One UI 7 概览：升级图标、改善家长控制、AI 增强照片
设备控制
UI设计师高效秘笈－工具预设 – 学ui网
婚后理财必备：揭秘实用结婚理财UI设计图，助你轻松管理小家庭财务
打造高效通勤生活：揭秘通勤包UI设计的实用美学与人性化技巧
未来家居新风尚：揭秘UI设计师最爱的学习桌布置秘籍，高效工作必备！
家居焕新，从一套得心应手的UI设计开始
揭秘UI设计职场生存指南：如何从入门到精通，抓住行业机遇？
吉林平面视觉设计培训UI界面设计室内装饰设计培训班
自动化控制设备

随便看看