基于RV1126开发板的webEnging部署方式

1. QT WebEnging介绍

       Qt WebEngine 模块提供了一个 Web 浏览器引擎，可以轻松地将万维网中的内容嵌入到没有本机 Web 引擎的平台上的 Qt 应用程序中。

       Qt WebEngine 提供了C++类和 QML类型(是一种用于描述用户界面的脚本编程语言)，用于渲染 HTML、XHTML 和 SVG 文档，使用级联样式表(CSS)进行样式设置，并使用 JavaScript 编写脚本。

       从QT 5.6版本开始，QT已经正式从webkit组件切换到webengine 组件，新的webengine组件是基于chromium内核引擎，更稳定且更好的支持新的如HTML5(构建和呈现Web内容的一种语言描述方式)等特性，同时具备更好的跨平台性。本文基于嵌入式Linux平台演示部署Qt提供的webengine 示例应用。

2. QT WebEnging架构

       QT WebEngine整体架构图如下所示：

Qt WebEngine中的功能分为以下模块：

1.Qt WebEngineWidgets模块，用来创建C++ Widgets部件的Web程序；
2.Qt WebEngine模块，用于创建基于Qt Quick的Web应用程序
3.Qt WebEngine core模块，用于与Chromium交互
4.Qt WebEngine Process模块，用于页面渲染和JavaScript执行(从GUI流程分离到Qt WebEngine Process中)。 如果将Qt库捆绑到应用程序中，则该库必须随应用程序一起提供。

3. Qt Webengine环境部署配置

3.1 换源提速

       执行以下口令查看当前操作系统版本发行版代号：

 

lsb_release -a

 

注意：输出结果中的Codename字段就是当前系统版本代号。

       通过以下网站进行换源：

 

 https://mirrors.tuna.tsinghua.edu.cn/help/ubuntu/
或https://mirrors.tuna.tsinghua.edu.cn/help/ubuntu-ports/
或其它站点

 

注意：系统版本发行版代号不要选错了。

       执行以下指令切换目录并把镜像源替换到源文件:

 

cd /etc/apt/
vim sources.list

 

       配置完以执行以下命令进行更新：

 

sudo apt-get update

 

3.2 查找webengine软件包名，用于后面安装

       输入以下指令查找安装包名字：

 

apt-cache search webengine | grep dev

 

注意：开发包名字是qtwebengine5-dev。

3.3 下载安装包

       通过以下口令下载安装包：

 

sudo apt-get install qtwebengine5-dev 
sudo apt-get install qtwebengine5-examples

 

(时间可能有点长，请耐心等待)

       执行以下命令再次更新, 并启用源码源：

 

sudo apt-get update
sudo apt-get source qtwebengine5-dev

 

       如下图所示，里面的examples就是demo源码了：

3.4 例程运行及效果

       输入以下指令，把examples目录复制到/userdata再编译：

 

cp examples/ -r /userdata/

 

       输入以下指令，进入/userdata/examples/webengine/选择其中一个app进行编译：

 

cd userdata/examples/webengine/minimal/  
qmake minimal.pro 
make

 

       输入以下指令，执行该程序：

 

./minimal --no-sandbox

 

       效果展示图如下所示：

审核编辑 黄宇