EnjoyArkUIX
介绍
EnjoyArkUIX 是一个基于ArkUI-X跨平台框架能力构建的集自测试、演示为一体的工程,功能点涉及跨平台关键特性演示、ArkUI组件、子系统API验证等,后续将通过持续集成的方式补齐跨平台支持的特性功能点,用于看护ArkUI-X跨平台框架能力。
应用效果预览
| 页面 | Android平台 | iOS平台 |
|---|---|---|
| 演示 | ![]() |
![]() |
使用说明
- 点击自测试、演示、版本三个按钮或左右滑动切换不同视图。
- 点击二级导航(如PlatformBridge、PlatformView等),若存在三级导航则展开三级导航;若不存在三级导航,则跳转至详情页面。
- 若存在三级导航,点击跳转至详情页面。
案例列表
应用案例列表及平台支持情况。
| 案例名称 | 案例位置(应用界面案例入口) | Android | iOS |
|---|---|---|---|
| PlatformBridge | 演示 PlatformBridge | 支持 | 支持 |
| PlatformView | 演示 PlatformView | 支持 | 支持 |
| Fragment | 演示 Fragment | 支持 | 不支持 |
| Dynamization | 演示 Dynamization | 支持 | 支持 |
具体实现
一、首页实现
本示例使用Tabs容器组件搭建整体应用框架,每个TabContent内容视图使用List容器组件布局,在每个ListItem中使用循环渲染加载此分类下分类导航数据,底部导航菜单使用TabContent中tabBar属性设置自定义样式 。
二、在当前框架添加新用例
创建新用例
如应用效果图所示有三个创建新用例入口,如自测试(self_test)、演示(demos)和版本(version),选择对应的文件夹创建module,会在对应的栏目下添加新用例,如自测试demo创建流程:

选择[ArkUI-X] Empty Ability 工程

输入Module name

创建跨平台工程成功后,在Android工程中自动生成相应的Activity,通过setInstanceName()拉起跨平台工程入口

在 iOS 项目中,相应的文件将会自动生成,以确保跨平台功能的一致性和可用性
配置数据源
新用例创建成功后,在 entry模块下 data目录中添加要跳转到的跨平台模块的数据
- DemosData:首页演示项目工程数据源
- SelfTestData:首页自测试项目工程数据源
- VersionsData:首页版本项目工程数据源
- HomeTabData:首页Tabs数据源

如上配置文件通过配置 image 和 title 属性来指定页面的图标和标题。对于仅在 Android 平台上特有的功能,例如 Fragment,通过设置 PlatformTypeEnum 枚举值为 PlatformTypeEnum.SUPPORT_ANDROID 来处理。这样,当 iOS 设备尝试运行时,如果开发者点击了跳转到 Fragment 对应的按钮,系统会提示当前平台不支持该功能。
导航栏配置
在跨平台导航栏的配置中,通过设置 want 对象的 bundleName、moduleName 和 abilityName 属性,可以指定目标模块的详细信息。这些属性分别代表目标模块的包名、模块名以及模块内特定功能的名称。完成这些设置后,主框架即可通过 startAbility跳转至对应的模块的首页。

在项目开发中,根据具体需求,可以选择多种不同的实现方法来展示首页导航栏,以实现多样化的视觉效果和交互体验。
| 下拉导航栏写法: | 效果展示: |
|---|---|
![]() |
![]() |
三、编译运行
Android编译运行
使用 ace build hap 编译出对应模块hap包

若出现以下命令,则编译 hap包成功

使用 ace build apk 构建 apk

若出现以下打印信息,则编译成功,使用 ace install apk安装到手机上

iOS编译运行(需在Mac上执行)
在Mac上安装运行,如若出现以下问题,则是缺少签名信息

解决方案,需要打开 .arkui-x/ios/app.xcodeproj,配置签名信息

配置完签名后,使用 ace build hap 编译出对应模块hap包,ace build ios 导入库文件

若出现以下命令,则编译成功,可以使用 ace install ios,或使用 Xcode运行安装到手机(iPhone)上

DevEco Studio编译时报错问题解决
问题1
若出现以下编译问题,参考编译报错“Cannot find module XXX or its corresponding type declarations”,或执行命令 ohpm install,再重新执行 ace build ios/apk

问题2
若出现以下编译问题,需要修改新创建module工程的module.json5文件(位置:modulename\src\main\module.json5),将文件中的type值由"entry"修改成"feature",再次编译错误消失。

相关权限
- 本项目使用Web组件加载网页,请确保设备已连接网络
依赖
不涉及
约束与限制
1.本示例仅支持在标准Android和iOS设备系统上运行。
2.本示例已适配API version 22及以上版本的ArkUI-X SDK。
3.本示例需要使用DevEco Studio 6.0.0 Release及以上版本才可编译运行。
工程目录
Enjoyarkuix
├── .arkui-x
| ├── android
| │ ├── app
| │ │ ├── build.gradle
| │ │ ├── proguard-rules.pro
| │ │ └── src
| │ │ └── main
| │ │ ├── AndroidManifest.xml
| │ │ ├── assets
| │ │ │ ├── doc
| │ │ │ │ └── arkui-x
| │ │ │ │ ├── dynamicHap
| │ │ │ │ ├── dynamicHapOne
| │ │ │ │ └── dynamicHapTwo
| │ │ │ └── resh
| │ │ │ └── arkui-x
| │ │ │ ├── dynamicHap
| │ │ │ ├── dynamicHapOne
| │ │ │ └── dynamicHapTwo
| │ │ ├── java
| │ │ │ └── com
| │ │ │ └── example
| │ │ │ └── enjoyarkuix
| │ │ │ ├── DynamizationJumpActivity.java
| │ │ │ ├── EntryEntryAbilityActivity.java
| │ │ │ ├── FragmentEntryActivity.java
| │ │ │ ├── MyApplication.java
| │ │ │ ├── platformbridge
| │ │ │ │ └── Bridge.java
| │ │ │ ├── PlatformBridgePlatformBridgeAbilityActivity.java
| │ │ │ ├── platformview
| │ │ │ │ ├── MyMapView.java
| │ │ │ │ ├── MyPlatformViewFactory.java
| │ │ │ │ ├── MyVideoView.java
| │ │ │ │ └── MyWebView.java
| │ │ │ ├── PlatformViewJumpActivity.java
| │ │ │ ├── PlatformViewPlatformViewAbilityActivity.java
| │ │ │ ├── stagedynamic
| │ │ │ │ ├── DynamicHapAbility.java
| │ │ │ │ ├── DynamicHapOneActivity.java
| │ │ │ │ └── DynamicHapTwoActivity.java
| │ │ │ └── stagefragment
| │ │ │ ├── ArkuiFragment.java
| │ │ │ ├── FragmentManagerActivity.java
| │ │ │ ├── NativeFragment.java
| │ │ │ ├── ViewFragment.java
| │ │ │ └── ViewPagerFragmentActivity.java
| │ │ └── res
| │ ├── build.gradle
| │ ├── gradle
| │ │ └── wrapper
| │ │ ├── gradle-wrapper.jar
| │ │ └── gradle-wrapper.properties
| │ ├── gradle.properties
| │ ├── gradlew
| │ ├── gradlew.bat
| │ ├── local.properties
| │ └── settings.gradle
| ├── arkui-x-config.json5
| └── ios
| ├── app
| │ ├── AppDelegate.h
| │ ├── AppDelegate.m
| │ ├── Assets.xcassets
| │ ├── Base.lproj
| │ │ └── LaunchScreen.storyboard
| │ ├── BaseModuleViewController.h
| │ ├── BaseModuleViewController.m
| │ ├── BaseViewController.h
| │ ├── BaseViewController.m
| │ ├── DynamicShowViewController.h
| │ ├── DynamicShowViewController.m
| │ ├── DynamizationJumpController.h
| │ ├── DynamizationJumpController.m
| │ ├── EntryEntryAbilityViewController.h
| │ ├── EntryEntryAbilityViewController.m
| │ ├── Info.plist
| │ ├── main.m
| │ ├── PlatformBridge
| │ │ ├── BridgeClass.h
| │ │ └── BridgeClass.m
| │ ├── PlatformBridgePlatformBridgeAbilityViewController.h
| │ ├── PlatformBridgePlatformBridgeAbilityViewController.m
| │ ├── PlatformView
| │ │ ├── MyMapView.h
| │ │ ├── MyMapView.m
| │ │ ├── MyPlatformViewFactory.h
| │ │ ├── MyPlatformViewFactory.m
| │ │ ├── MyVideoView.h
| │ │ ├── MyVideoView.m
| │ │ ├── MyWebview.h
| │ │ └── MyWebview.m
| │ ├── PlatformViewPlatformViewAbilityViewController.h
| │ └── PlatformViewPlatformViewAbilityViewController.m
| ├── app.xcodeproj
| │ └── project.pbxproj
| ├── doc
| │ └── arkui-x
| │ ├── dynamicHap
| │ ├── dynamicHapOne
| │ └── dynamicHapTwo
| └── resh
| └── arkui-x
| ├── dynamicHap
| ├── dynamicHapOne
| └── dynamicHapTwo
├── AppScope
│ ├── app.json5
│ └── resources
│ └── base
│ ├── element
│ │ └── string.json
│ └── media
│ └── app_icon.png
├── build-profile.json5
├── code-linter.json5
├── demos // 演示Sample目录
│ ├── dynamicHap // Sample 动态化
│ ├── dynamicHapOne // Sample 动态化
│ ├── dynamicHapTwo // Sample 动态化
│ ├── Fragment // Sample Android Fragment
│ ├── PlatformBridge // Sample 平台桥接
│ └── PlatformView // Sample 平台视图
├── deps // 工程Sample依赖项目录
│ └── effectkit
├── entry // 应用首页框架
│ ├── build-profile.json5
│ ├── hvigorfile.ts
│ ├── obfuscation-rules.txt
│ ├── oh-package.json5
│ └── src
│ └── main
│ ├── ets
│ │ ├── component
│ │ │ ├── FourthLevelNavigation.ets
│ │ │ ├── TabContentNavigation.ets
│ │ │ ├── ThirdLevelNavigation.ets
│ │ │ └── TitleBar.ets
│ │ ├── data
│ │ │ ├── DemosData.ets // 首页演示数据源
│ │ │ ├── HomeTabData.ets // 首页Tabs数据源
│ │ │ ├── SelfTestData.ets // 首页自测试数据源
│ │ │ └── VersionsData.ets // 首页版本数据源
│ │ ├── entryability
│ │ │ └── EntryAbility.ets
│ │ ├── model
│ │ │ └── CategoricalDataType.ets
│ │ ├── pages
│ │ │ └── EnterPage.ets // 应用首页
│ │ └── util
│ │ └── Logger.ets
│ ├── module.json5
│ └── resources
├── hvigor
│ └── hvigor-config.json5
├── hvigorfile.ts
├── local.properties
└── oh-package.json5
下载
如需单独下载本工程,执行如下命令:
git init
git config core.sparsecheckout true
echo /CodeLab/EnjoyArkUIX > .git/info/sparse-checkout
git remote add origin https://gitcode.com/arkui-x/samples.git
git pull origin master



