标签: webengine

ByToradex 秦海 1). 简介 从 QT5.6 版本开始， QT 已经正式从 webkit 组件切换到 webengine 组件，新的 webengine 组件是基于 chromium 内核引擎，更稳定且更好的支持新的如 HTML5 等特性，同时具备更好的跨平台性。本文就基于嵌入式 Linux 平台演示部署 Qt 提供的 webengine 示例应用。 本文所演示的平台来自于 ToradexColibriiMX6ARM 嵌入式平台，这是一个基于 NXPiMX6ARM 处理器，支持单核 / 双核 Cortex-A9 的计算机模块平台。 2. 准备 a).ColibriiMX6ARM 核心版配合 ColibriEvaBoard 载板，连接调试串口 UART1 到开发主机方便调试。 b). ColibriiMX6 系统使用基于 OpenEmbedded 框架重新编译的集成 Qt5.7base 以及 qtwebengine 支持的 ToradexLinuximagereleaseV2.7 版本以及对应的 SDK 。这个可以结合 这里 的说明自己进行编译，需要修改的文件请参考如下， image 更新方法请参考 这里 。 ./local.conf 文件 添加如下内容，在生成的 image 中增加 qtwebengine 组件 ------------------------------------ #installqtwebengineinimage IMAGE_INSTALL_appen d="qtwebengineqtwebengine-dev" ------------------------------------ ./packagegroup-qt5-toolchain-target.bb 文件 修改方法参考如下 patch 文件，用于为生成的 SDK 增加 qtwebengine 支持 https://github.com/simonqin09/Qtwebengine_demo/blob/master/packagegroup-qt5-toolchain_add_webengine.patch c). 关于开发主机 SDK 安装和 Qtcreator 开发环境的配置请参考之前发布的《 嵌入式 Linux 基于 Qt 开发 GPIO 应用一文 》。 d). 演示程序使用的 LCD 为 10inch18bitLVDS 屏幕，请参考 这里 修改配置 uboot 显示分辨率为 1024x768 。 3).QTWebengine 示例程序修改和编译 为了方便，本文演示应用程序直接使用 Qt5.7 自带的 WebengineQuickNanoBrower 示例程序，这是一个基于 QtQuick 和 Webengine 开发的精简浏览器示例。 a). 为了增加对中文的支持，首先如下修改 main.cpp 文件 https://github.com/simonqin09/Qtwebengine_demo/blob/master/patch_add_chinese_font.patch 说明如下： ./ 中文字体文件在运行的时候要放置到上面代码里面设定的 /home/root/fonts/STKAITI.TTF 位置，这个位置也可以自行修改。 ./ 本文所使用的字体文件请从这里下载。 ./ 字体大小这里设置为 10 ，也可以自行修改。 b). 为了适配 LCD 屏幕，需要修改应用 GUI 显示分辨率 ./BrowserWindow.qml 文件，如下修改 ------------------------------------ …… ApplicationWindow{ …… width:1024 height:768 visible:true title:currentWebViewcurrentWebView.title …… ------------------------------------ b). 配置好交叉编译后，将编译生成的可执行文件 quicknanobrower 。 4).QtWebengine 程序部署配置 a). 将编译好的可执行程序 quicknanobrower 复制到 ColibriiMX6 模块 “/home/root” 目录下，同时放置字体文件 STKAITI.TTF 到 /home/root/fonts 目录下 b). 设置应用开机自启动 ./qt5-x11-demo-init ，程序启动脚本文件 https://github.com/simonqin09/Qtwebengine_demo/blob/master/qt5-x11-demo-init --------------------------------------------------- $cpqt5-x11-demo-init/usr/bin $chmod+xqt5-x11-demo-init --------------------------------------------------- ./qt5-x11-demo.service ， systemd 自启动配置文件，详细说明可以参考 这里 。 https://github.com/simonqin09/Qtwebengine_demo/blob/master/qt5-x11-demo.service --------------------------------------------------- $cpqt5-x11-demo.service/etc/systemd/system/ $systemctlenableqt5-x11-demo.service --------------------------------------------------- 5).QtWebengine 示例程序演示 a). 开机后，系统自动启动程序，如下所示 6). 总结 本文基于 NXPiMX6 嵌入式平台在嵌入式 linux 系统下演示 QtWebengine 示例应用编译和部署，具体实际应用可以参考此示例进行开发。