3、项目的整体UI架构

一、MYPlayer.pro详解

MYPlayer.pro:记录了整个项目工程的设置,不建议随便修改

  • 项目模板:建立一个应用程序的makefile
# Project Type
TEMPLATE = app
  • QT引用模块
# Qt modules that are used by your project
QT += qml quick gui widgets multimedia opengl openglextensions
  • 项目编译选项与库
# Project configuration and compiler options
CONFIG += qt warn_on c++11 rtti stl thread exceptions
  • moc文件路径配置:moc 全称是 Meta-Object Compiler,也就是“元对象编译器”;编译之后就看到moc文件
    • Qt 不是使用的“标准的” C++ 语言,而是对其进行了一定程度的“扩展”。这里我们从Qt新增加的关键字就可以看出来:signals、slots 或者 emit。所以有人会觉得 Qt 的程序编译速度慢,这主要是因为在 Qt 将源代码交给标准 C++ 编译器,如 gcc 之前,需要事先将这些扩展的语法去除掉。完成这一操作的就是 moc
    • moc 全称是 Meta-Object Compiler,也就是“元对象编译器”。Qt 程序在交由标准编译器编译之前,先要使用 moc 分析 C++ 源文件。如果它发现在一个头文件中包含了宏 Q_OBJECT,则会生成另外一个 C++ 源文件。这个源文件中包含了 Q_OBJECT 宏的实现代码。这个新的文件名字将会是原文件名前面加上 moc_ 构成。这个新的文件同样将进入编译系统,最终被链接到二进制代码中去。因此我们可以知道,这个新的文件不是“替换”掉旧的文件,而是与原文件一起参与编译。另外,我们还可以看出一点,moc 的执行是在预处理器之前。因为预处理器执行之后,Q_OBJECT 宏就不存在了
# Directory where all intermediate objects and moc files should be placed
CONFIG(debug, debug|release) {
    OBJECTS_DIR = ./tmp/debug
    MOC_DIR = ./tmp/debug
} else {
    OBJECTS_DIR = ./tmp/release
    MOC_DIR = ./tmp/release
}
  • 临时文件与编译器输出的资源文件路径
# Directory where all intermediate files from uic should be placed
CONFIG(debug, debug|release) {
    UI_DIR = ./tmp/debug
} else {
    UI_DIR = ./tmp/release
}

# Directory for Qt Resource Compiler output files
CONFIG(debug, debug|release) {
    RCC_DIR = ./tmp/debug
} else {
    RCC_DIR = ./tmp/release
}
  • Debug和Release的生成路径
# Specifies where to put the target file
CONFIG(debug, debug|release) {
    contains(QMAKE_TARGET.arch, x86_64) {
        DESTDIR = $$_PRO_FILE_/../../../bin/debug/x64
    } else {
        DESTDIR = $$_PRO_FILE_/../../../bin/debug/x86
    }
} else {
    contains(QMAKE_TARGET.arch, x86_64) {
        DESTDIR = $$_PRO_FILE_/../../../bin/release/x64
    } else {
        DESTDIR = $$_PRO_FILE_/../../../bin/release/x86
    }
}
  • 指定项目目标可执行的文件名:其中不包含任何的扩展、前缀或版本号(默认的是当前的目录名)
# Name of the target file
TARGET = MYPlayer
  • 指定项目资源文件、code的编码
# Name of the resource collection files (qrc) for the target
RESOURCES += resource/MYPlayer.qrc
#RESOURCES += qml.qrc

# Codec configuration
CODECFORTR = UTF-8
CODECFORSRC = UTF-8
  • 项目使用的jml和js文件
# Source files which contains strings for i18n
lupdate_only {
    SOURCES += resource/ui/qml/*.qml \
              resource/ui/qml/*.js
}
  • 翻译文件:可以打开resource/ui/translation/MYPlayer_zh_CN.ts文件查看,支持中英文的翻译
# Translation file path
TRANSLATIONS += ./resource/ui/translation/MYPlayer_zh_CN.ts

在这里插入图片描述

  • 编译选项定义:QT_DEPRECATED_WARNINGS表示QT的某些功能被标记为过时的时候,编译器会发出警告
# The following define makes your compiler emit warnings if you use
# any Qt feature that has been marked deprecated (the exact warnings
# depend on your compiler). Refer to the documentation for the
# deprecated API to know how to port your code away from it.
DEFINES += QT_DEPRECATED_WARNINGS
  • 项目源文件
# Source files in the project
SOURCES += \
        MYAudioPlay.cpp \
        MYAudioThread.cpp \
        MYDecode.cpp \
        MYDecodeThread.cpp \
        MYDemux.cpp \
        MYDemuxThread.cpp \
        MYResample.cpp \
        MYVideoThread.cpp \
        MYVideoOutput.cpp \
        MYPlay.cpp \
        main.cpp \
        MainApp.cpp \
        MYSubTitle.cpp \
  • 项目头文件及包含文件路径
# Header files for the project
HEADERS += MainApp.h \
    IVideoCall.h \
    MYAudioPlay.h \
    MYAudioThread.h \
    MYDecode.h \
    MYDecodeThread.h \
    MYDemux.h \
    MYDemuxThread.h \
    MYResample.h \
    MYVideoThread.h \
    MYVideoOutput.h \
    MYPlay.h \
    MYSubTitle.h \

# Include path
INCLUDEPATH += ../../include
  • 项目中使用的库文件
# Libaray path and libaray
CONFIG(debug, debug|release) {
    contains(QMAKE_TARGET.arch, x86_64) {
        LIBS += -L"$$PWD/../../lib/debug/x64/"
    } else {
        LIBS += -L"$$PWD/../../lib/debug/x86/"
    }
#    win32:LIBS += libqrencode.lib\
#                  libzint.lib
#    unix:LIBS += -lqrencode\
#                 -lzint
} else {
    contains(QMAKE_TARGET.arch, x86_64) {
        LIBS += -L"$$PWD/../../lib/release/x64/"
    } else {
        LIBS += -L"$$PWD/../../lib/release/x86/"
    }
#    win32:LIBS += libqrencode.lib\
#                  libzint.lib
#    unix:LIBS += -lqrencode\
#                 -lzint
}
win32:LIBS += avformat.lib\
              avcodec.lib\
              avutil.lib\
              swresample.lib\
              swscale.lib
  • win32平台需要的rc文件:其他平台没有维护,默认即可
################################################################################
# Windows platform
win32 {
    RC_FILE = win32/MYPlayer.rc
    HEADERS += win32/targetver.h \
               win32/resource.h
    OTHER_FILES += win32/MYPlayer.rc
}

################################################################################
# Linux platform
linux {
}

################################################################################
# Mac OS X platform
macx {
}

二、Visual Stdio启动源代码

1 - 生成vs项目文件

  • a.项目目录下新建GenerateVCProj.batqmake -tp vc MYPlayer.pro
    在这里插入图片描述
  • b.运行GenerateVCProj.bat生成vs项目文件:使用vs打开MYPlayer.vcxproj文件即可启动vs项目
    在这里插入图片描述

2 - vs下项目的目录结构说明

在这里插入图片描述

3 - MainApp.h启动类分析

  • class MainApp : public QApplication:MainApp继承QApplication类,主要是为了完成程序初始化的工作,而这部分初始化工作的目的是为了在项目中建立界面管理的机制

在这里插入图片描述

  • MainApp中加入了Q_OBJECT宏:这样之后我们的项目中就可以使用信号(signal)和槽(slot)机制
    在这里插入图片描述
  • MainApp的成员变量
    在这里插入图片描述
  • MainApp的成员方法
    在这里插入图片描述
  • 信号和槽
    在这里插入图片描述
  • QML属性-Q_PROPERTY:QML界面层的处理关联上逻辑层的复杂逻辑
    Q_PROPERTY(int demoNum READ demoNum WRITE setDemoNum NOTIFY demoNumChanged):demoNum变量读、写、更改都会在界面上触发事件
    Q_PROPERTY(QString language READ language WRITE setLanguage NOTIFY languageChanged):同理语言的读、写、更改也会关联

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
回答: 一个典型的React web项目整体架构通常包括以下几个部分:react-dom、react和其他相关库。其中,react-dom是连接React和web平台的桥梁,负责将React应用的运行结果输出到web界面上。它通过ReactDOM.render函数将React组件渲染到指定的DOM节点上。而react包提供了定义React组件的必要函数,包括React.Component用于定义类组件,setState用于更新组件的状态,以及hook用于在函数组件中使用状态和其他React特性。此外,React项目还可以使用其他相关库来增强功能,比如使用Material UI作为UI/组件库,使用Formik实现表单,使用react-router实现路由。整个项目架构可以基于create-react-app构建,并使用TypeScript编写,同时配合Express后端进行数据交互。\[1\]\[2\]\[3\] #### 引用[.reference_title] - *1* *2* [react 底层四大核心内容架构](https://blog.csdn.net/weixin_43294560/article/details/123450497)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [有哪些值得学习的大型 React 开源项目?](https://blog.csdn.net/u012384510/article/details/126151874)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

无休止符

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值