QML开发简单浏览器（加载H5）

来源：互联网发布：照片恢复软件下载编辑：程序博客网时间：2024/05/16 14:33

QML开发浏览器以及加载HTML5页面，主要利用QML的WebEngineView可实现对网页的加载。

其代码如下：

import QtQuick 2.4import QtQuick.Layouts 1.2import QtQuick.Controls 1.4import QtQuick.Controls.Styles 1.4import QtWebEngine 1.1Rectangle {    id: root    width: 800    height: 600    Rectangle {        id: edit_area        width: parent.width        height: 70        anchors {            left: parent.left            right: parent.right        }        color: "#E4EEF9"        Button {            id: goBack_click            anchors {                left: parent.left                leftMargin: 5                verticalCenter: edit_area.verticalCenter            }            width: 30            height: url_edit.height            property color bgColor: webView.canGoBack?"blue":"gray"            style: ButtonStyle {                background: Rectangle {                    anchors.fill: parent                    color: goBack_click.bgColor                    radius: width/2                }                label: Label {                    text: "<-"                    font.pixelSize: 20                }            }            onClicked: {                webView.goBack()            }        }        Button {            id: goForward_click            anchors {                left: goBack_click.right                leftMargin: 2                verticalCenter: edit_area.verticalCenter            }            width: 30            height: url_edit.height            property color bgColor: webView.canGoForward?"blue":"gray"            style: ButtonStyle {                background: Rectangle {                    anchors.fill: parent                    color: goForward_click.bgColor                    radius: width/2                }                label: Label {                    text: "->"                    font.pixelSize: 20                }            }            onClicked: {                webView.goForward()            }        }        TextField {            id: url_edit            width: parent.width-150            height: 27            anchors {                left: goForward_click.right                leftMargin: 5                rightMargin: 80                verticalCenter: parent.verticalCenter            }            placeholderText: qsTr("请输入网址")            focus: true            font.pixelSize: 16        }        Button {            id: enter_click            anchors {                left: url_edit.right                leftMargin: 5                verticalCenter: edit_area.verticalCenter            }            width: 60            height: url_edit.height            style: ButtonStyle {                background: Rectangle {                    anchors.fill: parent                    color: "blue"                    radius: 5                }                label: Label {                    text: "go>>>"                    font.pixelSize: 20                }            }            onClicked: {                webView.url = "https://" + url_edit.text                url_edit.text = webView.url            }        }        Keys.onReturnPressed: {            webView.url = "https://" + url_edit.text            url_edit.text = webView.url        }    }    WebEngineView {        id: webView        anchors {            top: edit_area.bottom            left: parent.left            right: parent.right            bottom: parent.bottom            margins: 1        }        //url: "https://www.baidu.com"        smooth: true        visible: true        onNewViewRequested: request.openIn(webView)        onUrlChanged: {            url_edit.text = webView.url        }    }}

当给webView的url赋值为"https://www.baidu.com"时（即输入网址出输入：www.baidu.com），即可加载出百度的首页。
效果如下：

（上图为从百度首页点击新闻后的效果）

※在Windows上可以顺利开发出简单浏览器，但是在Linux和MaxOSX上，需要注意的是：

1.应用程序的搜索库路径中一定要存在Qt5WebEngineCore库，在Linux上为QtWebEngineCore.so动态库，在MacOSX上为QtWebEngineCore.framework
2.一定要存在QtWebEnginePrecess的可执行程序，在MacOSX上为QtWebEnginePrecess.app,此时要注意，QtWebEnginePrecess.app以及app中的QtWebEnginePrecess二进制都必须要有执行权限，否则应用程序是加载不出页面的。
3.一定要将Qt的translations文件夹下的qtwebengine_locales文件夹放到应用程序的相应位置中，否则也是加载不出页面的。此处注意：Mac下用macdeployqt进行部署包后，其qtwebengine_locales文件夹会自动放在包的/Frameworks/QtWebEngineCore.framework/Versions/5/Resources/qtwebengine_locales下，但是在Linux下进行打包时，一定要记得该文件夹。
4.要将Qt库下的resources文件夹下的文件拷贝到应用程序中，其中包括：icudtl.dat、qtwebengine_resources.pak、qtwebengine_resources_100p.pak、qtwebengine_resources_200p.pak，MaxOSX用macdeployqt会自动放到/Frameworks/QtWebEngineCore.framework/Versions/5/Resources下，Linux下手动拷贝吧。
5.最好将其相关的动态库也拷贝过去，包括QtWebEngine以及QtWebChannel，涉及到页面的通讯以及加载相关，以免出现幺蛾子^_^.

——————————————————————————————————————————————————————————

希望有兴趣的朋友可以和我进行交流学习，关注我的公众号，搜索【三个程序员】进行关注 ^-^

——————————————————————————————————————————————————————————

0 0