解決小程式web-view兩個噁心問題

林恒發表於2024-07-24
WebView

🧑‍💻 寫在開頭

點贊 + 收藏 === 學會🤣🤣🤣

1.web-view覆蓋層問題

問題由來

web-view 是一個 web 瀏覽器元件，可以用來承載網頁的容器，會自動鋪滿整個頁面。

所以這得多噁心。。。不僅鋪滿，還覆蓋了普通的標籤，調z-index都無解。

解決辦法

web-view內部使用cover-view，調整cover-view的樣式即可覆蓋在web-view上。

cover-view

覆蓋在原生元件上的文字檢視。

app-vue和小程式框架，渲染引擎是webview的。但為了最佳化體驗，部分元件如map、video、textarea、canvas透過原生控制元件實現，原生元件層級高於前端元件（類似flash層級高於div）。為了能正常覆蓋原生元件，設計了cover-view。

支援的平臺：

具體實現

<template>
    <view>
		<web-view :src="viewUrl" v-if="viewUrl" >
			<cover-view class="close-view" @click="closeView()">
				<cover-image class="close-icon" src="../../static/design/close-icon.png"></cover-image>
			</cover-view>
		</web-view>
    </view>
</template>
.close-view{
    position: fixed;
    z-index: 99999;
    top: 30rpx;
    left: 45vw;

    .close-icon{
        width: 100rpx;
        height: 80rpx;
    }
}

程式碼說明：這裡的案例是一個關閉按鈕圖示懸浮在webview上，點選圖示可以關閉當前預覽的webview。

注意

僅僅真機上才生效，開發者工具上是看不到效果的，如果要調整覆蓋層的樣式，可以先把web-view標籤註釋了，寫完樣式沒問題再釋放web-view標籤。

2.web-view導航欄返回

問題由來

  • 小程式端 web-view 元件一定有原生導航欄，下面一定是全屏的 web-view 元件，navigationStyle: custom 對 web-view 元件無效。

場景

使用者在巢狀的webview裡填寫表單，不小心按到導航欄的返回了，就全沒了。

解決辦法

使用page-container容器，點選到返回的時候，給個提示。

page-container

頁面容器。

小程式如果在頁面內進行復雜的介面設計（如在頁面內彈出半屏的彈窗、在頁面內載入一個全屏的子頁面等），使用者進行返回操作會直接離開當前頁面，不符合使用者預期，預期應為關閉當前彈出的元件。 為此提供“假頁”容器元件，效果類似於 popup 彈出層，頁面記憶體在該容器時，當使用者進行返回操作，關閉該容器不關閉頁面。返回操作包括三種情形，右滑手勢、安卓物理返回鍵和呼叫 navigateBack 介面。

具體實現

<template>
    <view>
		<web-view :src="viewUrl" v-if="viewUrl" >
			<cover-view class="close-view" @click="closeView()">
				<cover-image class="close-icon" src="../../static/design/close-icon.png"></cover-image>
			</cover-view>
		</web-view>
          <!--這裡這裡，就這一句-->
          <page-container :show="isShow" :overlay="false" @beforeleave="beforeleave"></page-container>
    </view>
</template>

export default {
    data() {
        return {
            isShow: true
        }
    },
    methods: {
        beforeleave(){
            this.isShow = false
            uni.showToast({
                    title: '別點這裡',
                    icon: 'none',
                    duration: 3000
            })
        }
    }
}

結語

算是小完美的解決了吧，這裡記錄一下，看看就行，勿噴。

連夜更新安卓cover-view失效問題

由於之前一直用ios測試的，今晚才發現這個問題

解決辦法

cover-view, cover-image{
    visibility: visible!important;
    z-index: 99999;
}

如果對您有所幫助，歡迎您點個關注，我會定時更新技術文件，大家一起討論學習，一起進步。

解決小程式web-view兩個噁心問題

相關文章