如果需要在程序中加載并顯示網(wǎng)頁，那QWebEngineView絕對是最佳的選擇。該控件基于Chrome瀏覽器內(nèi)核引擎，所提供的功能和方法還是比較強大的。

注：V5.11及更高版本的PyQt5中不包含QWebEngineView，請另外單獨下載：

pip

30.1 制作簡單瀏覽器

本章我們就通過制作下圖所示的簡單瀏覽器來了解QWebEngineView的用法：

在輸入框中輸入網(wǎng)址并敲回車后，QWebEngineView控件加載并顯示相應(yīng)的網(wǎng)址內(nèi)容。左上方的三個按鈕可以允許我們進行前進、后退和刷新操作，右上方的兩個按鈕可以放大和縮小網(wǎng)頁。

下面我們一步步來實現(xiàn)，首先完成瀏覽器的外觀：

import

1. 通過resize()方法來將窗口大小設(shè)為1000x600；

2. 實例化按鈕控件、輸入框控件以及QWebEngineView控件；

3. 完成布局，使用setSpacing()傳入?yún)?shù)0代表讓各個控件之間不存在間隔(主要想讓按鈕靠攏)，隨后我們在想要的地方使用addStretch()，這樣就達到讓輸入框和按鈕分離開來，而按鈕之間又是相互靠攏的目的。

4. 給按鈕添加圖標，圖片下載地址如下：

• back.png: https://www.easyicon.net/download/png/1117578/64/
• forward.png: https://www.easyicon.net/download/png/1117605/64/
• refresh.png: https://www.easyicon.net/download/png/1117668/64/
• zoom_in.png: https://www.easyicon.net/download/png/1117715/64/
• zoom_out.png: https://www.easyicon.net/download/png/1117716/64/

5. 設(shè)置輸入框?qū)挾葹?00并設(shè)置占位符提示用戶在這里輸入網(wǎng)址。

此時運行截圖如下，QWebEngine還沒有顯示任何網(wǎng)頁：

接下來完成以下功能：在輸入框中輸入網(wǎng)址并敲擊回車后，QWebEngineView加載并顯示相應(yīng)的網(wǎng)址內(nèi)容：

def

既然涉及到鍵盤，那肯定要用事件函數(shù)來處理了。

標準的鍵盤上是有兩個回車鍵的，Key_Return為大回車，Key_Enter為小回車(這里我們把兩種都考慮進來)如下圖所示：

加上if self.url_le.hasFocus():判斷是為了只有在輸入框被編輯的狀態(tài)下敲擊回車才會讓網(wǎng)頁實現(xiàn)跳轉(zhuǎn)(讀者也可以去使用下市面上的瀏覽器看下是否是這樣)。

條件都滿足的話，就調(diào)用load()方法并傳入一個QUrl類型參數(shù)即可(不能單單傳入字符串，需要用QUrl()把字符串轉(zhuǎn)為QUrl對象)。

雖然QWebEngineView已經(jīng)提供了很多有用的方法，但是許多方面還是需要我們開發(fā)人員進行完善。比如用戶如果只輸入"http://baidu.com"的話，那QWebEngineView其實是識別不出來的，也就無法加載和顯示網(wǎng)頁了(會跳轉(zhuǎn)到空白頁)。

市面上的瀏覽器在用戶只輸入"http://baidu.com"的情況下，會自動在最前面加上"http://"或者“https://”，我們接下來完善下代碼：

def

調(diào)用startswith()方法判斷用戶輸入的網(wǎng)址字符串是否是以"https://"或者“http://”開頭的，如果是的話，則采用用戶輸入的網(wǎng)址；如果不是，則在前面加上"https://"。這樣的話QWebEngineView就可以正常顯示了。

接下來完成以下功能：首次運行程序時，QWebEngineView顯示百度網(wǎng)頁。

def

非常簡單，只需要在類初始化函數(shù)中調(diào)用以上函數(shù)即可。

到目前為止，程序代碼如下：

import

我們運行一下，發(fā)現(xiàn)兩個問題：

1. 程序首次運行時，輸入框文本并沒有顯示百度網(wǎng)址。

2. 當(dāng)我們在輸入框中輸入"http://python.org"并敲擊回車后，網(wǎng)頁可以加載，但是輸入框并沒有顯示當(dāng)前應(yīng)該要顯示的“https://www.python.org/”。

或者在點擊頁面中的“Downloads”跳轉(zhuǎn)到另一個頁面后，輸入框的文本也應(yīng)該要相應(yīng)地變?yōu)椤癶ttps://www.python.org/downloads/”。

根據(jù)以上問題我們知道接下來應(yīng)該把輸入框的文本設(shè)置為QWebEngineView所加載的網(wǎng)址。QWebEngineView控件有一個信號urlChanged，該信號會在每次要加載的網(wǎng)址發(fā)生變化時發(fā)射。那我們其實可以把這個信號和槽函數(shù)連接起來，在槽函數(shù)中我們把輸入框的文本設(shè)置為變化后QWebEngineView要加載的網(wǎng)址即可(其他信號例如loadStarted, loadFinished等其實也可以)。

我們只需要在browser_init()函數(shù)中加一行信號和槽函數(shù)連接的代碼即可：

def

調(diào)用QWebEngineView的url()方法獲取QUrl對象，但這個不是字符串類型，所以還需要調(diào)用toDisplayString()方法來獲取url文本字符串。現(xiàn)在再來運行下就會發(fā)現(xiàn)輸入框的文本會跟隨QWebEngineView當(dāng)前加載的網(wǎng)址改變而改變了。

接下來我們完善按鈕功能，首先是左上角的后退、前進和刷新。查看文檔我們很容易就會發(fā)現(xiàn)QWebEngineView有幾個槽函數(shù)可以實現(xiàn)這三個功能：

back()方法實現(xiàn)后退功能，forward()方法實現(xiàn)前進功能而reload()方法實現(xiàn)刷新功能。我們接下來只需要在btn_init()函數(shù)中加幾行信號和槽函數(shù)連接的代碼即可：

def

此時運行下程序，就會發(fā)現(xiàn)程序可以像一個真正的瀏覽器一樣后退、前進和刷新了。

最后是放大縮小功能，要實現(xiàn)這種功能我們需要用到zoomFactor()方法和setZoomFactor()方法。前者獲取當(dāng)前縮放值，后者設(shè)置縮放值。那也就是說我們每當(dāng)用戶點擊放大或縮小按鈕時，只需要先獲取到當(dāng)前的縮放值，然后放大的話就增加縮放值，縮小就減小縮放值。首先實現(xiàn)槽函數(shù)，代碼如下：

def

然后在btn_init()函數(shù)中再加兩行信號和槽函數(shù)連接的代碼：

def

現(xiàn)在運行下程序，點擊放大縮小按鈕，頁面就會相應(yīng)的放大縮小：

??但是放大和縮小的范圍是有限定的：

根據(jù)文檔我們可以知道范圍為0.25-5.0，默認值是1.0。

完整代碼如下：

import

30.2 小結(jié)

1. 這個簡單的瀏覽器還可以添加很多功能，或者再進行完善，讓它更像一個真正的瀏覽器。比如程序首次運行時，前進和后退按鈕應(yīng)該都要設(shè)置為不可用，而且在無法前進和后退是也要設(shè)置為不可用(涉及到history()方法，小伙伴可以自己去實現(xiàn)下)。

2. 還是那句話——多查文檔。如果你腦海里有想要實現(xiàn)的功能，你可以去查下文檔看看這個控件有沒有提供相應(yīng)的方法。或者你腦海里可能一片空白，那你其實也可以先去讀下文檔看看某控件提供方法有沒有你喜歡的，能給你帶來靈感也說不定。

總結(jié)

以上是生活随笔為你收集整理的hikvision v2.3控件网页demo_《快速掌握PyQt5》第三十章 网页交互QWebEngineView的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。