QML開發簡單瀏覽器(載入H5)

2021-07-26 10:53:58 字數 1932 閱讀 5785

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

color: "#e4eef9"

button

width: 30

height: url_edit.height

property color bgcolor: webview.cangoback?"blue":"gray"

style: buttonstyle

label: label

}onclicked:

}button

width: 30

height: url_edit.height

property color bgcolor: webview.cangoforward?"blue":"gray"

style: buttonstyle

label: label

}onclicked:

}textfield

placeholdertext: qstr("請輸入**")

focus: true

font.pixelsize: 16

}button

width: 60

height: url_edit.height

style: buttonstyle

label: label

}onclicked:

}keys.onreturnpressed:

}webengineview

//url: ""

smooth: true

visible: true

onnewviewrequested: request.openin(webview)

onurlchanged: }}

效果如下:

※在windows上可以順利開發出簡單瀏覽器,但是在linux和maxosx上,需要注意的是:

1.應用程式的搜尋庫路徑中一定要存在qt5webenginecore庫,在linux上為qtwebenginecore.so動態庫,在macosx上為qtwebenginecore.framework

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

H5 瀏覽器自定義使用者控

但是原生控制項往往無法滿足我們的一些需求,所以自定義使用者控制項還是很必要的。首先宣告乙個變數,我們把做如下定義 let videoelement document.getelementbyid video let videoelement video 暫停和開始 暫停和開始是最基本的功能了,實現起...

深大雲網路在H5開發中解決IE瀏覽器的相容問題

瀏覽器的相容問題 瀏覽器相容問題可以認為是相同的 css,js 在不同的瀏覽器中執行會產生不同的效果。中國常見的3大核心 ie核心 ie瀏覽器 360瀏覽器 相容模式 chrome核心 火狐核心 firefox瀏覽器 由於不同廠商的流覽器或某瀏覽器的不同版本 如ie6ie11,firefox saf...

深大雲網路在H5開發中解決IE瀏覽器的相容問題

深大雲網路在h5開發中解決ie瀏覽器的相容問題。瀏覽器相容問題可以認為是相同的 css,js 在不同的瀏覽器中執行會產生不同的效果。中國常見的3大核心 ie核心 ie瀏覽器 360瀏覽器 相容模式 chrome核心 chrome 360瀏覽器 極速模式 搜狗瀏覽器 騰訊tt瀏覽器 瀏覽器 傲遊瀏覽器...