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

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

其代码如下：

import QtQuick 2.4
import QtQuick.Layouts 1.2
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtWebEngine 1.1

Rectangle {
    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，涉及到页面的通讯以及加载相关，以免出现幺蛾子^_^.

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

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

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