應用內HSP開發(fā)指導

開發(fā)應用內HSP

HSP模塊可以在DevEco Studio中由指定模板創(chuàng)建，我們以創(chuàng)建一個名為library的HSP模塊為例?；镜墓こ棠夸浗Y構大致如下：

library
├── src
│   └── main
│       ├── ets
│       │   ├── pages
│       │   └── index.ets
│       ├── resources
│       └── module.json5
└── oh-package.json5

模塊module.json5中的"type"標識模塊類型，HSP的"type"是"shared"。

{
    "type": "shared"
}

HSP通過在入口文件中導出接口，對外提供能力。入口文件在模塊oh-package.json5的"main"中配置。例如：

{
    "main": "./src/main/ets/index.ets"
}

導出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;
}

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

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

導出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')
  }
}

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

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

導出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);
}

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

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

使用應用內HSP

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

// entry/oh-package.json5
"dependencies": {
    "library": "file:../library"
}

然后就可以像使用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'

在使用方的代碼中，可以這樣使用：

// 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%')
  }
}

跨包頁面路由跳轉

若開發(fā)者想在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%')
    }
  }
}

其中router.pushUrl方法的入參中url的內容為：

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

url內容的模板為：

'@bundle:包名（bundleName）/模塊名（moduleName）/路徑/頁面所在的文件名(不加.ets后綴)'