快捷導(dǎo)航

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

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

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

一、描述

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

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

二、解決方案：

webview-style設(shè)置的樣式，針對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)驗&結(jié)論

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

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

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

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

屬性說明

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

注意

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

src

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

webview-styles

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