首頁>編程相關>C/C++
下載

網頁視圖

一個用於 C/C++ 的小型跨平台 Webview 庫，用於建立現代跨平台 GUI。

此專案的目標是為最廣泛使用的平台建立一個通用的 HTML5 UI 抽象層。

它支援雙向 JavaScript 綁定（從 C/C++ 呼叫 JavaScript 和從 JavaScript 呼叫 C/C++）。

筆記

Go 的語言綁定已發生變化。此儲存庫中提供 <= 0.1.1 的版本。

平台支援

平台科技
Linux GTK、WebKitGTK
macOS可可、WebKit
視窗Windows API、WebView2

文件

最新的文檔就在原始碼中。改進文件是一項持續的工作，我們非常歡迎您做出貢獻。

先決條件

除了需要更現代版本的平台之外，您的編譯器必須至少支援 C++11。

該專案使用 CMake 和 Ninja，雖然為了您的方便而推薦，但使用該庫不需要這些工具。

Linux 和 BSD

開發和分發需要 GTK 和 WebKitGTK 庫。您需要檢查軟體包儲存庫以了解要安裝哪些軟體包。

套餐

  • 德班：
    • WebKitGTK 6.0、GTK 4：
      • 開發： apt install libgtk-4-dev libwebkitgtk-6.0-dev
      • 生產： apt install libgtk-4-1 libwebkitgtk-6.0-4
    • WebKitGTK 4.1、GTK 3、libsoup 3：
      • 開發： apt install libgtk-3-dev libwebkit2gtk-4.1-dev
      • 生產： apt install libgtk-3-0 libwebkit2gtk-4.1-0
    • WebKitGTK 4.0、GTK 3、libsoup 2：
      • 開發： apt install libgtk-3-dev libwebkit2gtk-4.0-dev
      • 生產： apt install libgtk-3-0 libwebkit2gtk-4.0-37
  • 軟呢帽：
    • WebKitGTK 6.0、GTK 4：
      • 開發： dnf install gtk4-devel webkitgtk6.0-devel
      • 製作： dnf install gtk4 webkitgtk6.0
    • WebKitGTK 4.1、GTK 3、libsoup 3：
      • 開發： dnf install gtk3-devel webkit2gtk4.1-devel
      • 製作： dnf install gtk3 webkit2gtk4.1
    • WebKitGTK 4.0、GTK 3、libsoup 2：
      • 開發： dnf install gtk3-devel webkit2gtk4.0-devel
      • 製作： dnf install gtk3 webkit2gtk4.0
  • 自由BSD：
    • GTK 4： pkg install webkit2-gtk4
    • GTK 3： pkg install webkit2-gtk3

庫依賴項

  • Linux：
    • 將pkg-config與--cflags和--libs一起使用來取得這些模組集之一的編譯器/連結器選項：
      • gtk4 webkitgtk-6.0
      • gtk+-3.0 webkit2gtk-4.1
      • gtk+-3.0 webkit2gtk-4.0
    • 連結庫： dl
  • 蘋果系統：
    • 連結框架： WebKit
    • 連結庫： dl
  • 視窗：
    • 來自 NuGet 的 WebView2。
    • Windows 函式庫： advapi32 ole32 shell32 shlwapi user32 version

BSD

  • 在基於 BSD 的系統上執行可能需要將wxallowed選項（請參閱 mount(8)）新增至 fstab 中，以繞過可執行檔的 W^X 記憶體保護。請先看看在不停用此安全功能的情況下它是否有效。

視窗

您的編譯器必須支援 C++14，我們建議將其與最新的 Windows 10 SDK 配對。

對於 Visual C++，我們建議使用 Visual Studio 2022 或更高版本。使用 MinGW-w64 時有一些要求。

對於 Windows 11 之前的任何 Windows 版本，開發人員和最終使用者必須在其係統上安裝 WebView2 執行時間。

入門

如果您是該專案的開發人員，請前往開發部分。

您將擁有一個可以運行的應用程序，但我們鼓勵您探索可用的範例。

在新目錄中建立以下文件：

.gitignore ： 

 # Build artifacts
/build

C++ 範例

CMakeLists.txt ： 

 cmake_minimum_required ( VERSION 3.16)
project (example LANGUAGES CXX)

set ( CMAKE_RUNTIME_OUTPUT_DIRECTORY " ${CMAKE_BINARY_DIR} /bin" )
set ( CMAKE_LIBRARY_OUTPUT_DIRECTORY " ${CMAKE_BINARY_DIR} /lib" )
set ( CMAKE_ARCHIVE_OUTPUT_DIRECTORY " ${CMAKE_BINARY_DIR} /lib" )

include (FetchContent)

FetchContent_Declare(
    webview
    GIT_REPOSITORY https://github.com/webview/webview
    GIT_TAG 0.12.0)
FetchContent_MakeAvailable(webview)

add_executable (example WIN32 )
target_sources (example PRIVATE main.cc)
target_link_libraries (example PRIVATE webview::core)

main.cc ： 

# include " webview/webview.h "

# include < iostream >

# ifdef _WIN32
int WINAPI WinMain (HINSTANCE /* hInst */ , HINSTANCE /* hPrevInst */ ,
                   LPSTR /* lpCmdLine */ , int /* nCmdShow */ ) {
# else
int main () {
#endif
  try {
    webview::webview w ( false , nullptr );
    w. set_title ( " Basic Example " );
    w. set_size ( 480 , 320 , WEBVIEW_HINT_NONE);
    w. set_html ( " Thanks for using webview! " );
    w. run ();
  } catch ( const webview:: exception &e) {
    std::cerr << e. what () << ' n ' ;
    return 1 ;
  }

  return 0 ;
}

C 範例

CMakeLists.txt ： 

 cmake_minimum_required ( VERSION 3.16)
project (example LANGUAGES C CXX)

set ( CMAKE_RUNTIME_OUTPUT_DIRECTORY " ${CMAKE_BINARY_DIR} /bin" )
set ( CMAKE_LIBRARY_OUTPUT_DIRECTORY " ${CMAKE_BINARY_DIR} /lib" )
set ( CMAKE_ARCHIVE_OUTPUT_DIRECTORY " ${CMAKE_BINARY_DIR} /lib" )

include (FetchContent)

FetchContent_Declare(
    webview
    GIT_REPOSITORY https://github.com/webview/webview
    GIT_TAG 0.12.0)
FetchContent_MakeAvailable(webview)

add_executable (example WIN32 )
target_sources (example PRIVATE main.c)
target_link_libraries (example PRIVATE webview::core_static)

main.c ： 

# include " webview/webview.h "
# include < stddef.h >

# ifdef _WIN32
# include < windows.h >
# endif

# ifdef _WIN32
int WINAPI WinMain (HINSTANCE hInst, HINSTANCE hPrevInst, LPSTR lpCmdLine,
                   int nCmdShow) {
  ( void )hInst;
  ( void )hPrevInst;
  ( void )lpCmdLine;
  ( void )nCmdShow;
# else
int main ( void ) {
#endif
  webview_t w = webview_create ( 0 , NULL );
  webview_set_title (w, " Basic Example " );
  webview_set_size (w, 480 , 320 , WEBVIEW_HINT_NONE);
  webview_set_html (w, " Thanks for using webview! " );
  webview_run (w);
  webview_destroy (w);
  return 0 ;
}

建構範例

建構專案： 

cmake -G Ninja -B build -S . -D CMAKE_BUILD_TYPE=Release
cmake --build build

在build/bin目錄中找到可執行檔。

建設合併圖書館

使用 CMake 建置專案時可以建置合併函式庫，也可以直接呼叫amalgamate.py腳本。

下面描述後者。 

python3 scripts/amalgamate.py --output webview_amalgamation.h core/include/webview/webview.h

請參閱python3 scripts/amalgamate.py --help以了解腳本用法。

非 CMake 使用

下面是直接呼叫類似 GCC/Clang 的編譯器的範例。使用上一範例中的main.cc檔案。

將合併的webview.h標頭或所有單獨檔案放入libs/webview中，並將 MS WebView2 中的WebView2.h放入libs中。

在您選擇的平台上建立項目。

macOS 
 c++ main.cc -O2 --std=c++11 -Ilibs -framework WebKit -ldl -o example
Linux 
 c++ main.cc -O2 --std=c++11 -Ilibs $(pkg-config --cflags --libs gtk+-3.0 webkit2gtk-4.1) -ldl -o example
視窗
 c++ main.cc -O2 --std=c++14 -static -mwindows -Ilibs -ladvapi32 -lole32 -lshell32 -lshlwapi -luser32 -lversion -o example

客製化

CMake 目標

以下 CMake 目標可用：

姓名描述
webview::core C++ 的頭檔。
webview::core_shared C 的共享庫。
webview::core_static C 的靜態庫。

按需檢查和相關任務的特殊目標：

姓名描述
webview_format_check檢查 clang-format 的檔案。
webview_reformat使用 clang-format 重新格式化檔案。

CMake 選項

當獨立建置 webview 專案或將其建置為專案的一部分時（例如使用 FetchContent），可以使用下列布林選項。

選項描述
WEBVIEW_BUILD啟用建築
WEBVIEW_BUILD_AMALGAMATION建立聯合圖書館
WEBVIEW_BUILD_DOCS建構文檔
WEBVIEW_BUILD_EXAMPLES建構範例
WEBVIEW_BUILD_SHARED_LIBRARY建構共享庫
WEBVIEW_BUILD_STATIC_LIBRARY建構靜態庫
WEBVIEW_BUILD_TESTS建置測試
WEBVIEW_ENABLE_CHECKS啟用檢查
WEBVIEW_ENABLE_CLANG_FORMAT啟用 clang-format
WEBVIEW_ENABLE_CLANG_TIDY啟用 clang-tidy
WEBVIEW_ENABLE_PACKAGING啟用打包
WEBVIEW_INSTALL_DOCS安裝文件
WEBVIEW_INSTALL_TARGETS安裝目標
WEBVIEW_IS_CI由CI環境變數初始化
WEBVIEW_PACKAGE_AMALGAMATION套件合併庫
WEBVIEW_PACKAGE_DOCS包文檔
WEBVIEW_PACKAGE_HEADERS包頭
WEBVIEW_PACKAGE_LIB打包編譯的函式庫
WEBVIEW_STRICT_CHECKS嚴格把關
WEBVIEW_STRICT_CLANG_FORMAT嚴格執行 clang-format 檢查
WEBVIEW_STRICT_CLANG_TIDY嚴格檢查鏗鏘整齊
WEBVIEW_USE_COMPAT_MINGW使用 MinGW 的兼容性助手
WEBVIEW_USE_STATIC_MSVC_RUNTIME使用靜態運行時庫（MSVC）

筆記

預設啟用檢查，但預設不會對本機開發強制執行檢查（由WEBVIEW_IS_CI選項控制）。

非布林選項：

選項描述
WEBVIEW_CLANG_FORMAT_EXE clang-format的可執行檔的路徑。
WEBVIEW_CLANG_TIDY_EXE clang-tidy可執行檔的路徑。

套餐消費者選項

使用 webview CMake 套件時可以使用這些選項。

Linux 特定選項

選項描述
WEBVIEW_WEBKITGTK_API WebKitGTK API，例如6.0 、 4.1 （建議）或4.0 。這也會自動決定 GTK 版本。預設使用最新推薦的 API（如果可用），或最新已知且可用的 API。請注意，API 版本之間可能存在重大差異，從而影響功能可用性。有關功能可用性的詳細信息，請參閱 webview API 文件。

Windows 特定選項

選項描述
WEBVIEW_MSWEBVIEW2_VERSION MS WebView2 版本，例如1.0.1150.38 。
WEBVIEW_USE_BUILTIN_MSWEBVIEW2使用內建的 MS WebView2。

編譯時選項

這些選項可以指定為預處理器巨集來修改構建，但在使用 CMake 時不需要。

C API聯動

姓名描述
WEBVIEW_API控制 C API 連結、符號可見性以及是否為共享庫。預設情況下，對於 C++ 是inline ，對於 C 是extern 。
WEBVIEW_BUILD_SHARED修改WEBVIEW_API以建立共用庫。
WEBVIEW_SHARED修改WEBVIEW_API以使用共用庫。
WEBVIEW_STATIC修改WEBVIEW_API以建置或使用靜態庫。

後端選擇

姓名描述
WEBVIEW_GTK編譯 GTK/WebKitGTK 後端。
WEBVIEW_COCOA編譯 Cocoa/WebKit 後端。
WEBVIEW_EDGE編譯 Win32/WebView2 後端。

Windows 特定選項

選項描述
WEBVIEW_MSWEBVIEW2_BUILTIN_IMPL啟用 ( 1 ) 或停用 ( 0 ) WebView2 載入程式的內建實作。啟用此功能可以避免對WebView2Loader.dll的需要，但如果 DLL 存在，則 DLL 優先。預設情況下啟用此選項。
WEBVIEW_MSWEBVIEW2_EXPLICIT_LINK啟用 ( 1 ) 或停用 ( 0 ) WebView2Loader.dll的明確連結。啟用此功能可以避免導入庫 ( *.lib ) 的需要。如果啟用了WEBVIEW_MSWEBVIEW2_BUILTIN_IMPL ，則預設啟用此選項。

MinGW-w64 要求

為了在 Windows 上使用 MinGW-w64 建置此程式庫，它必須支援 C++14 並具有最新的 Windows SDK。

已知相容的發行版：

  • LLVM MinGW
  • 系統2
  • WinLibs

MS WebView2 載入器

使用我們的 webview 程式庫時，連結 Microsoft WebView2 SDK 的 WebView2 載入程式部分並不是硬性要求，並且與您的應用程式一起分發WebView2Loader.dll也不是硬性要求。

但是，如果WebView2Loader.dll在運行時可載入（例如從可執行檔的目錄中），則會使用它；否則將使用我們的簡約實作。

如果您希望使用官方加載程序，請記住將其與您的應用程式一起分發，除非您靜態連結它。使用 Visual C++ 可以靜態連結它，但不能使用 MinGW-w64。

以下是我們的載入器實作與官方實作的一些值得注意的不同之處：

  • 不支援使用環境變數（例如WEBVIEW2_BROWSER_EXECUTABLE_FOLDER配置 WebView2。
  • 不支援 Microsoft Edge Insider（預覽）頻道。

自訂選項可用於變更程式庫整合 WebView2 載入器的方式。

發展

該專案使用 CMake 建置系統。

開發依賴

除了本文檔前面提到的使用webview 庫進行開發的依賴項之外，在 webview 庫的開發過程中還會用到以下相依性。

  • 合併：
    • Python >= 3.9
  • 檢查：
    • clang-format
    • clang-tidy
  • 文件:
    • 強力氧
    • 圖形視覺化

大樓

cmake -G " Ninja Multi-Config " -B build -S .
cmake --build build --config CONFIG

將CONFIG替換為Debug 、 Release或Profile之一。使用Profile啟用程式碼覆蓋率 (GCC/Clang)。

運行測試： 

ctest --test-dir build --build-config CONFIG

產生測試覆蓋率報告： 

gcovr

在build/coverage中找到覆蓋率報告。

包裝

建置專案的Debug和Release配置後運行此命令： 

 cd build
cpack -G External -C " Debug;Release " --config CPackConfig.cmake

交叉編譯

請參閱cmake/toolchains目錄中的 CMake 工具鏈檔案。

例如，它針對具有 POSIX 執行緒的 Linux 上的 Windows x64： 

cmake -G " Ninja Multi-Config " -B build -S . -D CMAKE_TOOLCHAIN_FILE=cmake/toolchains/x86_64-w64-mingw32.cmake -D WEBVIEW_TOOLCHAIN_EXECUTABLE_SUFFIX=-posix
cmake --build build --config CONFIG

限制

瀏覽器功能

由於瀏覽器引擎不是一個完整的網頁瀏覽器，它可能不支援您期望瀏覽器提供的所有功能。如果您發現某個功能未如預期運作，請查閱瀏覽器引擎的文檔，並在您認為該程式庫應該支援該功能時提出問題。

例如，該程式庫不會嘗試支援使用者互動功能，如alert() 、 confirm()和prompt()以及其他非必要功能，如console.log() 。

綁定

語言專案
艾達香檳/webview-ada
包子tr1ckydev/webview-bun
C#網頁視圖/webview_csharp
C3香檳/webview-c3
水晶納克維斯/網頁視圖
D thechampagne/webview-d, ronnie-w/webviewd
德諾網頁視圖/webview_deno
去網頁視圖/webview_go
港口EricLendvai/Harbour_WebView
哈斯克爾萊蒂爾/webviewhs
珍妮特珍妮特朗/webview
爪哇webview/webview_java
科特林Winterreisender/webviewko
尼姆oskca/webview、neroist/webview
Node.js Winterreisender/webview-nodejs
奧丁thechampagne/webview-odin
帕斯卡PierceNg/fpwebview
Python congzhangzh/webview_python,zserge/webview-python
PHP 0小時/php-webview
紅寶石Maaarcocr/webview_ruby
鏽Boscop/網頁視圖
迅速jakenvac/SwiftWebview
V馬里西皮/mui、ttytm/webview
之字形香檳/webview-zig

如果您希望將綁定新增至清單中，請隨時提交拉取請求或開啟問題。

產生綁定

您可以使用包含的 SWIG 介面 ( webview.i ) 自行產生庫的綁定。

以下是一些幫助您入門的範例。為了簡潔起見，使用了 Unix 風格的命令列。 

mkdir -p build/bindings/{python,csharp,java,ruby}
swig -c++ -python -outdir build/bindings/python -o build/bindings/python/python_wrap.cpp webview.i
swig -c++ -csharp -outdir build/bindings/csharp -o build/bindings/csharp/csharp_wrap.cpp webview.i
swig -c++ -java -outdir build/bindings/java -o build/bindings/java/java_wrap.cpp webview.i
swig -c++ -ruby -outdir build/bindings/ruby -o build/bindings/ruby/ruby_wrap.cpp webview.i

執照

程式碼是在 MIT 許可下分發的，也可以在您的專有專案中隨意使用它。

展開
附加信息
相關應用
爲您推薦
相關資訊 全部