三方庫移植之NAPI開發(fā)[2]C/C++與JS的數(shù)據(jù)類型轉(zhuǎn)換

作者：離北況歸 2022-10-20 16:18:37

本文在其基礎(chǔ)上修改hellonapi.cpp文件，介紹JS類型和C/C++數(shù)據(jù)類型之間的轉(zhuǎn)換。

??https://ost.51cto.com??

在《三方庫移植之NAPI開發(fā)[1]—Hello OpenHarmony NAPI》通過一個Hello OpenHarmony NAPI樣例講述了NPAI接口開發(fā)基礎(chǔ)知識。本文在其基礎(chǔ)上修改hellonapi.cpp文件，介紹JS類型和C/C++數(shù)據(jù)類型之間的轉(zhuǎn)換。

開發(fā)基于最新的OpenHarmony3.2Beta3版本及其對應SDK。標準系統(tǒng)開發(fā)板為潤和軟件dayu200。

筆者刻苦學習了三方庫NAPI開發(fā)的一些皮毛，將學習經(jīng)驗分享如下：
演示視頻：https://ost.51cto.com/show/18126

通過本文您將熟悉,通過NAPI框架：

如何獲取JS傳遞過來的參數(shù)。
如何將JS傳遞過來的參數(shù)（NAPI框架已封裝為napi_value類型）轉(zhuǎn)換成C/C++類型值用于計算。
如何將C/C++類型的值轉(zhuǎn)換成JS類型作并返回。

通過NAPI框架進行C/C++與JS數(shù)據(jù)類型的轉(zhuǎn)換

OpenHarmony NAPI將ECMAScript標準中定義的Boolean、Null、Undefined、Number、BigInt、String、Symbol和Object八種數(shù)據(jù)類型，以及函數(shù)對應的Function類型，統(tǒng)一封裝成napi_value類型，下文中表述為JS類型，用于接收ArkUI應用傳遞過來的數(shù)據(jù)及返回數(shù)據(jù)給ArkUI應用。

ECMAScript是一種由Ecma國際（通過ECMA-262標準化的腳本程序設(shè)計語言。這種語言在萬維網(wǎng)上應用廣泛，它往往被稱為JavaScript或JScript，所以它可以理解為是JavaScript的一個標準,但實際上后兩者是ECMA-262標準的實現(xiàn)和擴展。

下面通過擴展一個簡單的接口——Add(num1, num2)講述具體細節(jié)，接口使用同步方式實現(xiàn)，NAPI的同步方式調(diào)用的擴展API代碼處理流程如下圖。

#打卡不停更#三方庫移植之NAPI開發(fā)[2]C/C++與JS的數(shù)據(jù)類型轉(zhuǎn)換-開源基礎(chǔ)軟件社區(qū)

.cpp源碼實現(xiàn)

在《??三方庫移植之NAPI開發(fā)[1]—Hello OpenHarmony NAPI ??》一文的基礎(chǔ)上修改hellonapi.cpp文件，其余文件不變。
hellonapi.cpp內(nèi)容如下：

#include <string.h>
#include "napi/native_node_api.h"
#include "napi/native_api.h"
//NAPI定義API方法(接口業(yè)務實現(xiàn))時的接收參數(shù)為(napi_env, napi_callback_info)，
static napi_value Add(napi_env env, napi_callback_info info) {

    //獲取2個參數(shù)，值的類型是js類型（napi_value）
    size_t requireArgc = 2;
    size_t argc = 2;
    napi_value args[2] = {nullptr};
    //NAPI提供了napi_get_cb_info()方法可從napi_callback_info中獲取參數(shù)列表、this及其他數(shù)據(jù)
    NAPI_CALL(env, napi_get_cb_info(env, info, &argc, args, nullptr, nullptr));
    
    //獲取并判斷js參數(shù)類型
    napi_valuetype valuetype0;
    NAPI_CALL(env, napi_typeof(env, args[0], &valuetype0));

    napi_valuetype valuetype1;
    NAPI_CALL(env, napi_typeof(env, args[1], &valuetype1));

    if (valuetype0 != napi_number || valuetype1 != napi_number) {
    napi_throw_type_error(env, NULL, "Wrong arguments. 2 numbers are expected.");
    return NULL;
  }    
    //將js類型（napi_value）的參數(shù)值轉(zhuǎn)換成C++類型double
    double value0;
    NAPI_CALL(env, napi_get_value_double(env, args[0], &value0));

    double value1;
    NAPI_CALL(env, napi_get_value_double(env, args[1], &value1));

    //將結(jié)果由C++類型（double）轉(zhuǎn)換成js類型（napi_value）
    //NAPI提供了一些方法以便將C/C++不同類型的值轉(zhuǎn)為node_value類型，返回給JS代碼。
    napi_value sum;
    NAPI_CALL(env, napi_create_double(env, value0 + value1, &sum));
    
   //返回napi_value類型結(jié)果
    return sum;
}
// napi_addon_register_func
//2.指定模塊注冊對外接口的處理函數(shù)，具體擴展的接口在該函數(shù)中聲明
static napi_value registerFunc(napi_env env, napi_value exports)
{

    // 在napi_property_descriptor desc[]中將編寫C的“Add方法與對外暴露Js的接口“add”方法進行關(guān)聯(lián)
    static napi_property_descriptor desc[] = {
        { "add", nullptr, Add, nullptr, nullptr, nullptr, napi_default, nullptr }
    };
    napi_define_properties(env, exports, sizeof(desc) / sizeof(desc[0]), desc);
    return exports;   
}
// 1.先定義napi_module，指定當前NAPI模塊對應的模塊名
//以及模塊注冊對外接口的處理函數(shù)，具體擴展的接口在該函數(shù)中聲明
// nm_modname: 模塊名稱，對應eTS代碼為import nm_modname from '@ohos.ohos_shared_library_name'
//示例對應eTS代碼為：import hellonapi from '@ohos.hellonapi'
static napi_module hellonapiModule = {
    .nm_version = 1,
    .nm_flags = 0,
    .nm_filename = nullptr,
    .nm_register_func = registerFunc, // 模塊對外接口注冊函數(shù)
    .nm_modname = "hellonapi",  // 自定義模塊名
    .nm_priv = ((void*)0),
    .reserved = { 0 },
};

//3.模塊定義好后，調(diào)用NAPI提供的模塊注冊函數(shù)napi_module_register(napi_module* mod)函數(shù)注冊到系統(tǒng)中。
// register module，設(shè)備啟動時自動調(diào)用此constructor函數(shù)，把模塊定義的模塊注冊到系統(tǒng)中
extern "C" __attribute__((constructor)) void hellonapiModuleRegister()
{
    napi_module_register(&hellonapiModule);
}

.cpp源碼解析

注冊NAPI模塊、添加接口聲明

// napi_addon_register_func
//2.指定模塊注冊對外接口的處理函數(shù)，具體擴展的接口在該函數(shù)中聲明
static napi_value registerFunc(napi_env env, napi_value exports)
{
    static napi_property_descriptor desc[] = {
        { "add", nullptr, Add, nullptr, nullptr, nullptr, napi_default, nullptr }
    };
    napi_define_properties(env, exports, sizeof(desc) / sizeof(desc[0]), desc);
    return exports;   
}
// 1.先定義napi_module，指定當前NAPI模塊對應的模塊名
//以及模塊注冊對外接口的處理函數(shù)，具體擴展的接口在該函數(shù)中聲明
// nm_modname: 模塊名稱，對應eTS代碼為import nm_modname from '@ohos.ohos_shared_library_name'
//示例對應eTS代碼為：import hellonapi from '@ohos.hellonapi'
static napi_module hellonapiModule = {
    .nm_version = 1,
    .nm_flags = 0,
    .nm_filename = nullptr,
    .nm_register_func = registerFunc, // 模塊對外接口注冊函數(shù)
    .nm_modname = "hellonapi",  // 自定義模塊名
    .nm_priv = ((void*)0),
    .reserved = { 0 },
};
//3.模塊定義好后，調(diào)用NAPI提供的模塊注冊函數(shù)napi_module_register(napi_module* mod)函數(shù)注冊到系統(tǒng)中。
// register module，設(shè)備啟動時自動調(diào)用此constructor函數(shù)，把模塊定義的模塊注冊到系統(tǒng)中
extern "C" __attribute__((constructor)) void hellonapiModuleRegister()
{
    napi_module_register(&hellonapiModule);
}

接口業(yè)務實現(xiàn)C/C++代碼

//NAPI定義API方法(接口業(yè)務實現(xiàn))時的接收參數(shù)為(napi_env, napi_callback_info)，
//其中napi_callback_info為上下文的信息
static napi_value Add(napi_env env, napi_callback_info info) {
    //獲取2個參數(shù)，值的類型是js類型（napi_value）
    size_t requireArgc = 2;
    size_t argc = 2;
    napi_value args[2] = {nullptr};
    NAPI_CALL(env, napi_get_cb_info(env, info, &argc, args, nullptr, nullptr));    
    //NAPI框架提供了napi_typeof方法用于獲取指定js參數(shù)類型
    napi_valuetype valuetype0;
    NAPI_CALL(env, napi_typeof(env, args[0], &valuetype0));
    napi_valuetype valuetype1;
    NAPI_CALL(env, napi_typeof(env, args[1], &valuetype1));
    if (valuetype0 != napi_number || valuetype1 != napi_number) {
    napi_throw_type_error(env, NULL, "Wrong arguments. 2 numbers are expected.");
    return NULL;
  }   
    //將js類型（napi_value）的參數(shù)值轉(zhuǎn)換成C++類型double
    double value0;
    NAPI_CALL(env, napi_get_value_double(env, args[0], &value0));
    double value1;
    NAPI_CALL(env, napi_get_value_double(env, args[1], &value1));
    //將結(jié)果由C++類型（double）轉(zhuǎn)換成js類型（napi_value）
    napi_value sum;
    NAPI_CALL(env, napi_create_double(env, value0 + value1, &sum));  
   //返回napi_value類型結(jié)果
    return sum;
}

獲取參數(shù)

static napi_value Add(napi_env env, napi_callback_info info) {
......
}

NAPI定義API方法時的接收參數(shù)為(napi_env, napi_callback_info)

其中napi_callback_info為上下文的信息。

NAPI提供了napi_get_cb_info()方法可從napi_callback_info中獲取參數(shù)列表、this及其他數(shù)據(jù)。

#打卡不停更#三方庫移植之NAPI開發(fā)[2]C/C++與JS的數(shù)據(jù)類型轉(zhuǎn)換-開源基礎(chǔ)軟件社區(qū)

napi_get_cb_info函數(shù)在ohos3.2beta3源碼foundation/arkui/napi/native_engine/native_api.cpp中。

// Methods to work with napi_callbacks
// Gets all callback info in a single call. (Ugly, but faster.)
NAPI_EXTERN napi_status napi_get_cb_info(napi_env env,              // [in] NAPI environment handle
                                         napi_callback_info cbinfo, // [in] Opaque callback-info handle
                                         size_t* argc,         // [in-out] Specifies the size of the provided argv array
                                                               // and receives the actual count of args.
                                         napi_value* argv,     // [out] Array of values
                                         napi_value* this_arg, // [out] Receives the JS 'this' arg for the call
                                         void** data)          // [out] Receives the data pointer for the callback.
{
    CHECK_ENV(env);
    CHECK_ARG(env, cbinfo);
    auto info = reinterpret_cast<NativeCallbackInfo*>(cbinfo);
    if ((argc != nullptr) && (argv != nullptr)) {
        size_t i = 0;
        for (i = 0; (i < *argc) && (i < info->argc); i++) {
            argv[i] = reinterpret_cast<napi_value>(info->argv[i]);
        }
        *argc = i;
    }
    if (argc != nullptr) {
        *argc = info->argc;
    }
    if (this_arg != nullptr) {
        *this_arg = reinterpret_cast<napi_value>(info->thisVar);
    }
    if (data != nullptr && info->functionInfo != nullptr) {
        *data = info->functionInfo->data;
    }
    return napi_clear_last_error(env);
}

napi_get_cb_info函數(shù)說明如下：

napi_status napi_get_cb_info(napi_env env,              
                             napi_callback_info cbinfo, 
                             size_t* argc,                          
                             napi_value* argv,     
                             napi_value* this_arg, 
                             void** data)

參數(shù)說明：

[in] env: 傳入接口調(diào)用者的環(huán)境，包含js引擎等，由框架提供，默認情況下直接傳入即可。
[in] cbinfo: napi_callback_info對象，上下文的信息。
[in-out] argc: argv數(shù)組的長度。若napi_callback_info中實際包含的參數(shù)的個數(shù)大于請求的數(shù)量argc，將只復制argc的值所指定數(shù)量的參數(shù)只argv中。若實際的參數(shù)個數(shù)小于請求的數(shù)量，將復制全部的參數(shù)，數(shù)組多余的空間用空值填充，并將參數(shù)實際長度寫入argc。
[out] argv: 用于接收參數(shù)列表。
[out] this_arg: 用于接收this對象。
[out] data: NAPI的上下文數(shù)據(jù) 返回值：返回napi_ok表示轉(zhuǎn)換成功，其他值失敗。下面的返回napi_status方法一樣。

在Add方法中，調(diào)用napi_get_cb_info函數(shù)：

// env、info 參數(shù)由NAPI框架傳入
static napi_value Add(napi_env env, napi_callback_info info) {
size_t requireArgc = 2;
  size_t argc = 2;
  napi_value args[2] = {nullptr};
  NAPI_CALL(env, napi_get_cb_info(env, info, &argc, args, nullptr, nullptr));
  napi_value sum;
  return sum;
}

JS類型值轉(zhuǎn)換為C/C++類型的值

此示例中傳入的參數(shù)是Javascript值類型，被NAPI框架封裝成統(tǒng)一的唯一類型——napi_value類型，為了能夠進行計算，我們需要獲取其對應在C/C++中的類型的值。

NAPI提供了包括以下方法以便獲取不同類型的值（ohos3.2beta3源碼foundation/arkui/napi/native_engine/native_api.cpp中）

napi_get_value_double
napi_get_value_int32
napi_get_value_uint32
napi_get_value_int64
napi_get_value_bool
napi_get_value_string_latin1（Copies LATIN-1 encoded bytes from a string into a buffer）
napi_get_value_string_utf8（Copies UTF-8 encoded bytes from a string into a buffer）
napi_get_value_string_utf16
napi_get_value_external
napi_get_value_bigint_int64
napi_get_value_bigint_uint64
napi_get_value_bigint_words

此示例hellonapi.cpp中使用到了napi_get_value_double方法，函數(shù)定義如下：

NAPI_EXTERN napi_status napi_get_value_double(napi_env env, napi_value value, double* result)
{
    CHECK_ENV(env);
    CHECK_ARG(env, value);
    CHECK_ARG(env, result);
    auto nativeValue = reinterpret_cast<NativeValue*>(value);
    RETURN_STATUS_IF_FALSE(env, nativeValue->TypeOf() == NATIVE_NUMBER, napi_number_expected);
    *result = *reinterpret_cast<NativeNumber*>(nativeValue->GetInterface(NativeNumber::INTERFACE_ID));
    return napi_clear_last_error(env);
}

參數(shù)說明：

[in] env: 傳入接口調(diào)用者的環(huán)境，包含js引擎等，由框架提供，默認情況下直接傳入即可。
[in] value: 傳入要轉(zhuǎn)換的napi_value類型數(shù)據(jù)對象（可視為一個JS對象）。
[out] result: 轉(zhuǎn)換出對應類型（double）結(jié)果。返回值：返回napi_ok表示轉(zhuǎn)換成功，其他值失敗。

獲取參數(shù)的C/C++類型的值前,需要先判斷值的類型，本示例需要判斷傳入?yún)?shù)的JS值必須為number類型

NAPI框架提供了napi_typeof方法用于獲取指定對象的類型，其函數(shù)定義如下：

// Methods to get the native napi_value from Primitive type
NAPI_EXTERN napi_status napi_typeof(napi_env env, napi_value value, napi_valuetype* result)
{
    CHECK_ENV(env);
    CHECK_ARG(env, value);
    CHECK_ARG(env, result);
    auto nativeValue = reinterpret_cast<NativeValue*>(value);
    *result = (napi_valuetype)nativeValue->TypeOf();
    return napi_clear_last_error(env);
}

#打卡不停更#三方庫移植之NAPI開發(fā)[2]C/C++與JS的數(shù)據(jù)類型轉(zhuǎn)換-開源基礎(chǔ)軟件社區(qū)

參數(shù)說明：

[in] env: 傳入接口調(diào)用者的環(huán)境，包含js引擎等，由框架提供，默認情況下直接傳入即可。
[in] value: 傳入要轉(zhuǎn)換的napi_value類型數(shù)據(jù)對象（可視為一個JS對象）。
[out] result: 返回value參數(shù)對應的JS類型。

napi_valuetype對應了ECMAScript標準中定義的Boolean、Null、Undefined、Number、BigInt、String、Symbol和Object八種數(shù)據(jù)類型，以及函數(shù)對應的Function類型。
另外，napi_valuetype還包括了一個napi_external類型，其表示沒有任何屬性也沒有任何原型的對象。

綜上所述參數(shù)類型判斷及值轉(zhuǎn)換，示例代碼如下：

static napi_value Add(napi_env env, napi_callback_info info) {
    // 1. 獲取2個參數(shù)，值的類型是js類型（napi_value）
    size_t requireArgc = 2;
    size_t argc = 2;
    napi_value args[2] = {nullptr};
    NAPI_CALL(env, napi_get_cb_info(env, info, &argc, args, nullptr, nullptr));
    // 2. 獲取并判斷js參數(shù)類型
    napi_valuetype valuetype0;
    NAPI_CALL(env, napi_typeof(env, args[0], &valuetype0));
    napi_valuetype valuetype1;
    NAPI_CALL(env, napi_typeof(env, args[1], &valuetype1));
    //輸入的數(shù)據(jù)類型異常處理
    if (valuetype0 != napi_number || valuetype1 != napi_number) {
    napi_throw_type_error(env, NULL, "Wrong arguments. 2 numbers are expected.");
    return NULL;
  }
    // 3. 將js類型（napi_value）的參數(shù)值轉(zhuǎn)換成C++類型double
    double value0;
    NAPI_CALL(env, napi_get_value_double(env, args[0], &value0));
    double value1;
    NAPI_CALL(env, napi_get_value_double(env, args[1], &value1));
    napi_value sum;
    return sum;

計算結(jié)果轉(zhuǎn)換為JS類型并返回

static napi_value Add(napi_env env, napi_callback_info info) {
···
  // 4. 將結(jié)果由C++類型（double）轉(zhuǎn)換成js類型（napi_value）
  napi_value sum;
  NAPI_CALL(env, napi_create_double(env, value0 + value1, &sum));
··· 
}

計算的結(jié)果是C/C++類型，需要轉(zhuǎn)換成NAPI node_value類型返回給JS。
NAPI提供了一些方法以便將C/C++不同類型的值轉(zhuǎn)為node_value類型，返回給JS代碼。例如：

napi_create_double
napi_create_int32
napi_create_uint32
napi_create_int64
napi_create_string_latin1
napi_create_string_utf8
napi_create_string_utf16

以napi_create_double方法為例，函數(shù)定義如下：

#打卡不停更#三方庫移植之NAPI開發(fā)[2]C/C++與JS的數(shù)據(jù)類型轉(zhuǎn)換-開源基礎(chǔ)軟件社區(qū)

NAPI_EXTERN napi_status napi_create_int32(napi_env env, int32_t value, napi_value* result)
{
    CHECK_ENV(env);
    CHECK_ARG(env, result);

    auto engine = reinterpret_cast<NativeEngine*>(env);
    auto resultValue = engine->CreateNumber(value);

    *result = reinterpret_cast<napi_value>(resultValue);
    return napi_clear_last_error(env);
}

參數(shù)說明：
[in] env: 傳入接口調(diào)用者的環(huán)境，包含js引擎等，由框架提供，默認情況下直接傳入即可。
[in] value: 傳入要轉(zhuǎn)換的double類型數(shù)據(jù)值。
[out] result: 轉(zhuǎn)換出結(jié)果。

ArkUI應用實現(xiàn)代碼

ArkUI應用實現(xiàn)目錄結(jié)構(gòu)。

#打卡不停更#三方庫移植之NAPI開發(fā)[2]C/C++與JS的數(shù)據(jù)類型轉(zhuǎn)換-開源基礎(chǔ)軟件社區(qū)

index.ets內(nèi)容如下：

index.ets

import hellonapi from '@ohos.hellonapi'
@Entry
@Component
export struct HelloNAPI {
  private textInputController1: TextInputController = new TextInputController()
  private textInputController2: TextInputController = new TextInputController()
  private tittle: string = 'C/C++與JS的數(shù)據(jù)類型轉(zhuǎn)換'
  private message: string = '計算x+y'
  private tipsNum1: string = '請輸入X：'
  private tipsNum2: string = '請輸入Y：'
  private tipsResult: string = '結(jié)果：'
  private buttonSubmit: string = '計算'
  @State result: number = 0.0
  @State num1: number = 0.0
  @State num2: number = 0.0
  build() {
    Row() {
      Column() {
        Row(){
          Text(this.tittle).height('100%').align(Alignment.Center).fontSize(50).fontWeight(800)
        }.height('30%').width('100%').justifyContent(FlexAlign.Center)

        Row(){
          Text(this.message).height('100%').align(Alignment.Center).fontSize(35).fontWeight(500)
        }.height('15%').width('100%').justifyContent(FlexAlign.Center)

        Row(){
          Text(this.tipsNum1).fontColor(Color.Black).fontSize('65px').width('30%').height('100%').margin({left:30})
          TextInput({ placeholder: 'X', controller:this.textInputController1}).type(InputType.Number)
            .height('100%').width('60%').margin({left:10,right:30}).fontSize('25px')
            .onChange(value =>{this.num1 = parseFloat(value)})
        }.height('6%').width('100%').justifyContent(FlexAlign.Start)

        Row(){
          Text(this.tipsNum2).fontColor(Color.Black).fontSize('65px').width('30%').height('100%').margin({left:30})
          TextInput({ placeholder: 'Y', controller:this.textInputController2}).type(InputType.Number)
            .height('100%').width('60%').margin({left:10,right:30}).fontSize('25px')
            .onChange(value =>{this.num2 = parseFloat(value)})
        }.height('6%').width('100%').margin({top:20})

        Row(){
          Text(this.tipsResult).fontColor(Color.Black).fontSize(35).width('40%').height('100%').margin({left:30})
          Text(''+this.result).fontColor(Color.Black).fontSize(35).width('60%').height('100%')
        }.height('10%').width('100%').touchable(false)

        Row(){
          Button(this.buttonSubmit)
            .fontSize(37)
            .fontWeight(FontWeight.Bold)
            .margin({top:5})
            .height(80)
            .width(200)
            .onClick(() => {

              //hellonapi為BUILD.gn文件中定義的ohos_shared_library結(jié)構(gòu)體名稱
              this.result = hellonapi.add(this.num1,this.num2)
            })
        }.height('30%').width('100%').justifyContent(FlexAlign.Center)
      }
      .width('100%')
    }
    .height('100%')
  }
}

效果圖如下：

#打卡不停更#三方庫移植之NAPI開發(fā)[2]C/C++與JS的數(shù)據(jù)類型轉(zhuǎn)換-開源基礎(chǔ)軟件社區(qū)

index.ets解析

參數(shù)說明

字段	類型	說明
tittle	string	標題
message	string	說明
tipsNum1	number	提示輸入第一個參數(shù)
tipsNum2	number	提示輸入第二個參數(shù)
tipsResult	string	提示結(jié)果
buttonSubmit	string	計算按鈕名稱
result	string	結(jié)果
num1	number	輸入的第一個數(shù)
num2	number	輸入的第二個數(shù)

設(shè)置參數(shù)

import hellonapi from '@ohos.hellonapi'
@Entry
@Component
export struct HelloNAPI {
  private textInputController1: TextInputController = new TextInputController()
  private textInputController2: TextInputController = new TextInputController()
  private tittle: string = 'C/C++與JS的數(shù)據(jù)類型轉(zhuǎn)換'
  private message: string = '計算x+y'
  private tipsNum1: string = '請輸入X：'
  private tipsNum2: string = '請輸入Y：'
  private tipsResult: string = '結(jié)果：'
  private buttonSubmit: string = '計算'
  @State result: number = 0.0
  @State num1: number = 0.0
  @State num2: number = 0.0
  ...
  build() {
   ...
  }
}

界面實現(xiàn)

import hellonapi from '@ohos.hellonapi'
@Entry
@Component
export struct HelloNAPI {
  ...
 build() {
    Row() {
      Column() {
        Row(){
          Text(this.tittle).height('100%').align(Alignment.Center).fontSize(50).fontWeight(800)
        }.height('30%').width('100%').justifyContent(FlexAlign.Center)

        Row(){
          Text(this.message).height('100%').align(Alignment.Center).fontSize(35).fontWeight(500)
        }.height('15%').width('100%').justifyContent(FlexAlign.Center)

        Row(){
          Text(this.tipsNum1).fontColor(Color.Black).fontSize('65px').width('30%').height('100%').margin({left:30})
          TextInput({ placeholder: 'X', controller:this.textInputController1}).type(InputType.Number)
            .height('100%').width('60%').margin({left:10,right:30}).fontSize('25px')
            .onChange(value =>{this.num1 = parseFloat(value)})
        }.height('6%').width('100%').justifyContent(FlexAlign.Start)

        Row(){
          Text(this.tipsNum2).fontColor(Color.Black).fontSize('65px').width('30%').height('100%').margin({left:30})
          TextInput({ placeholder: 'Y', controller:this.textInputController2}).type(InputType.Number)
            .height('100%').width('60%').margin({left:10,right:30}).fontSize('25px')
            .onChange(value =>{this.num2 = parseFloat(value)})
        }.height('6%').width('100%').margin({top:20})

        Row(){
          Text(this.tipsResult).fontColor(Color.Black).fontSize(35).width('40%').height('100%').margin({left:30})
          Text(''+this.result).fontColor(Color.Black).fontSize(35).width('60%').height('100%')
        }.height('10%').width('100%').touchable(false)

        Row(){
          Button(this.buttonSubmit)
            .fontSize(37)
            .fontWeight(FontWeight.Bold)
            .margin({top:5})
            .height(80)
            .width(200)
            .onClick(() => {

              //hellonapi為BUILD.gn文件中定義的ohos_shared_library結(jié)構(gòu)體名稱
              this.result = hellonapi.add(this.num1,this.num2)
            })
        }.height('30%').width('100%').justifyContent(FlexAlign.Center)
      }
      .width('100%')
    }
    .height('100%')
  }
}

綁定事件、關(guān)聯(lián)參數(shù)
兩個TextInput組件分別綁定onChange事件，并分別關(guān)聯(lián)num1，num2來記錄輸入的參數(shù)。

Row(){
          Text(this.tipsNum1).fontColor(Color.Black).fontSize('65px').width('30%').height('100%').margin({left:30})
          TextInput({ placeholder: 'X', controller:this.textInputController1}).type(InputType.Number)
            .height('100%').width('60%').margin({left:10,right:30}).fontSize('25px')
            .onChange(value =>{this.num1 = parseFloat(value)})
        }.height('6%').width('100%').justifyContent(FlexAlign.Start)
        Row(){
          Text(this.tipsNum2).fontColor(Color.Black).fontSize('65px').width('30%').height('100%').margin({left:30})
          TextInput({ placeholder: 'Y', controller:this.textInputController2}).type(InputType.Number)
            .height('100%').width('60%').margin({left:10,right:30}).fontSize('25px')
            .onChange(value =>{this.num2 = parseFloat(value)})
        }.height('6%').width('100%').margin({top:20})

Button組件添加點擊事件，調(diào)用hellonapiu.cpp中的Add方法(調(diào)用js中的add,add和Add已經(jīng)在napi.cpp中綁定)。

Row(){
          Button(this.buttonSubmit)
            .fontSize(37)
            .fontWeight(FontWeight.Bold)
            .margin({top:5})
            .height(80)
            .width(200)
            .onClick(() => {

              //hellonapi為BUILD.gn文件中定義的ohos_shared_library結(jié)構(gòu)體名稱
            this.result = hellonapi.add(this.num1,this.num2)
            })

通過NAPI框架輸入到C的Add函數(shù)的JS參數(shù)是num1和num2,輸出的JS參數(shù)是result。

@ohos.hellonapi.d.ts接口文檔

declare namespace hellonapi {
    export const add: (a: number, b: number) => number;
    /**
     * 
     *
     * @since 9
     * @syscap SystemCapability.Ability.AbilityRuntime.AbilityCore
     */

}
export default hellonapi;