使用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 项目

使用CLion创建包含有QWebEngineView控件的项目_第1张图片

3. 设置ToolChain 工具链

使用CLion创建包含有QWebEngineView控件的项目_第2张图片

4. CMake 设置

使用CLion创建包含有QWebEngineView控件的项目_第3张图片

5. 编译运行

使用CLion创建包含有QWebEngineView控件的项目_第4张图片

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

开发包含WebEngineView的项目

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

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

1. 新建一个文件夹src

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

1.1 新建文件夹

右键根节点 --> 新建 --> directory
使用CLion创建包含有QWebEngineView控件的项目_第5张图片

1.2 标记为源代码目录

使用CLion创建包含有QWebEngineView控件的项目_第6张图片

1.3 将main.cpp移动到src下

使用CLion创建包含有QWebEngineView控件的项目_第7张图片

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

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

2.2 新建一个Qt 界面类

使用CLion创建包含有QWebEngineView控件的项目_第8张图片

此时的项目结构如下:
使用CLion创建包含有QWebEngineView控件的项目_第9张图片

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

使用CLion创建包含有QWebEngineView控件的项目_第10张图片

2.4 编辑widget.ui文件

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

使用CLion创建包含有QWebEngineView控件的项目_第11张图片

使用CLion创建包含有QWebEngineView控件的项目_第12张图片

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

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

2.6 加入 webengineview模块

使用CLion创建包含有QWebEngineView控件的项目_第13张图片

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. 运行测试

一切无误,如下所示:
使用CLion创建包含有QWebEngineView控件的项目_第14张图片

总结:

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

你可能感兴趣的:(#,Qt,CLion,qt,开发语言)