??想了解更多關于開源的內容，請訪問：??
??51CTO 開源基礎軟件社區??
??https://ost.51cto.com??
前言
在上一篇博客我們簡單介紹了napi框架生成工具的安裝和使用，本篇將利用該工具，實現簡單的北向應用調用南向提供的NAPI接口獲取數據的案例。
測試環境
- OpenHarmony-3.2-Beta5
- 九聯UnionPi-Tiger開發板
- Visual Studio Code（版本需1.62.0及以上）
- USB_Burning_Tool燒錄工具
- napi_generator工具可執行文件或vs code插件
- DevEco Studio 3.1.0.200
參考
子系統，部件，模塊的創建可以先看這一篇：??【FFH】子系統，部件，模塊編譯構建全實踐??napi_generator工具的介紹可以看這篇：[FFH]napi_generator(一)——NAPI框架生成工具介紹
NAPI框架生成工具使用說明——作者：深圳開鴻數字產業發展有限公司
實現流程
一、編譯構建實現
目錄結構：
mysubsys
├── napi_test
│ ├── BUILD.gn
│ ├── bundle.json
│ └── napi_generator_test
│ ├── @ohos.napi_generator_test.d.ts
1、新增mysubsys子系統
在子系統下新建一個屬于自己的名為mysubsys子系統，并在源碼下建立相應的mysubsys目錄。
"mysubsys": {
"path": "mysubsys",
"name": "mysubsys"
}2、新增napi_test部件
在mysubsys目錄下新建文件夾napi_test,并創建bundle.json部件配置文件。
{
"name": "@ohos/napi_test",
"description": "mysubsys test for bundle.json",
"version": "3.1",
"license": "MIT",
"publishAs": "code-segment",
"segment": {
"destPath": "mysubsys/napi_test"
},
"dirs": {},
"scripts": {},
"licensePath": "COPYING",
"component": {
"name": "napi_test",
"subsystem": "mysubsys",
"syscap": [],
"features": [],
"adapted_system_type": [],
"rom": "",
"ram": "",
"deps": {
"components": [],
"third_party": []
},
"build": {
"sub_component": [
"http://mysubsys/napi_test:my_napi_group"
],
"inner_kits": [],
"test": []
}
}
}同時創建BUILD.gn作為部件入口：
import("http://build/ohos.gni")
group("my_napi_group") {
deps = [
"napi_generator_test:hello_napi_generator"
]
}新建目錄napi_generator_test存放模塊文件。
mkdir napi_generator_test
3、產品配置中添加相應子系統及部件
在vendor/unionman/unionpi_tiger/config.json文件為musubsys添加部件，musubsys為之前自己添加的子系統，產品沒有mysubsys則根據模板進行創建。
![#創作者激勵# [FFH]napi_generator(二)——NAPI框架生成工具實測-開源基礎軟件社區](https://dl-harmonyos.51cto.com/images/202303/f139f4a89c8b045f006557561007cd79838eda.png?x-oss-process=image/resize,w_488,h_335 "#創作者激勵# [FFH]napi_generator(二)——NAPI框架生成工具實測-開源基礎軟件社區")
二、NAPI接口開發
1、編寫接口定義ts文件
在napi_generator_test目錄下創建文件@ohos.napi_generator_test.d.ts，這里的hello_napi_generator要與BUILD.gn指定的動態庫名一致，該ts文件定義了get_Hello_Generator()接口，返回字符串類型數據，提供給北向應用調用。
declare namespace hello_napi_generator {
function get_Hello_Generator(): string;
}
export default hello_napi_generator;2、使用工具生成模板
由上一部編寫的@ohos.napi_generator_test.d.ts生成NAPI框架代碼：
![#創作者激勵# [FFH]napi_generator(二)——NAPI框架生成工具實測-開源基礎軟件社區](https://dl-harmonyos.51cto.com/images/202303/4578183433619f11d9d359615c5a7e18a33d61.png?x-oss-process=image/resize,w_434,h_528 "#創作者激勵# [FFH]napi_generator(二)——NAPI框架生成工具實測-開源基礎軟件社區")
路徑選擇napi_generator_test下即可，配置如下：
![#創作者激勵# [FFH]napi_generator(二)——NAPI框架生成工具實測-開源基礎軟件社區](https://dl-harmonyos.51cto.com/images/202303/21f41ce84ecf0c12a5b654dd76e25ab516bd48.png?x-oss-process=image/resize,w_522,h_470 "#創作者激勵# [FFH]napi_generator(二)——NAPI框架生成工具實測-開源基礎軟件社區")
模板生成成功后生成如下文件：
![#創作者激勵# [FFH]napi_generator(二)——NAPI框架生成工具實測-開源基礎軟件社區](https://dl-harmonyos.51cto.com/images/202303/2487b06634c10af91284007167f09a72a3142f.png?x-oss-process=image/resize,w_261,h_251 "#創作者激勵# [FFH]napi_generator(二)——NAPI框架生成工具實測-開源基礎軟件社區")
3、實現NAPI接口
修改文件hello_napi_generator.cpp，實現定義的接口，本案例中直接為接口輸出返回一個字符串。
#include "hello_napi_generator.h"
namespace hello_napi_generator {
bool get_Hello_Generator(std::string& out)
{
out = " HELLO NAPI GENERATOR! \r\n";
return true;
}
}
修改BUILD.gn編譯規則
這里指定依賴ace_napi根據所在路徑進行修改，子系統和部件需和你定義的一致。
import("http://build/ohos.gni")
ohos_shared_library("hello_napi_generator")
{
sources = [
"hello_napi_generator_middle.cpp",
"hello_napi_generator.cpp",
"tool_utility.cpp",
]
include_dirs = [
".",
"http://third_party/node/src",
]
deps=[
"http://foundation/arkui/napi:ace_napi", # 根據指定路徑修改
]
remove_configs = [ "http://build/config/compiler:no_rtti" ]
cflags=[
]
cflags_cc=[
"-frtti",
]
ldflags = [
]
relative_install_dir = "module"
part_name = "napi_test" # 修改為你的部件名
subsystem_name = "mysubsys" # 修改為你的子系統
}三、NAPI接口應用開發
打開Deveco Studio，新建一個OpenHarmony工程。
配置選擇默認即可，使用ArkTS。
修改src/main/ets/pages/Index.ets文件，新建一個Button，Button調用NAPI接口hello_napi_generator.get_Hello_Generator()獲取南向接口返回的字符串，并通過彈窗組件輸出。
import prompt from '@system.prompt'
//顯示文本彈窗
// 引入擴展的NAPI模塊
// 定義nm_modname（模塊名稱）為hello_napi_generator
// 在BUILD.gn文件中定義ohos_shared_library結構體名稱為hello_napi_generator
// 所以是import hello_napi_generator from '@ohos.hello_napi_generator'
// @ts-ignore
import hello_napi_generator from '@ohos.hello_napi_generator';
@Entry
@Component
struct HelloNAPI {
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Button("MY NAPI GENERATOR TEST").margin(10).fontSize(24).onClick(() => {
// 對外具體的提供的API是get_Hello_Generator
let strFromNAPI = hello_napi_generator.get_Hello_Generator()
prompt.showToast({ message: strFromNAPI })
})
}
.width('100%')
.height('100%')
}
}
點擊File->Project Structure，進行自動簽名。
導入ts包或者忽略報錯。
根據教程要將@ohos.napi_generator_test.d.ts放到OpenHarmony
SDK目錄ets\api目錄下，不過最新版的Deveco
Studio使用API9放到指定路徑后還是找不到，個人北向接觸得比較少，不知道什么原因。不過雖然編譯會報錯，將報錯忽略后依然可以正常運行，也就是可以不用上述步驟也可以跑得通。
連接開發板，將應用安裝到開發板。
四、運行結果展示
![#創作者激勵# [FFH]napi_generator(二)——NAPI框架生成工具實測-開源基礎軟件社區](https://dl-harmonyos.51cto.com/images/202303/f98c46559b606c624ab518c73e9a298ebe639e.gif "#創作者激勵# [FFH]napi_generator(二)——NAPI框架生成工具實測-開源基礎軟件社區")
后記
對于南向NAPI接口的實現，我只寫了一行代碼，也就是out = " HELLO NAPI GENERATOR! \r\n";,然后北向就可以調用到了，確實震撼到我了，對于需要和北向交互又苦于NAPI接口設計的繁瑣步驟的南向開發者來說，簡直是一款神器，后面有時間研究研究能不能使用Callback和Promise異步操作模型以及發掘一下其他功能。
文章相關附件可以點擊下面的原文鏈接前往下載：
https://ost.51cto.com/resource/2573。
??想了解更多關于開源的內容，請訪問：??
??51CTO 開源基礎軟件社區??
??https://ost.51cto.com??
