• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 应用内HSP开发指导
2
3应用内`HSP`指的是专门为某一应用开发的`HSP`，只能被该应用内部其他`HAP`/`HSP`使用，用于应用内部代码、资源的共享。
4应用内`HSP`跟随其宿主应用的APP包一起发布，与宿主应用同进程，具有相同的包名和生命周期。
5
6## 开发应用内HSP
7
8通过DevEco Studio创建一个HSP模块，创建方式可[参考](https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/hsp-0000001521396322-V3#section7717162312546)，我们以创建一个名为`library`的`HSP`模块为例。基本的工程目录结构大致如下：
9```
10library
11├── src
12│   └── main
13│       ├── ets
14│       │   ├── pages
15│       │   └── index.ets
16│       ├── resources
17│       └── module.json5
18└── oh-package.json5
19```
20模块`module.json5`中的`"type"`标识模块类型，`HSP`的`"type"`是`"shared"`。
21```json
22{
23    "type": "shared"
24}
25```
26
27`HSP`通过在入口文件中导出接口，对外提供能力。入口文件在模块`oh-package.json5`的`"main"`中配置。例如：
28```json
29{
30    "main": "./src/main/ets/index.ets"
31}
32```
33
34### 导出ts类和方法
35通过`export`导出ts类和方法，例如：
36```ts
37// library/src/main/ets/utils/test.ts
38export class Log {
39    static info(msg) {
40        console.info(msg);
41    }
42}
43
44export function add(a: number, b: number) {
45  return a + b;
46}
47
48export function minus(a: number, b: number) {
49  return a - b;
50}
51```
52对外暴露的接口，需要在入口文件`index.ets`中声明：
53```ts
54// library/src/main/ets/index.ets
55export { Log, add, minus } from './utils/test'
56```
57
58### 导出ArkUI组件
59ArkUI组件也可以通过`export`导出，例如：
60```ts
61// library/src/main/ets/components/MyTitleBar.ets
62@Component
63export struct MyTitleBar {
64  build() {
65    Row() {
66      Text($r('app.string.library_title'))
67        .fontColor($r('app.color.white'))
68        .fontSize(25)
69        .margin({left:15})
70    }
71    .width('100%')
72    .height(50)
73    .padding({left:15})
74    .backgroundColor('#0D9FFB')
75  }
76}
77```
78对外暴露的接口，需要在入口文件`index.ets`中声明：
79```ts
80// library/src/main/ets/index.ets
81export { MyTitleBar } from './components/MyTitleBar'
82```
83#### HSP中资源使用说明
84注意，在`HSP`中，通过`$r`/`$rawfile`可以使用本模块`resources`目录下的资源。
85如果使用相对路径的方式，例如：
86在`HSP`模块中使用`Image("common/example.png")`，实际上该`Image`组件访问的是`HSP调用方`（如`entry`）下的资源`entry/src/main/ets/common/example.png`。
87
88### 导出native方法
89在`HSP`中也可以包含`C++`编写的`so`。对于`so`中的`native`方法，`HSP`通过间接的方式导出，以导出`libnative.so`的乘法接口`multi`为例：
90```ts
91// library/src/main/ets/utils/nativeTest.ts
92import native from "libnative.so"
93
94export function nativeMulti(a: number, b: number) {
95    return native.multi(a, b);
96}
97```
98
99对外暴露的接口，需要在入口文件`index.ets`中声明：
100```ts
101// library/src/main/ets/index.ets
102export { nativeMulti } from './utils/nativeTest'
103```
104
105## 使用应用内HSP
106要使用HSP中的接口，首先需要在使用方的oh-package.json5中配置对它的依赖，配置方式可[参考](https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/hsp-0000001521396322-V3#section6161154819195)。
107依赖配置成功后，就可以像使用HAR一样调用HSP的对外接口了。 例如，上面的library已经导出了下面这些接口：
108
109```ts
110// library/src/main/ets/index.ets
111export { Log, add, minus } from './utils/test'
112export { MyTitleBar } from './components/MyTitleBar'
113export { nativeMulti } from './utils/nativeTest'
114```
115在使用方的代码中，可以这样使用：
116```ts
117// entry/src/main/ets/pages/index.ets
118import { Log, add, MyTitleBar, nativeMulti } from "library"
119
120@Entry
121@Component
122struct Index {
123  @State message: string = 'Hello World'
124  build() {
125    Row() {
126      Column() {
127        MyTitleBar()
128        Text(this.message)
129          .fontSize(30)
130          .fontWeight(FontWeight.Bold)
131        Button('add(1, 2)')
132          .onClick(()=>{
133            Log.info("add button click!");
134            this.message = "result: " + add(1, 2);
135          })
136        Button('nativeMulti(3, 4)')
137          .onClick(()=>{
138            Log.info("nativeMulti button click!");
139            this.message = "result: " + nativeMulti(3, 4);
140          })
141      }
142      .width('100%')
143    }
144    .height('100%')
145  }
146}
147```
148
149### 跨包页面路由跳转
150
151若开发者想在entry模块中，添加一个按钮跳转至library模块中的menu页面（路径为：`library/src/main/ets/pages/menu.ets`），那么可以在使用方的代码（entry模块下的Index.ets，路径为：`entry/src/main/ets/MainAbility/Index.ets`）里这样使用：
152```ts
153import router from '@ohos.router';
154
155@Entry
156@Component
157struct Index {
158    @State message: string = 'Hello World'
159
160    build() {
161    Row() {
162        Column() {
163        Text(this.message)
164            .fontSize(50)
165            .fontWeight(FontWeight.Bold)
166        // 添加按钮，以响应用户点击
167        Button() {
168            Text('click to menu')
169            .fontSize(30)
170            .fontWeight(FontWeight.Bold)
171        }
172        .type(ButtonType.Capsule)
173        .margin({
174            top: 20
175        })
176        .backgroundColor('#0D9FFB')
177        .width('40%')
178        .height('5%')
179        // 绑定点击事件
180        .onClick(() => {
181            router.pushUrl({
182              url: '@bundle:com.example.hmservice/library/ets/pages/menu'
183            }).then(() => {
184              console.log("push page success");
185            }).catch(err => {
186              console.error(`pushUrl failed, code is ${err.code}, message is ${err.message}`);
187            })
188        })
189      .width('100%')
190    }
191    .height('100%')
192    }
193  }
194}
195```
196其中`router.pushUrl`方法的入参中`url`的内容为：
197```ets
198'@bundle:com.example.hmservice/library/ets/pages/menu'
199```
200`url`内容的模板为：
201```ets
202'@bundle:包名（bundleName）/模块名（moduleName）/路径/页面所在的文件名(不加.ets后缀)'
203```