為 Electron 建立 C++ 通知外掛

本指南會教你如何建立一個 C++ 原生外掛，並在你的 Electron 應用程式中使用 Windows App SDK 通知 API。 這是理解原生插件的好起點，之後再深入更複雜的情境。

先決條件

步驟 1：建立一個 C++ 原生外掛

使用 winapp CLI 來產生一個 C++ 外掛範本：

npx winapp node create-addon --template cpp --name nativeWindowsAddon

這會建立一個 nativeWindowsAddon/ 資料夾，內容包括：

  • addon.cc - 你的 C++ 程式碼，能呼叫 Windows API。
  • binding.gyp - 原生編譯的建置配置

這個指令也會將一個 build-addon 腳本新增到你的 package.json。

建立附加元件：

npm run build-addon

步驟 2：新增通知代碼

打開 nativeWindowsAddon/addon.cc，並更新它以使用Windows App SDK通知 API。 產生的範本包含必要的 Windows SDK 與 Windows App SDK 標頭。

新增通知 API 的包含功能：

#include <winrt/Microsoft.Windows.AppNotifications.h>
#include <winrt/Microsoft.Windows.AppNotifications.Builder.h>

新增一個顯示 Windows 通知的功能：

Napi::Value ShowNotification(const Napi::CallbackInfo& info) {
    Napi::Env env = info.Env();

    try {
        std::string title = info[0].As<Napi::String>().Utf8Value();
        std::string message = info[1].As<Napi::String>().Utf8Value();

        winrt::Microsoft::Windows::AppNotifications::Builder::AppNotificationBuilder builder;
        builder.AddText(winrt::to_hstring(title));
        builder.AddText(winrt::to_hstring(message));

        auto notification = builder.BuildNotification();
        winrt::Microsoft::Windows::AppNotifications::AppNotificationManager::Default().Show(notification);

        return Napi::Boolean::New(env, true);
    } catch (const winrt::hresult_error& e) {
        Napi::Error::New(env, winrt::to_string(e.message())).ThrowAsJavaScriptException();
        return env.Null();
    }
}

在方法 Init 中註冊該函數：

exports.Set("showNotification", Napi::Function::New(env, ShowNotification));

步驟 3：建立外掛

npm run build-addon

步驟 4：測試通知

打開 src/index.js 並裝入附加元件：

const addon = require('../nativeWindowsAddon/build/Release/nativeWindowsAddon.node');

新增測試呼叫：

addon.showNotification('Hello from Electron!', 'This notification uses the Windows App SDK.');

執行應用程式：

npm start

你應該會看到 Windows 的通知。

步驟 5：更新除錯身份

每當你修改 appxmanifest.xml時，執行：

npx winapp node add-electron-debug-identity

下一步

  • Last updated on