鸿蒙跨平台 ArkUI-X从入门到入土

1. 在 Arkui-X 中，如果 Bridge 对象声明为成员变量并且立即创建，这时候 preview 会白屏，是加载界面时就挂了，因为这个bridge对象，是需要 native 侧的文件支持的，比如Android中的libbridge.so(集成产物到 Android 工程时复制过去的)。这时候集成到 Android 工程中是正常运行的。
2. DevEco 中的 preview 相当于纯鸿蒙系统(HarmonyOS next),在纯鸿蒙系统中是无法使用Bridge 的，因为纯鸿蒙上没有这个 so 库。所以在创建这个 Bridge 对象的时候需要判断一下是不是跨平台，一般从deviceInfo.osFullName判断：
   let osName: string = deviceInfo.osFullName;获取对应OS名字，该接口已支持跨平台，不同平台上其返回值如下:

• OpenHarmony上，osName等于OpenHarmony XXX
• Android上，osName等于Android XXX
• iOS上，osName等于iOS XXX
  具体文档在这里 平台差异化

---

---

前言

喊了好长时间要做鸿蒙应用，自己也写了一点，但要同时照顾三个移动平台有点恶心，大致看了一下鸿蒙社区的 arkui-x 跨平台方案 gitee.com/arkui-x ,先调研一下试试水 注意文章所说的官方是指社区，并不是指华为公司，更不是其他

限制

丑话说在前头，先说限制，按照官方文档说法，忘记在哪里看到了 Android系统版本8+ 且仅 arm 设备支持 iOS系统版本 10+ 且仅 arm 设备支持

准备

官方文档看这里：gitee.com/arkui-x/doc…

官方仓库在这里：gitee.com/arkui-x

使用官方的套件还是需要申请，方式和之前一样，就是找商务谈合作，签协议。然后给账号开通下载权限然后去下载。

IDE

这里我们可以使用 OpenHarmony 社区提供的开发套件

下载链接：

gitee.com/openharmony…

安装步骤都一样，注意 node 和ohpm版本，选择ide建议的版本，可以重新下载，也可以使用本机上已经安装好的，我这里用的 node是 16.20.0，不要头铁搞个 18.x.x 20.x.x的版本，可能会有一些诡异的问题

配置

启动 IDE，页面左侧有diagnose可以检测一些基础配置和网络连接情况。点击左侧Customize，在右侧底部点击"All settings"进入首选项配置

选择 SDK，安装 OpenHarmony SDK api 10，安装完成之后再安装 ArkUI-X

安装完成后就可以了，没有其他需要安装的了

开始

创建工程

没有提供直接创建跨平台应用的地方，目前只能用 import 的形式

找到 import Sample,新页面左上角选择 OpenHarmony，下面会出现 ArkUI-X，这里用 HelloWorld 来做示例。

打开工程后开始自动同步，但这里会失败，因为各种插件版本不适配，点一下蓝色的文字，会帮你全部修改好，重新同步，到这里就已经全部准备好了。

编译

窗口顶部菜单 Build–> Build Hap(s)/APP(s)–>Build APP(s)。会同时构建 Android 和 iOS 产物

不出意外的话出意外了，打包失败，但这时对应的资源都已经复制到相应的文件夹中了。对应的说明可以看这里

gitee.com/arkui-x/doc…

这时候我们进入到项目工程的 .arkui-x/android目录下，执行 ./gradlew assembleDebug 来编译 android 安装包。注意这里 gradlew 可能没有执行权限，chmod +x gradlew 给一下执行权限就好了。

对于 iOS 工程，可以用 Xcode 打开之后配置一下签名然后打包。

到这里，新建工程编译多平台就已经完成了。但我们有很多项目不是从头开始，部分新增内容需要使用 add-on方式，这里以 Android 为例

添加到现有工程

接上面 窗口顶部菜单 Build–> Build Hap(s)/APP(s)–>Build APP(s)。会同时构建 Android 和 iOS 产物 之后，对应资源文件已经复制到对相应文件夹了。

先准备一个 Android 项目，注意一个 ArkUI-x 跨平台的版本要求，Android 系统 8 以上，只支持 arm 设备。

看一下 .arkui-x/android的代码，就一个继承自StageApplication的MyApplication和一个继承自 Activity 的EntryEntryAbilityActivity， 该类名通过通过module名和ability名拼接而得，一个ability对应一个Android工程侧的Activity类。

集成

1. libs 下面的 jar 包和so 文件复制到 Android 工程中，注意arkui-x 的 Android 工程中指定了存放 so 文件的文件夹就是 libs，复制到 Android 工程中的时候别整错了
2. assets文件夹下的文件也原封不动的复制到 Android 工程的 assets 文件夹中
3. Android 工程中的 Application改造，这里提供了三种方式
   3.1 继承StageApplication

import ohos.stage.ability.adapter.StageApplication;

public class HiStageApplication extends StageApplication {
    @Override
    public void onCreate() {
        super.onCreate();
    }
}

3.2 在 Application 中使用StageApplicationDelegate

这个方法和 StageApplication 源码一样

public class MyApplication extends Application {
    
    private StageApplicationDelegate appDelegate = null;
    public StageApplication() {
    }


    public void onCreate() {
        Log.i("StageApplication", "StageApplication onCreate called");
        super.onCreate();
        this.appDelegate = new StageApplicationDelegate();
        this.appDelegate.initApplication(this);
    }


    public void onConfigurationChanged(Configuration newConfig) {
        Log.i("StageApplication", "StageApplication onConfigurationChanged called");
        super.onConfigurationChanged(newConfig);
        if (this.appDelegate == null) {
            Log.e("StageApplication", "appDelegate is null");
        } else {
            this.appDelegate.onConfigurationChanged(newConfig);
        }
    }
}

3.3 在 Activity 中使用 StageApplicationDelegat

import android.app.Activity;
import ohos.stage.ability.adapter.StageApplicationDelegate;

public class EntryEntryAbilityActivity extends Activity {


    private StageApplicationDelegate appDelegate_ = null;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        appDelegate_ = new StageApplicationDelegate();
        appDelegate_.initApplication(this.getApplication());
        super.onCreate(savedInstanceState);
    }
}

4. 用于展示内容的 Activity

直接复制也行，自己创建一个同名 Activity 把内容复制过来，清单文件中注册一下也行。

1. 原生拉起 arkui-x 跨平台页面并传参

使用原生Activity拉起Ability时，需使用原生应用的startActivity方法，参数的传递需要通过Intent中的putExtra()进行设置，规则如下：

key值为params

value为json格式

Intent intent = new Intent();
        intent.setClass(this, EntryEntryAbilityTwoActivity.class);
        intent.putExtra("params",
                "{"params":[{"key":"bool","type":1,"value":"true"}," +
                "{"key":"double","type":9,"value":"2.3"}," +
                "{"key":"int","type":5,"value":"2"}," +
                "{"key":"string","type":10,"value":"test"}]}");
        startActivity(intent);

至此，集成完成。 在 Android 项目中调用一下就可以看到页面了

arkui-x 和 native 通信

原生和跨平台通信是非常重要的一个功能，也是不可或缺的一部分，官方给出了桥接平台 Bridge，在 Android、iOS 和 arkui-x 侧都有配套说明：

平台桥接用于客户端（ArkUI）和平台（Android或iOS）之间传递消息，即用于ArkUI与平台双向数据传递、ArkUI侧调用平台的方法、平台调用ArkUI侧的方法。本文主要介绍Android平台与ArkUI交互，ArkUI侧具体用法请参考Bridge API，Android侧参考BridgePlugin。

这里也给出了一个 场景示例，但奇怪的是不能正常运行，复现步骤和现象放在这个 issue 中了。目前是待确认状态。

最后

鸿蒙开发正当时，现在入手正是好时机。

还在犹豫不决的朋友们，小编在这里建议大家早点入手！

在这里分享一份鸿蒙学习路线图帮助那些不知道怎么入门的朋友，另外一些鸿蒙开发的资料文档也顺便分享给大家，扫下方二维码就能免费送呢！

鸿蒙学习路线图

路线图适合人群：

• IT开发人员：想要拓展职业边界，享受新技术带来的溢价红利
• 零基础小白：鸿蒙爱好者，希望从0到1学习，增加一项技能

HarmonyOS 4.0 APP Developer

OpenHarmony 5.0 Next视音频

OpenHarmony 5.0 Next进阶

OpenHarmony 5.0 Next分布式

学习资料

内容概要：《鸿蒙零基础入门学习指南》、《鸿蒙开发学习之UI》、《鸿蒙开发学习之Web》、《鸿蒙开发学习之应用模型》

内容特点：条理清晰，含图像化表示更加易懂。

领取方式：扫描下方二维码即可免费领取！！！

《鸿蒙零基础入门学习指南》

一、快速入门

适用于HarmonyOS应用开发的初学者。通过构建一个简单的具有页面跳转/返回功能的应用，快速了解工程目录的主要文件，熟悉HarmonyOS应用开发流程。

• 开发准备
• 构建第一个ArkTS应用（Stage模型）
• 构建第一个ArkTS应用（FA模型）
• 构建第一个JS应用（FA模型）

二、开发基础知识

• 应用程序包基础知识
• 应用配置文件（Stage模型）
• 应用配置文件概述（FA模型）

三、资源分类与访问

应用开发过程中，经常需要用到颜色、字体、间距、图片等资源，在不同的设备或配置中，这些资源的值可能不同。

• 资源分类与访问
• 创建资源目录和资源文件
• 资源访问

四、学习ArkTs语言

ArkTS是HarmonyOS优选的主力应用开发语言。ArkTS围绕应用开发在TypeScript（简称TS）生态基础上做了进一步扩展，继承了TS的所有特性，是TS的超集。因此，在学习ArkTS语言之前，建议开发者具备TS语言开发能力。

• 初识ArkTS语言
• 基本语法
• 状态管理
• 其他状态管理
• 渲染控制

领取方式：扫描下方二维码即可免费领取！！！

《鸿蒙开发学习之UI》

一、方舟开发框架（ArkUI）概述

二、基于ArkTS声明式开发范式

• 1、UI开发（ArkTS声明式开发范式）概述
• 2、开发布局
• 3、添加组件
• 4、显示图片
• 5、使用动画
• 6、支持交互事件
• 7、性能提升的推荐方法

三、兼容JS的类Web开发范式

• 1、概述
• 2、框架说明
• 3、构建用户界面
• 4、常见组件开发指导
• 5、动效开发指导
• 6、自定义组件

领取方式：扫描下方二维码即可免费领取！！！

《鸿蒙开发学习之Web》

Web组件概述

使用Web组件加载页面

设置基本属性和事件

• 设置深色模式
• 上传文件
• 在新窗口中打开页面
• 管理位置权限

在应用中使用前端页面JavaScript

• 应用侧调用前端页面函数
• 前端页面调用应用侧函数
• 建立应用侧与前端页面数据通道
• 管理页面跳转及浏览记录导航
• 管理Cookie及数据存储
• 自定义页面请求响应
• 使用Devtools工具调试前端页面

ArkTS语言基础类库概述

并发

• 并发概述
• 使用异步并发能力进行开发
• 使用多线程并发能力
• 容器类库
• XML生成、解析、与转换
• 通知

窗口管理

• 窗口开发概述
• 管理应用窗口（Stage模型）
• 管理应用窗口（FA模型）

WebGL

• 概述
• WebGL开发指导

媒体

• 媒体应用开发概念
• 图片

安全

• 访问控制
• ohos.permission.USE_BLUETOOTH
• ohos.permission.DISCOVER_BLUETOOTH
• ohos.permission.MANAGE_BLUETOOTH
• ohos.permission.INTERNET
• ohos.permission.INTERNET
• …

网络与连接

• 网络管理
• IPC与RPC通信

电话服务

• 电话服务开发概述
• 跳转拨号页面
• 获取当前蜂窝网络信号信息

数据管理

• 数据管理概述
• 应用数据持久化
• 场景介绍
• 运作机制
• 约束限制
• 接口说明
• …

文件管理

• 文件管理概述
• 应用文件
• 用户文件
• 分布式文件系统

后台任务管理

• 后台任务总体概述
• 短时任务
• 长时任务
• 延时任务
• 代理提醒

设备管理

• USB服务
• 位置服务
• 传感器
• 分布式跟踪开发指导
• 错误管理
• …

国际化

• 国际化开发概述
• Intl开发指导
• I18n开发指导

应用测试

• 自动化测试框架使用指南

Native API相关指导

• Native API在应用工程中的使用指导
• Drawing开发指导
• Rawfile开发指导
• NativeWindow 开发指导
• …

领取方式：扫描下方二维码即可免费领取！！！

《鸿蒙开发学习之应用模型》

应用模型概述

• 应用模型的构成要素
• 应用模型解读

Stage模型开发指导

• Stage模型开发概述
• Stage模型应用组件

FA模型开发指导

• FA模型开发概述
• FA模型应用组件配置
• 进程模型
• 线程模型

领取方式：扫描下方二维码即可免费领取！！！