快捷導(dǎo)航

uniapp使用webview內(nèi)嵌H5的注意事項(xiàng)詳解

更新時(shí)間：2024年07月11日 10:57:44 作者：DriveMyLife

在移動(dòng)應(yīng)用開(kāi)發(fā)中,uniApp框架提供了一種跨平臺(tái)的解決方案,允許開(kāi)發(fā)者使用一套代碼來(lái)構(gòu)建iOS、Android等多平臺(tái)的應(yīng)用,這篇文章主要給大家介紹了關(guān)于uniapp使用webview內(nèi)嵌H5的注意事項(xiàng),需要的朋友可以參考下

一、描述

uniapp項(xiàng)目中構(gòu)建app，需要內(nèi)嵌H5頁(yè)面，在使用webview時(shí)，遇到了以下幾個(gè)問(wèn)題：

內(nèi)嵌H5，默認(rèn)全屏顯示；
內(nèi)嵌頁(yè)面遮擋住了app的自定義tabbar組件；
樣式修改無(wú)效；

二、解決方案：

webview-style設(shè)置的樣式，針對(duì)app生效，style的定義方式兼容web；

<view class="page">
  <web-view 
        :src="url" 
        class="webview" 
        allow 
        :fullscreen="false" 
        :webview-styles="style" 
        :frameBorder="0" 
        style="width: 100%; height: calc(100% - 10px)">
    </web-view>
</view>

const style = reactive({
  width: '100%',
  height: '100%',
  bottom: '56px'
});
uni.getSystemInfo({
  success: (res) => {
    console.log(res);
    style.height = res.screenHeight - res.statusBarHeight - res.safeAreaInsets?.bottom - 100 + 'px';
    style.bottom = res.safeAreaInsets?.bottom + 56 + 'px';
  }
});

三、經(jīng)驗(yàn)&結(jié)論

關(guān)于webview的使用，除了了解相關(guān)屬性，其中webview-style才對(duì)app生效，值得關(guān)注。

web-view | uni-app官網(wǎng)

web-view 是一個(gè) web 瀏覽器組件，可以用來(lái)承載網(wǎng)頁(yè)的容器，會(huì)自動(dòng)鋪滿整個(gè)頁(yè)面（nvue 使用需要手動(dòng)指定寬高）。

各小程序平臺(tái)，web-view 加載的 url 需要在后臺(tái)配置域名白名單，包括內(nèi)部再次 iframe 內(nèi)嵌的其他 url 。

屬性說(shuō)明

屬性名	類型	說(shuō)明	平臺(tái)差異說(shuō)明
src	String	webview 指向網(wǎng)頁(yè)的鏈接
allow	String	用于為 iframe 指定其特征策略	H5
sandbox	String	該屬性對(duì)呈現(xiàn)在 iframe 框架中的內(nèi)容啟用一些額外的限制條件。	H5
fullscreen	Boolean	是否鋪滿整個(gè)頁(yè)面，默認(rèn)值：`true`。	H5 (HBuilder X 3.5.4+)
webview-styles	Object	webview 的樣式	App-vue
update-title	Boolean	是否自動(dòng)更新當(dāng)前頁(yè)面標(biāo)題。默認(rèn)值：`true`	App-vue (HBuilder X 3.3.8+)
@message	EventHandler	網(wǎng)頁(yè)向應(yīng)用 `postMessage` 時(shí)，會(huì)在特定時(shí)機(jī)（后退、組件銷毀、分享）觸發(fā)并收到消息。	H5 暫不支持（可以直接使用 window.postMessage）
@onPostMessage	EventHandler	網(wǎng)頁(yè)向應(yīng)用實(shí)時(shí) `postMessage`	App-nvue
@load	EventHandler	網(wǎng)頁(yè)加載成功時(shí)候觸發(fā)此事件。	微信小程序、支付寶小程序、抖音小程序、QQ小程序
@error	EventHandler	網(wǎng)頁(yè)加載失敗的時(shí)候觸發(fā)此事件。	微信小程序、支付寶小程序、抖音小程序、QQ小程序

注意

update-title 僅支持 App-vue 。小程序 恒為 true，H5、nvue 恒為 false

src

來(lái)源	App	H5	微信小程序	支付寶小程序	百度小程序	抖音小程序、飛書(shū)小程序	QQ小程序	快應(yīng)用	360小程序	快手小程序	京東小程序
網(wǎng)絡(luò)	√	√	√	√	√	√	√	√	√	√	√
本地	√	√	x	x	x	x	x	x	x	x	x

webview-styles

屬性	類型	說(shuō)明
progress	Object/Boolean	進(jìn)度條樣式。僅加載網(wǎng)絡(luò) HTML 時(shí)生效，設(shè)置為 `false` 時(shí)禁用進(jìn)度條。
width	String	web-view 組件的寬度。
height	String	web-view 組件的高度。

總結(jié)

到此這篇關(guān)于uniapp使用webview內(nèi)嵌H5的注意事項(xiàng)的文章就介紹到這了,更多相關(guān)uniapp使用webview內(nèi)嵌H5內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: