napi系列學習基礎篇——如何通過DevEco Studio開發(fā)一個NAPI工程

簡介

NAPI（Native API）是OpenHarmony系統(tǒng)中的一套原生模塊擴展開發(fā)框架，它基于Node.js N-API規(guī)范開發(fā)，為開發(fā)者提供了JavaScript與C/C++模塊之間相互調用的交互能力。如下圖所示：

這套機制對于鴻蒙系統(tǒng)開發(fā)的價值有兩方面：

  • OpenHarmony系統(tǒng)系統(tǒng)可以將框架層豐富的模塊功能通過js接口開放給上層應用使用。
  • 應用開發(fā)者也可以選擇將一些對性能、底層系統(tǒng)調用有要求的核心功能用C/C++封裝實現，再通過js接口使用，提高應用本身的執(zhí)行效率。

本文將通過一個Hello world的實例來演示如何在DevEco Studio上開發(fā)一個NAPI工程的過程。

工程準備

DevEco Studio下載

本實例中使用的是DevEco Studio 3.0 Release版本的IDE，我們需要在官網下載DevEco Studio 3.0 Release版即可，DevEco Studio的安裝使用請參照DevEco Studio使用指南。

SDK下載

下載安裝完DevEco Studio工具后，我們需要下載OpenHarmony的SDK，具體步驟如下(更多詳細信息請參照DevEco Studio使用之配置開發(fā)環(huán)境)：

  • 運行已安裝的DevEco Studio，首次使用，請選擇Do not import settings，單擊OK。

  • 進入DevEco Studio操作向導頁面，修改npm registry，DevEco Studio已預置對應的倉（默認的npm倉，可能出現部分開發(fā)者無法訪問或訪問速度緩慢的情況），直接單擊Start using DevEco Studio進入下一步。 [圖片上傳失敗...(image-2e56d3-1713015725747)]

  • 設置Node.js信息，可以指定本地已安裝的Node.js（Node.js版本要求為v14.19.1及以上，且低于v15.0.0；對應的npm版本要求為6.14.16及以上，且低于7.0.0版本）；如果本地沒有合適的版本，可以選擇Download按鈕，在線下載Node.js。本示例以下載Node.js為例，選擇下載源和存儲路徑后，單擊Next進入下一步。

  • 等待Node.js安裝完成，然后單擊Finish進入下一步。
  • 在SDK Componets Setup界面，設置OpenHarmony SDK下載路徑，如果需要開發(fā)HarmonyOS應用，請勾選上HarmonyOS SDK，單擊Next進入下一步。
  • 在彈出的SDK下載信息頁面，單擊Next，并在彈出的License Agreement窗口，閱讀License協(xié)議，需同意License協(xié)議后，單擊Next開始下載SDK。
  • 等待OpenHarmony SDK及工具下載完成，單擊Finish，這樣SDK就安裝完成。

創(chuàng)建工程

下載并配置完SDK后，我們就可以開始創(chuàng)建工程了。DevEco Studio已經自帶了一個Native C++ hello的模板，我們只需新建該模板的一個工程即可。

  • 打開DevEco Studio，點擊左邊Create Project，將會彈出對應新建工程界面。
  • 選擇OpenHarmony下的Native C++模板，單擊Next。
  • 配置工程 選擇完模板后，會彈出配置工程界面，在該界面我們需要配置工程名字，SDK版本以及Model，配置完后點擊Finish，這樣我們一個helloworld工程就創(chuàng)建完成了。

源碼實現

新建完工程后，實現napi接口的hello.cpp源碼在工程的entry/src/main/cpp目錄下。

注冊napi模塊

先定義一個模塊，對應結構體為napi_module，指定當前NAPI模塊對應的模塊名以及模塊注冊對外接口的處理函數，具體擴展的接口在該函數中聲明，后面說明。 模塊定義好后，調用NAPI提供的模塊注冊函數napi_module_register(napi_module* mod)函數注冊到系統(tǒng)中。

static napi_module demoModule = {
    .nm_version =1,
    .nm_flags = 0,
    .nm_filename = nullptr,
    .nm_register_func = Init,
    .nm_modname = "hello",
    .nm_priv = ((void*)0),
    .reserved = { 0 },
};
extern "C" __attribute__((constructor)) void RegisterHelloModule(void)
{
    napi_module_register(&demoModule);
}

接口定義

napi_property_descriptor結構體中聲明了napi中對應的接口，如下所示，其中Add對應的使Native C++的接口，其應用端的接口對應為add，napi通過napi_define_properties接口將napi_property_descriptor結構體中的2個接口綁定在一起，并通過exports變量對外導出，使應用層可以調用add方法。

static napi_value Init(napi_env env, napi_value exports)
{
    napi_property_descriptor desc[] = {
        { "getHelloString", nullptr, getHelloString, nullptr, nullptr, nullptr,
         napi_default, nullptr }
    };
    napi_define_properties(env, exports, sizeof(desc) / sizeof(desc[0]), desc);
    return exports;
}

接口實現

以下為getHelloString接口業(yè)務實現代碼：

static napi_value getHelloString(napi_env env, napi_callback_info info) {
  napi_value result;
  std::string words = "Hello Napi";
  if (napi_create_string_utf8(env, words.c_str(), words.length(), &result) != napi_ok) {
    return nullptr;
  }
  return result;
}

到此，我們已經對外導出了1個napi接口，應用端可以調用這個接口。

調用接口

首先，在調用napi前，我們需要導入napi庫：

import testNapi from "libentry.so"

導入完庫后，我們就可以通過導入的變量直接調用對應的napi接口：

testNapi.getHelloString();

而工程創(chuàng)建后，在index.ets文件(在工程的entry/src/main/ets/pages目錄下)中系統(tǒng)已經默認生成了一個hello world的文本區(qū)域，且通過點擊文本區(qū)域，可以調用getHelloString的napi接口，代碼如下：

import testNapi from "libentry.so"
@Entry
@Component
struct Index {
  @State message: string = 'Hello World'
  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .onClick(() => {
            this.message = testNapi.getHelloString()
            console.log("Test NAPI get string ： " + this.message);
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

這時DevEco Studio工具會提示getHelloString接口未定義，我們需要在對應的index.d.ts文件(在工程的entry/src/main/cpp/types/libentry目錄下)中加上該接口的定義：

export const getHelloString: () => string;

至此，源碼實現已完成，我們可以通過點擊DevEco Studio工具上Build選項中的Build Hap(s)進行編譯。

安裝調試

應用通過DevEco Studio工具安裝到開發(fā)板的步驟：

連接開發(fā)板

將開發(fā)板連接電腦，工具會自動識別到設備，如下圖

配置簽名

應用第一次安裝到設備上的時候，是需要進行簽名配置，否則無法進行安裝。具體簽名步驟：

  • 點擊工程配置按鈕 點擊DevEco Studio工具右上角的Project Structure按鈕，彈出工程配置界面
  • 配置自動簽名 彈出工程配置界面，選擇Project >>Signing Configs頁面，在選中自動簽名即可，此時工具會自動生成簽名信息：
  • 確定簽名 工具在自動生成簽名信息后，直接點擊ok按鈕即可完成自動簽名操作

安裝運行

配置完簽名后，我們就可以直接點擊DevEco Studio工具上運行按鈕進行安裝運行應用了

調試

應用安裝運行后，在板子上我們可以在屏幕的中央看到Hello World的顯示，并且我們點擊Hello World后可以在DevEco Studio工具的Log窗口查看到對應的調試信息

由于系統(tǒng)的調試信息也在log窗口顯示，且信息量大，不方便我們查看自己的調試信息，所以我們可以在log窗口設置過濾信息，讓窗口只顯示我們過濾關鍵字的信息。

寫在最后

如果你覺得這篇內容對你還蠻有幫助，我想邀請你幫我三個小忙：

  • 點贊，轉發(fā)，有你們的 『點贊和評論』，才是我創(chuàng)造的動力。
  • 關注小編，同時可以期待后續(xù)文章ing??，不定期分享原創(chuàng)知識。
  • 想要獲取更多完整鴻蒙最新學習知識點，請移步前往小編：https://gitee.com/MNxiaona/733GH/blob/master/jianshu
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容