【带你轻松学】ArkUI实战开发-初识 NAPI

往期知识点整理

• 鸿蒙（HarmonyOS）北向开发知识点记录~
• 鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~
• 被裁员后，踏上了鸿蒙开发求职之路
• 记录一场鸿蒙开发岗位面试经历~
• 持续更新中……

在移动应用开发中需要使用 C/C++ 实现的场景有很多，比如音视频处理，图像处理等较高性能要求的场景。OpenHarmony 提供了 NAPI 框架用于实现 JS 和 C/C++ 互相调用的能力，DevEco Studio 默认支持创建 NAPI 应用，本节笔者简单介绍一下创建的默认 NAPI 工程的相关知识。

NAPI工程创建

DevEco Studio 默认支持创建 NAPI 工程，在 DevEco Studio 的菜单栏里依次点击 File -> New -> Create Project，如下图所示：

在弹出选择工程模版对话框里，选择 OpenHarmony 标签下的 Navite C++ 模板，然后点击 Next 按钮，如下图所示：

点击 Next 按钮后，在工程配置页面填写工程名字，Project type 填写 Application，Compile SDK 选择 9，Mode 选择 Stage，其它按照默认选择即可，截图如下所示：

填写完成后，点击 Finish，一个 NAPI 工程已经创建完毕，NAPI 工程结构如下图所示：

NAPI工程简介

NAPI 工程创建完后，在 entry 目录下多了一个 cpp 目录，该目录用来存放 cpp 的源码及相关配置文件，各文件说明如下：

• hello.cpp：index.d.ts 文件中声明的方法的 C++ 实现源码。
• CMakeLists.txt：是cmake用来生成Makefile文件需要的一个描述编译链接的脚本文件。
• index.d.ts：对 ts 提供的方法声明。
• package.json：打包的配置文件。

另外 CMakeLists.txt 文件还会在 build-profile.json5 里做配置，代码如下所示：

{
  "apiType": 'stageMode',
  "buildOption": {
    "externalNativeOptions": {                 // CPP相关配置
      "path": "./src/main/cpp/CMakeLists.txt", // CMake 文件的路径
      "arguments": "",                         // 传递给 CMake 的可选参数
      "cppFlags": "",                          // 传递给 C++编译器的可选参数
    }
  }
}

externalNativeOptions 是对 CPP 的相关配置，path 表示 CMake 文件的配置路径，arguments 表示传递给 CMake 的可选编译参数，cppFlags 表示传递给 C++ 编译器的可选参数。

NAPI工程签名

NAPI 项目目前只能在真机上验证，在真机上运行前需要添加签名，否则无法安装运行，依次点击DevEco Studio 的 File -> Project Structure，如下图所示：

在打开的 Project Structure 面板中，选择 Signing Configs 标签，在该标签下选中 Automatically generate signature 复选框，如下所示：

点击 OK 按钮，则会自动添加签名配置，此时可以链接设备运行项目了。

NAPI工程运行

更改默认生成的 Index.ets ，代码如下所示：

import testNapi from 'libentry.so'

@Entry @Component struct ArkUIClubNAPITest {

  @State message: string = 'Hello，OpenHarmony'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(25)
          .fontWeight(FontWeight.Bold)
          .onClick(() => {
            var result = testNapi.add(2, 3);
            this.message = "OpenHarmony, value: " + result;
            console.log(this.message);
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

点击 Text，调用 testNapi 的 add() 方法并把结果 赋值给 message，此时 message 的值经过 add() 方法计算后为：OpenHarmony, value: 5，在设置上运行该项目

小结

本节简单介绍了 DevEco Stuido 创建的默认 NAPI 工程，读者有个大致印象即可，后续笔者将继续介绍NAPI 的相关内容，敬请期待。