最近项目需要用到QtwebEngine加载自建网页，整理手顺教程如下：
  Ｑt安装就不讲了，我这里是ubuntu16.04 + Qt Creator 4.6.2(Based on Qt 5.9.6 (GCC 5.3.1 20160406 (Red Hat 5.3.1-6), 64 bit))

第一步、新建项目：

１、“new project” -> “Application” -> “Qt Widgets Application” ->“Choose”

--_001

2、输入项目名称 -> “浏览…"(选择项目存储路径，尽量不包含中文）-> “下一步”

--_002

３、“下一步”（Debug\Release\Profile的路径默认即可，区别自己搜索）

--_003

4、类信息默认即可，基类选择为QMainWindow,单击"下一步"

--_004

5、项目管理，单击"完成"即可（如果采用了版本控制系统，添加即可，这里演示不添加）

--_005

6、默认生成目录如图所示：

--_006

７、　”Ctrl + R“执行一下，显示一个空白的窗口

--_010

第二步、配置"speechToTextWave.pro"文件,添加一句”QT += webenginewidgets“如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

#-------------------------------------------------
#
# Project created by QtCreator 2018-11-08T09:26:56
#
#-------------------------------------------------

QT       += core gui
QT       += webenginewidgets　　　//添加此行

greaterThan(QT_MAJOR_VERSION, 4): QT += widgets

TARGET = speechToTextWave
TEMPLATE = app

# The following define makes your compiler emit warnings if you use
# any feature of Qt which has been marked as deprecated (the exact warnings
# depend on your compiler). Please consult the documentation of the
# deprecated API in order to know how to port your code away from it.
DEFINES += QT_DEPRECATED_WARNINGS

# You can also make your code fail to compile if you use deprecated APIs.
# In order to do so, uncomment the following line.
# You can also select to disable deprecated APIs only up to a certain version of Qt.
#DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000    # disables all the APIs deprecated before Qt 6.0.0


SOURCES += \
        main.cpp \
        mainwindow.cpp

HEADERS += \
        mainwindow.h

FORMS += \
        mainwindow.ui

第三步、添加qml文件和html路径及文件

１、添加添加qml文件
鼠标放在项目名称"speechToTextWave"上,右键单击->“添加新文件…” ->Qt -> QML File(Qt Quick2) -> Choose
--_007

填写文件名　-> “下一步”　-> “完成”　即可

--_008
--_009

2、添加index.html文件，我放在项目同级目录”html“文件夹下：
项目同级目录新建”html“文件夹，并创建index.html文件：

--_011

--_012

我所编写index.html文件如下所示，你需要自己编写，我这里引用了图片。

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
   
   <!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<meta name="Generator" content="sublimeText">   <!--编辑器的名称-->
  	<meta name="Author" content="PattenKuo">       
  	<meta name="Keywords" content="Austin">
  	<meta name="Description" content="DialogWindow">
	<title>Voice Assistant</title>
	<style>

    .content {
        height: document.body.clientHeight;
        width: document.body.clientWidth;
        background-repeat: no-repeat;
        background-image: url(./images/cover.png);
    }
    .ButtonArea{
    	display: flex;
        justify-content: center; /* 水平居中 */
        align-items: center;     /* 垂直居中 */
        flex-direction: column;

    }
    .recordButton{
    	height: 350px;
    	width: 350px;
    	margin-top: 100px;
    	animation:play 1s infinite alternate;
    	animation-play-state: paused | running; 
    }
    .UserWords{
    	margin-top: 120px;
    	font-weight: bold;
    	font-size: 40px;
    	color: white;
    }

    /*注意要在动画的时候，可能会导致覆盖，这个时候也是需要去将其进行旋转处理的*/
    @-webkit-keyframes play {
      25%{transform: scale(1.2) }
      50%{transform: scale(1.3) }
      75%{transform: scale(1.2) }
    }

    </style>
    <script type="text/javascript">

    window.onload=function(){	//let animation paused
      let UserWords = document.querySelector('.UserWords'); 
	  let elem = document.querySelector('.recordButton');
      let state = elem.style['animationPlayState'];
      elem.style['animationPlayState'] = 'paused'; 
      UserWords.innerText = 'Start'; 

	}


    function StartRecord(){		//to fetch the words from users
    	//window.open("https://www.baidu.com");
    	let UserWords = document.querySelector('.UserWords'); 
    	let elem = document.querySelector('.recordButton');
    	let state = elem.style['animationPlayState']; 
    	 if(state === 'paused') { 
        	elem.style['animationPlayState'] = 'running'; 
        	UserWords.innerText = 'stop'; 
    	} else { 
        		elem.style['animationPlayState'] = 'paused'; 
        		UserWords.innerText = 'Start'; 
    	}  
    }
    </script>
</head>
<body class="content">
	<div class="ButtonArea">
		 <div class="recordButton" id="recordButton" onclick="StartRecord()">
		 	<img src="./images/recordButton.png" >
		 </div>
		 <div class="UserWords">
		 	<text > Start </text>
		 </div>
	</div>
</body>
</html>

3、创建qrc资源路径：
鼠标放在项目名称"speechToTextWave"上,右键单击->“添加新文件…” ->Qt -> Qt Resource File -> Choose

--_019

填写文件名　-> “下一步”　-> “完成”　即可

--_020

--_021

４、添加html路径到qrcresource.qrc：
鼠标放在名称"qrcresource.qrc"上,右键单击->“Add Existing Directory…” -> “浏览…” -> 选择刚刚新建的”Html“文件夹　-> “Open”

--_022

单击"Start Parsing" -> 选择当前文件夹　-> “OK”

--_014

4、如图所示，项目文件目录和"speechToTextWave.pro"变化为：

--_017

5、添加刚刚新建的qml.qml文件到qrcresource.qrc:
鼠标放在名称"qrcresource.qrc"上,右键单击->“添加现有文件” ->　选择”qml.qml“文件　-> “Open”
--_023
qrcresource.qrc目录文件如下图所示：
--_024

第四步、编写文件实现功能

main.cpp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
 #include "mainwindow.h"
#include <QApplication>
#include<QtWebEngineWidgets>
#include<QWebEngineView>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
//    MainWindow w;
//    w.show();

    QQmlApplicationEngine engine;
    engine.load(QUrl(QStringLiteral("qrc:/qml.qml")));

    return a.exec();
}

qml.qml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

import QtQuick 2.0
import QtQuick.Controls 2.2
import QtQuick.Window 2.3
import QtWebEngine 1.1

ApplicationWindow {
    width: 800
    height: 800
    visible: true
    x:100
    y:100
    flags: Qt.WindowFullScreen | Qt.FramelessWindowHint
    WebEngineView {
        url: "qrc:/../../speechToTextWave/Html/index.html"
        anchors.fill: parent
    }
}

第五步、大功告成，调试及BUG

若出现
file:///home/pattenkuo/AllTest/speechToTextWave/build-speechToTextWave-Desktop_Qt_5_9_6_GCC_64bit-Debug/qml.qml:-1 No such file or directory

与编译调试目录有关

--_018

只需把qml.qml文件cpoy到指定的文件夹目录，比如我需要放置在目录”build-speechToTextWave-Desktop_Qt_5_9_6_GCC_64bit-Debug“下即可

知识补充：

致谢原文：QT中 No such file or directory 问题解决

.pro文件中各变量意义：

HEADERS 指定工程的 C头文件（.h）。
◆ SOURCES 指定工程的Ｃ实现文件（.cpp）。
◆ FORMS 指定需要 uic 处理的由 Qt 设计师生成的.ui 文件。
◆ RESOURCES 指定需要 rcc 处理的.qrc 文件。
◆ DEFINES 指定预定义的 C预处理符号。
◆ INCLUDEPATH 指定 C编译器搜索全局头文件的路径。
◆ LIBS 指定工程要链接的库。库既可以通过绝对路径指定，也可以使用源自 Unix 的-L 和-l 标识符来指定（例如，-L/usr/local/lib 和-ldb_cxx）。
◆ CONFIG 指定各种用于工程配置和编译的参数。
◆ QT 指定所要使用的 Qt 模块（默认是 core gui，对应于 QtCore 和 QtGui 模块）。
◆ VERSION 指定目标库的版本号。
◆ TARGET 指定可执行文件或库的基本文件名，其中不包含任何的扩展、前缀或版本
号（默认的是当前的目录名）。
◆ DESTDIR 指定可执行文件放置的目录（默认值是平台相关的。
例如，在 Linux 上，指当前目录；在 Windows 上，则是指 debug 或 release 子目
录）。
◆ DLLDESTDIR 指定目标库文件放置的目录（默认路径与 DESTDIR 相同）。
CONFIG 变量用来控制编译过程中的各个方面。它支持下面这些参数：
◆ debug 是指具有调试信息的可执行文件或者库，链接 Qt 库的调试版。
◆ release 是指编译不具有调试信息的可执行文件或者库，链接发行版的 Qt 库。如果
同时指定 debug 和 release，则 debug 有效。
◆ warn_off 会关闭大量的警告。默认情况下，警告的状态是打开的。
◆ qt 是指应用程序或者库使用 Qt。这一选项是默认包括的。
◆ dll 是指动态编译库。
◆ staticlib 是指静态编译库。
◆ plugin 是指编译一个插件。插件总是动态库，因此这一参数暗含 dll 参数。
◆ console 是指应用程序需要写控制台（使用 cout、cerr、qWarning()，等等）。
◆ app_bundle 只适用于 Mac OS X 编译，是指可执行文件被放到束中，这是 Mac OS X
的默认情况。
◆ lib_bundle 只适用于 Mac OS X 编译，指库被放到框架中。