HarmonyOS共享包以及跨模块引用_importing arkts files to js and ts files is not al

跨模块引用文件时遇到了一个问题：

Importing ArkTS files to JS and TS files is not allowed. <ArkTSCheck>
1

参照官方文档使用：Index.ets作为导出配置文件，在另一个库中使用遇到此问题

重读官方文档得到解决方法：重新创建: Index.ts 作为导出配置文件即可

共享包概述
OpenHarmony提供了两种共享包，HAR（Harmony Archive）静态共享包，和HSP（Harmony Shared Package）动态共享包。

HAR与HSP都是为了实现代码和资源的共享，都可以包含代码、C++库、资源和配置文件，最大的不同之处在于：HAR中的代码和资源跟随使用方编译，如果有多个使用方，它们的编译产物中会存在多份相同拷贝；而HSP中的代码和资源可以独立编译，运行时在一个进程中代码也只会存在一份。

图1 HAR和HSP在APP包中的形态示意图

HSP旨在解决HAR存在的几个问题：

• 多个HAP引用相同的HAR，导致的APP包大小膨胀问题。
• 多个HAP引用相同的HAR，HAR中的一些状态变量无法共享的问题。

HSP的一些约束：

• HSP及其使用方都必须是Stage模型。
• HSP及其使用方都必须使用esmodule编译模式。
• HSP不支持在配置文件中声明abilities、extensionAbilities标签。
• HSP按照使用场景可以分为应用内HSP和应用间HSP，应用间HSP暂不支持。

HAR

HAR（Harmony Archive）是静态共享包，可以包含代码、C++库、资源和配置文件。通过HAR可以实现多个模块或多个工程共享ArkUI组件、资源等相关代码。HAR不同于HAP，不能独立安装运行在设备上，只能作为应用模块的依赖项被引用。

创建HAR模块
通过DevEco Studio创建一个HAR模块，详见创建库模块。HAR模块默认不开启混淆能力，开启混淆能力，需要把HAR模块的build-profile.json5文件中的artifactType字段设置为obfuscation，配置如下所示：

{
  "apiType": "stageMode",
  "buildOption": {
      "artifactType": "obfuscation"
  }
}
1
2
3
4
5
6

artifactType字段有以下两种取值，默认缺省为original。

• original：不混淆。
• obfuscation：混淆，目前仅支持uglify混淆。

需要对代码资产进行保护时，建议开启混淆能力，混淆能力开启后，DevEco Studio在构建HAR时，会对代码进行编译、混淆及压缩处理，保护代码资产。

注意：artifactType字段设置为obfuscation时，apiType字段必须设置为stageMode，因为Stage模型才支持混淆。

HAR开发注意事项

• HAR不支持在配置文件中声明abilities、extensionAbilities组件。
• HAR不支持在配置文件中声明pages页面。
• HAR不支持在build-profile.json5文件的buildOption中配置worker。
• FA模型与Stage模型的HAR不支持相互引用。
• Stage模型的HAR，不能引用AppScope内的内容。在编译构建时APPScope中的内容不会打包到HAR中，导致HAR资源引用失败。

导出HAR的ArkUI组件、接口、资源

index.ets文件是HAR导出声明文件的入口，HAR需要导出的接口，统一在index.ets文件中导出。index.ets文件是DevEco Studio默认自动生成的，用户也可以自定义，在模块的oh-package.json5文件中的main字段配置入口声明文件，配置如下所示：

{
  "main": "index.ets"
}
1
2
3

导出ArkUI组件
ArkUI组件的导出方式与ts的导出方式一致，通过export导出ArkUI组件，示例如下：

// library/src/main/ets/components/MainPage/MainPage.ets
@Component
export struct MainPage {
  @State message: string = 'Hello World'
  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

HAR对外暴露的接口，在index.ets导出文件中声明如下所示：

// library/index.ets
export { MainPage } from './src/main/ets/components/MainPage/MainPage'
1
2

导出ts类和方法
通过export导出ts类和方法，支持导出多个ts类和方法，示例如下所示：

// library/src/main/ts/test.ets
export class Log {
    static info(msg) {
        console.info(msg);
    }
}

export function func() {
  return "har func";
}

export function func2() {
  return "har func2";
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

HAR对外暴露的接口，在index.ets导出文件中声明如下所示：

// library/index.ets
export { Log } from './src/main/ts/test'
export { func } from './src/main/ts/test'
export { func2 } from './src/main/ts/test'
1
2
3
4

资源

HAR模块编译打包时会把资源打包到HAR中。在编译构建HAP时，DevEco Studio会从HAP模块及依赖的模块中收集资源文件，如果不同模块下的资源文件出现重名冲突时，DevEco Studio会按照以下优先级进行覆盖（优先级由高到低）：

• AppScope（仅API9的Stage模型支持）。
• HAP包自身模块。
• 依赖的HAR模块，如果依赖的多个HAR之间有资源冲突，会按照依赖顺序进行覆盖（依赖顺序在前的优先级较高）。

引用HAR的ArkUI组件、接口、资源

引用HAR前，需要先配置对HAR的依赖，配置方式可参考引用HAR文件和资源。

引用HAR的ArkUI组件

HAR的依赖配置成功后，可以引用HAR的ArkUI组件。ArkUI组件的导入方式与ts的导入方式一致，通过import引入HAR导出的ArkUI组件，示例如下所示：

// entry/src/main/ets/pages/index.ets
import { MainPage } from "@ohos/library"

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'
  build() {
    Row() {
      // 引用HAR的ArkUI组件
      MainPage()
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

引用HAR的类和方法

通过import引用HAR导出的ts类和方法，示例如下所示：

// entry/src/main/ets/pages/index.ets
import { Log } from "@ohos/library"
import { func } from "@ohos/library"

@Entry
@Component
struct Index {
  build() {
    Row() {
      Column() {
        Button('Button')
          .onClick(()=>{
            // 引用HAR的类和方法
            Log.info("har msg");
            func();
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

引用HAR的资源

通过$r引用HAR中的资源，例如在HAR模块的src/main/resources里添加字符串资源（在string.json中定义，name：hello_har）和图片资源（icon_har.png），然后在Entry模块中引用该字符串和图片资源的示例如下所示：

// entry/src/main/ets/pages/index.ets
@Entry
@Component
struct Index {
  build() {
    Row() {
      Column() {
        // 引用HAR的字符串资源
        Text($r("app.string.hello_har"))
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        // 引用HAR的图片资源
        Image($r("app.media.icon_har"))
      }
      .width('100%')
    }
    .height('100%')
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

应用内HSP开发指导

应用内HSP指的是专门为某一应用开发的HSP，只能被该应用内部其他HAP/HSP使用，用于应用内部代码、资源的共享。

应用内HSP跟随其宿主应用的APP包一起发布，与该宿主应用具有相同的包名和生命周期。

开发应用内HSP

HSP模块可以在DevEco Studio中由指定模板创建，我们以创建一个名为library的HSP模块为例。基本的工程目录结构大致如下：

library
├── src
│   └── main
│       ├── ets
│       │   ├── pages
│       │   └── index.ets
│       ├── resources
│       └── module.json5
└── oh-package.json5
模块module.json5中的"type"标识模块类型，HSP的"type"是"shared"。

{
    "type": "shared"
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

HSP通过在入口文件中导出接口，对外提供能力。入口文件在模块oh-package.json5的"main"中配置。例如：

{
    "main": "./src/main/ets/index.ets"
}
1
2
3

导出ts类和方法

通过export导出ts类和方法，例如：

// library/src/main/ets/utils/test.ts
export class Log {
    static info(msg) {
        console.info(msg);
    }
}

export function add(a: number, b: number) {
  return a + b;
}

export function minus(a: number, b: number) {
  return a - b;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

对外暴露的接口，需要在入口文件index.ets中声明：

// library/src/main/ets/index.ets
export { Log, add, minus } from './utils/test'
1
2

导出ArkUI组件

ArkUI组件也可以通过export导出，例如：

// library/src/main/ets/components/MyTitleBar.ets
@Component
export struct MyTitleBar {
  build() {
    Row() {
      Text($r('app.string.library_title'))
        .fontColor($r('app.color.white'))
        .fontSize(25)
        .margin({left:15})
    }
    .width('100%')
    .height(50)
    .padding({left:15})
    .backgroundColor('#0D9FFB')
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

对外暴露的接口，需要在入口文件index.ets中声明：

// library/src/main/ets/index.ets
export { MyTitleBar } from './components/MyTitleBar'
1
2

HSP中资源使用说明

注意，在HSP中，通过$r/$rawfile可以使用本模块resources目录下的资源。

如果使用相对路径的方式，例如：

在HSP模块中使用Image(“common/example.png”)，实际上该Image组件访问的是HSP调用方（如entry）下的资源entry/src/main/ets/common/example.png。

导出native方法

在HSP中也可以包含C++编写的so。对于so中的native方法，HSP通过间接的方式导出，以导出libnative.so的乘法接口multi为例：

// ibrary/src/main/ets/utils/nativeTest.ts
import native from "libnative.so"

export function nativeMulti(a: number, b: number) {
    return native.multi(a, b);
}
1
2
3
4
5
6

对外暴露的接口，需要在入口文件index.ets中声明：

// library/src/main/ets/index.ets
export { nativeMulti } from './utils/nativeTest'
1
2

使用应用内HSP

要使用HSP中的接口，首先需要在使用方的oh-package.json5中配置对它的依赖。如果应用内HSP和使用方在同一工程下，可以直接本地引用，例如：

// entry/oh-package.json5
"dependencies": {
    "library": "file:../library"
}
1
2
3
4

然后就可以像使用HAR一样调用HSP的对外接口了。

例如，上面的library已经导出了下面这些接口：

// library/src/main/ets/index.ets
export { Log, add, minus } from './utils/test'
export { MyTitleBar } from './components/MyTitleBar'
export { nativeMulti } from './utils/nativeTest'
1
2
3
4

在使用方的代码中，可以这样使用：

// entry/src/main/ets/pages/index.ets
import { Log, add, MyTitleBar, nativeMulti } from "library"

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'
  build() {
    Row() {
      Column() {
        MyTitleBar()
        Text(this.message)
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
        Button('add(1, 2)')
          .onClick(()=>{
            Log.info("add button click!");
            this.message = "result: " + add(1, 2);
          })
        Button('nativeMulti(3, 4)')
          .onClick(()=>{
            Log.info("nativeMulti button click!");
            this.message = "result: " + nativeMulti(3, 4);
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

跨包页面路由跳转

若开发者想在entry模块中，添加一个按钮跳转至library模块中的menu页面（路径为：library/src/main/ets/pages/menu.ets），那么可以在使用方的代码（entry模块下的Index.ets，路径为：entry/src/main/ets/MainAbility/Index.ets）里这样使用：

import router from '@ohos.router';

@Entry
@Component
struct Index {
    @State message: string = 'Hello World'

    build() {
    Row() {
        Column() {
        Text(this.message)
            .fontSize(50)
            .fontWeight(FontWeight.Bold)
        // 添加按钮，以响应用户点击
        Button() {
            Text('click to menu')
            .fontSize(30)
            .fontWeight(FontWeight.Bold)
        }
        .type(ButtonType.Capsule)
        .margin({
            top: 20
        })
        .backgroundColor('#0D9FFB')
        .width('40%')
        .height('5%')
        // 绑定点击事件
        .onClick(() => {
            router.pushUrl({
              url: '@bundle:com.example.hmservice/library/ets/pages/menu'
            }).then(() => {
              console.log("push page success");
            }).catch(err => {
              console.error(`pushUrl failed, code is ${err.code}, message is ${err.message}`);
            })
        })
      .width('100%')
    }
    .height('100%')
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

其中router.pushUrl方法的入参中url的内容为：

'@bundle:com.example.hmservice/library/ets/pages/menu'
1

url内容的模板为：

'@bundle:包名（bundleName）/模块名（moduleName）/路径/页面所在的文件名(不加.ets后缀)'
1