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，涉及到頁面的通訊以及加載相關，以免出現幺蛾子^_^.

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

希望有興趣的朋友可以和我進行交流學習，關注我的公衆號，搜索【三個程序員】進行關注 ^-^

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