ไลบรารี่ webview ข้ามแพลตฟอร์มขนาดเล็กสำหรับ C/C++ เพื่อสร้าง GUI ข้ามแพลตฟอร์มที่ทันสมัย
เป้าหมายของโครงการคือการสร้างเลเยอร์นามธรรม HTML5 UI ทั่วไปสำหรับแพลตฟอร์มที่ใช้กันอย่างแพร่หลายที่สุด
รองรับการเชื่อมโยง JavaScript แบบสองทาง (เพื่อเรียก JavaScript จาก C/C++ และเพื่อเรียก C/C++ จาก JavaScript)
บันทึก
การเชื่อมโยงภาษาสำหรับ Go ได้ย้ายไปแล้ว เวอร์ชัน <= 0.1.1 มีอยู่ในที่เก็บ นี้
แพลตฟอร์ม | เทคโนโลยี |
---|---|
ลินุกซ์ | GTK, WebKitGTK |
ระบบปฏิบัติการ macOS | โกโก้, WebKit |
หน้าต่าง | Windows API, WebView2 |
เอกสารที่เป็นปัจจุบันที่สุดอยู่ในซอร์สโค้ด การปรับปรุงเอกสารเป็นความพยายามอย่างต่อเนื่อง และคุณยินดีเป็นอย่างยิ่งที่จะมีส่วนร่วม
คอมไพเลอร์ของคุณต้องรองรับ C++11 ขั้นต่ำ ยกเว้นแพลตฟอร์มที่ต้องการเวอร์ชันที่ทันสมัยกว่านี้
โปรเจ็กต์นี้ใช้ CMake และ Ninja และถึงแม้จะแนะนำเพื่อความสะดวกของคุณ แต่เครื่องมือเหล่านี้ก็ไม่จำเป็นสำหรับการใช้ไลบรารี
ไลบรารี GTK และ WebKitGTK จำเป็นสำหรับการพัฒนาและการเผยแพร่ คุณต้องตรวจสอบที่เก็บแพ็คเกจของคุณเกี่ยวกับแพ็คเกจที่จะติดตั้ง
apt install libgtk-4-dev libwebkitgtk-6.0-dev
apt install libgtk-4-1 libwebkitgtk-6.0-4
apt install libgtk-3-dev libwebkit2gtk-4.1-dev
apt install libgtk-3-0 libwebkit2gtk-4.1-0
apt install libgtk-3-dev libwebkit2gtk-4.0-dev
apt install libgtk-3-0 libwebkit2gtk-4.0-37
dnf install gtk4-devel webkitgtk6.0-devel
dnf install gtk4 webkitgtk6.0
dnf install gtk3-devel webkit2gtk4.1-devel
dnf install gtk3 webkit2gtk4.1
dnf install gtk3-devel webkit2gtk4.0-devel
dnf install gtk3 webkit2gtk4.0
pkg install webkit2-gtk4
pkg install webkit2-gtk3
pkg-config
กับ --cflags
และ --libs
เพื่อรับตัวเลือกคอมไพเลอร์/ลิงก์เกอร์สำหรับหนึ่งในชุดโมดูลเหล่านี้:gtk4 webkitgtk-6.0
gtk+-3.0 webkit2gtk-4.1
gtk+-3.0 webkit2gtk-4.0
dl
WebKit
dl
advapi32 ole32 shell32 shlwapi user32 version
wxallowed
(ดูที่ mount(8)) ลงใน fstab ของคุณเพื่อหลีกเลี่ยงการป้องกันหน่วยความจำ W^X สำหรับปฏิบัติการของคุณ โปรดดูว่ามันใช้งานได้โดยไม่ต้องปิดการใช้งานคุณสมบัติความปลอดภัยนี้ก่อนหรือไม่คอมไพเลอร์ของคุณต้องรองรับ C++14 และเราแนะนำให้จับคู่กับ Windows 10 SDK ที่เป็นปัจจุบัน
สำหรับ Visual C++ เราขอแนะนำ Visual Studio 2022 หรือใหม่กว่า มีข้อกำหนดบางประการเมื่อใช้ MinGW-w64
นักพัฒนาและผู้ใช้ปลายทางต้องติดตั้งรันไทม์ WebView2 บนระบบของตนสำหรับ Windows เวอร์ชันใดก็ตามก่อน Windows 11
หากคุณเป็นผู้พัฒนาโครงการนี้ โปรดไปที่ส่วนการพัฒนา
คุณจะมีแอปที่ใช้งานได้ แต่ขอแนะนำให้สำรวจตัวอย่างที่มีอยู่
สร้างไฟล์ต่อไปนี้ในไดเร็กทอรีใหม่:
.gitignore
:
# Build artifacts
/build
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 ;
}
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
สำหรับการใช้งานสคริปต์
นี่คือตัวอย่างสำหรับการเรียกใช้คอมไพเลอร์ที่มีลักษณะคล้าย GCC/Clang โดยตรง ใช้ไฟล์ main.cc
จากตัวอย่างก่อนหน้านี้
วางส่วนหัว webview.h
ที่รวมกันหรือแต่ละไฟล์ทั้งหมดลงใน libs/webview
และ WebView2.h
จาก MS WebView2 ลงใน libs
สร้างโครงการบนแพลตฟอร์มที่คุณเลือก
c++ main.cc -O2 --std=c++11 -Ilibs -framework WebKit -ldl -o example
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 ต่อไปนี้พร้อมใช้งาน:
ชื่อ | คำอธิบาย |
---|---|
webview::core | ส่วนหัวสำหรับ C ++ |
webview::core_shared | ไลบรารีที่ใช้ร่วมกันสำหรับ C. |
webview::core_static | ไลบรารีแบบคงที่สำหรับ C. |
เป้าหมายพิเศษสำหรับการตรวจสอบตามความต้องการและงานที่เกี่ยวข้อง:
ชื่อ | คำอธิบาย |
---|---|
webview_format_check | ตรวจสอบไฟล์ด้วยรูปแบบเสียงดังกราว |
webview_reformat | ฟอร์แมตไฟล์ด้วยรูปแบบเสียงดังกราว |
คุณสามารถใช้ตัวเลือกบูลีนต่อไปนี้เมื่อสร้างโปรเจ็กต์ 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 | เปิดใช้งานรูปแบบเสียงดังกราว |
WEBVIEW_ENABLE_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 | ทำให้การตรวจสอบรูปแบบเสียงดังกราวเข้มงวด |
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
ตัวเลือก | คำอธิบาย |
---|---|
WEBVIEW_WEBKITGTK_API | WebKitGTK API เพื่อเชื่อมต่อกับ เช่น 6.0 , 4.1 (แนะนำ) หรือ 4.0 นี่จะเป็นการตัดสินใจเวอร์ชัน GTK โดยอัตโนมัติ ใช้ API ที่แนะนำล่าสุดเป็นค่าเริ่มต้น หากมี หรือใช้ API ที่รู้จักและพร้อมใช้งานล่าสุด โปรดทราบว่าอาจมีความแตกต่างที่สำคัญระหว่างเวอร์ชัน API ที่อาจส่งผลต่อความพร้อมใช้งานของฟีเจอร์ ดูเอกสารประกอบ webview API สำหรับรายละเอียดเกี่ยวกับความพร้อมใช้งานของคุณสมบัติ |
ตัวเลือก | คำอธิบาย |
---|---|
WEBVIEW_MSWEBVIEW2_VERSION | เวอร์ชัน MS WebView2 เช่น 1.0.1150.38 |
WEBVIEW_USE_BUILTIN_MSWEBVIEW2 | ใช้ MS WebView2 ในตัว |
ตัวเลือกเหล่านี้สามารถระบุเป็นมาโครตัวประมวลผลล่วงหน้าเพื่อแก้ไขบิลด์ แต่ไม่จำเป็นเมื่อใช้ CMake
ชื่อ | คำอธิบาย |
---|---|
WEBVIEW_API | ควบคุมการเชื่อมโยง C API การมองเห็นสัญลักษณ์ และไม่ว่าจะเป็นไลบรารีที่แชร์หรือไม่ โดยค่าเริ่มต้น นี่เป็น inline สำหรับ C++ และ extern สำหรับ C |
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 |
ตัวเลือก | คำอธิบาย |
---|---|
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 จะต้องรองรับ C++14 และมี Windows SDK ที่เป็นปัจจุบัน
การแจกแจงที่ทราบว่าเข้ากันได้:
การเชื่อมโยงส่วนตัวโหลด WebView2 ของ Microsoft WebView2 SDK ไม่ใช่ข้อกำหนดที่ยากเมื่อใช้ไลบรารี webview ของเรา และไม่ได้กระจาย WebView2Loader.dll
กับแอปของคุณเช่นกัน
อย่างไรก็ตาม หาก WebView2Loader.dll
สามารถโหลดได้ในขณะรันไทม์ เช่น จากไดเร็กทอรีของไฟล์เรียกทำงาน ก็จะถูกนำมาใช้ มิฉะนั้นการใช้งานแบบมินิมอลลิสต์ของเราจะถูกนำมาใช้แทน
หากคุณต้องการใช้ตัวโหลดอย่างเป็นทางการ อย่าลืมแจกจ่ายมันพร้อมกับแอปของคุณ เว้นแต่คุณจะเชื่อมโยงมันแบบคงที่ การเชื่อมโยงแบบคงที่สามารถทำได้ด้วย Visual C++ แต่ไม่ใช่ MinGW-w64
ต่อไปนี้เป็นวิธีสำคัญบางประการที่การใช้งานตัวโหลดของเราแตกต่างจากการใช้งานอย่างเป็นทางการ:
WEBVIEW2_BROWSER_EXECUTABLE_FOLDER
ตัวเลือกการปรับแต่งสามารถใช้เพื่อเปลี่ยนวิธีที่ไลบรารีรวมตัวโหลด WebView2
โปรเจ็กต์นี้ใช้ระบบบิลด์ CMake
นอกเหนือจากการขึ้นต่อกันที่กล่าวถึงก่อนหน้าในเอกสารนี้สำหรับการพัฒนา ด้วย ไลบรารี webview แล้ว สิ่งต่อไปนี้ยังถูกใช้ในระหว่างการพัฒนา ไลบรารี webview
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 toolchain ในไดเร็กทอรี cmake/toolchains
ตัวอย่างเช่น สิ่งนี้กำหนดเป้าหมายเป็น Windows x64 บน Linux ด้วยเธรด POSIX:
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()
ภาษา | โครงการ |
---|---|
เอด้า | thechampagne/webview-ada |
บุญ | tr1ckydev/webview-bun |
ค# | webview/webview_csharp |
ค3 | thechampagne/webview-c3 |
คริสตัล | naqvis/webview.php? |
ดี | thechampagne/webview-d, ronnie-w/webviewd |
เดโน่ | webview/webview_deno |
ไป | เว็บวิว/webview_go |
ท่าเรือ | EricLendvai/Harbour_WebView |
ฮาสเคล | Lettier/webviewhs |
เจเน็ต | เจเน็ต-lang/webview |
ชวา | เว็บวิว/webview_java |
คอตลิน | Winterreisender/webviewko |
นิม | oskca/webview, neroist/webview |
โหนด js | Winterreisender/webview-nodejs |
โอดิน | thechampagne/webview-odin.php |
ปาสคาล | PierceNg/fpwebview |
หลาม | congzhangzh/webview_python,zserge/webview-python |
PHP | 0ชม./php-webview |
ทับทิม | Maaarcocr/webview_ruby |
สนิม | Boscop/เว็บวิว |
สวิฟท์ | jakenvac/SwiftWebview |
วี | malisipi/mui, ttytm/webview |
ซิก | thechampagne/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 คุณสามารถนำไปใช้ในโครงการที่เป็นกรรมสิทธิ์ของคุณได้เช่นกัน