使用CLion创建包含有QWebEngineView控件的项目

为啥用CLion开发QT?

• CLion 能够支持Qt的开发

• QtCreator 在代码规模偏大时,自动完成的提示反应会比较迟钝

• .clangformat格式也是坑,调整了很多次也不顺心

• 个人比较喜欢IDEA开发程序的高度顺滑,想来作为统一家族的CLion也不会差

怎么使用CLion开发QT ?

1. 下载安装

CLion: A Cross-Platform IDE for C and C++ by JetBrains

2.新建Qt Widgets 项目

3. 设置ToolChain 工具链

4. CMake 设置

5. 编译运行

CLion从模板生成的简单widget项目,运行起来还是很顺畅的。

开发包含WebEngineView的项目

以上述代码为基础，开发一个自定义的widget，包含一个webengineview的控件

Clion使用cmake作为项目管理工具，反正我对cmak不懂，正好一道学习一些cmake的知识。有些东西还没有弄清除。只能随用随学随记录。

1. 新建一个文件夹src

个人偏好：喜欢将源代码集中放到一个源代码目录中。

1.1 新建文件夹

右键根节点 --> 新建 --> directory

1.2 标记为源代码目录

1.3 将main.cpp移动到src下

2. 再新建一个自定义类的文件夹

2.1 新建自定义类的文件夹 Widget

2.2 新建一个Qt 界面类

此时的项目结构如下:

2.3 定义外部工具 使用QtDesigner编辑UI文件

2.4 编辑widget.ui文件

右键 widget.ui 使用 外部工具打开,拖入一个QWebEngineView控件，设置QWebEngineView的url，比如 https://www.baidu.com

2.5 点击编译 ,从ui生成对应的头文件

此时ui文件还没有生成 相应的头文件,需要点击才会生成

2.6 加入 webengineview模块

2.7 cmake 加入 运行时的依赖

由于对cmake 不熟悉,只能手动填写了,详见55~80行,这是cmake在打包的时候,需要复制一些依赖的程序和动态链接库, webengineview依赖的东西比较多,而且和普通的库文件不太一致。

cmake_minimum_required(VERSION 3.22)
project(test)

set(CMAKE_CXX_STANDARD 14)
set(CMAKE_AUTOMOC ON)
set(CMAKE_AUTORCC ON)
set(CMAKE_AUTOUIC ON)

set(CMAKE_PREFIX_PATH "C:/Qt/5.14.2/msvc2017_64")

find_package(Qt5 COMPONENTS
        Core
        Gui
        Widgets
        WebEngineWidgets
        REQUIRED)

add_executable(test src/main.cpp src/Widget/widget.cpp src/Widget/widget.h src/Widget/widget.ui)
target_link_libraries(test
        Qt5::Core
        Qt5::Gui
        Qt5::Widgets
        Qt5::WebEngineWidgets
        )

if (WIN32)
    set(DEBUG_SUFFIX)
    if (MSVC AND CMAKE_BUILD_TYPE MATCHES "Debug")
        set(DEBUG_SUFFIX "d")
    endif ()
    set(QT_INSTALL_PATH "${CMAKE_PREFIX_PATH}")
    if (NOT EXISTS "${QT_INSTALL_PATH}/bin")
        set(QT_INSTALL_PATH "${QT_INSTALL_PATH}/..")
        if (NOT EXISTS "${QT_INSTALL_PATH}/bin")
            set(QT_INSTALL_PATH "${QT_INSTALL_PATH}/..")
        endif ()
    endif ()
    if (EXISTS "${QT_INSTALL_PATH}/plugins/platforms/qwindows${DEBUG_SUFFIX}.dll")
        add_custom_command(TARGET ${PROJECT_NAME} POST_BUILD
                COMMAND ${CMAKE_COMMAND} -E make_directory
                "$/plugins/platforms/")
        add_custom_command(TARGET ${PROJECT_NAME} POST_BUILD
                COMMAND ${CMAKE_COMMAND} -E copy
                "${QT_INSTALL_PATH}/plugins/platforms/qwindows${DEBUG_SUFFIX}.dll"
                "$/plugins/platforms/")
    endif ()
    foreach (QT_LIB Core Gui Widgets)
        add_custom_command(TARGET ${PROJECT_NAME} POST_BUILD
                COMMAND ${CMAKE_COMMAND} -E copy
                "${QT_INSTALL_PATH}/bin/Qt5${QT_LIB}${DEBUG_SUFFIX}.dll"
                "$")
    endforeach (QT_LIB)


    #    WebEngineWidgets
    if ( TRUE )
        MESSAGE("copy WebEngineWidgets")
        # copy WebEngineWidgets 模块的依赖 *.dll
        foreach (WebEngineWidgets_dependency Network Positioning PrintSupport Qml QmlModels Quick QuickWidgets WebChannel WebEngineCore WebEngineWidgets)
            add_custom_command(TARGET ${PROJECT_NAME} POST_BUILD
                    COMMAND ${CMAKE_COMMAND} -E copy
                    "${QT_INSTALL_PATH}/bin/Qt5${WebEngineWidgets_dependency}${DEBUG_SUFFIX}.dll"
                    "$")
        endforeach (WebEngineWidgets_dependency)
        # copy  WebEngineWidgets 模块的依赖 QtWebEngineProcess.exe
        add_custom_command(TARGET ${PROJECT_NAME} POST_BUILD
                COMMAND ${CMAKE_COMMAND} -E copy                 "${QT_INSTALL_PATH}/bin/QtWebEngineProcess${DEBUG_SUFFIX}.exe"
                "$")
        # copy  WebEngineWidgets 模块的依赖 translations 目录
        add_custom_command(TARGET ${PROJECT_NAME} POST_BUILD
                COMMAND ${CMAKE_COMMAND} -E copy_directory
                "${QT_INSTALL_PATH}/translations"
                "$/translations")
        # copy  WebEngineWidgets 模块的依赖 translations 目录
        add_custom_command(TARGET ${PROJECT_NAME} POST_BUILD
                COMMAND ${CMAKE_COMMAND} -E copy_directory
                "${QT_INSTALL_PATH}/resources"
                "$/resources")
    endif ()
endif ()

3. 运行测试

一切无误，如下所示：

总结：

这篇日志 主要记录 WebEngineView 模块的copy依赖的cmake语句，其它可略过，没啥实际内容