小程序webview下的解决方案

本文转载于https://blog.soarli.top/archives/743.html

前言：

微信开放能力 web-view 是承载网页的容器。会自动铺满整个小程序页面

需求希望用户在 webview 中浏览内容时能够便捷的返回到小程序主体，通过小

程序左上角的返回也可以一定程度上实现该需求。但是在 ios 和 Android 中的

效果不尽如意，ios 中浏览的网页栈多了之后很难直接返回到小程序中

---

解决办法：

使用 uni-app 组件

<template>
    <web-view src="https://example.com">
        <cover-view class="close-view" @click="closeView()">
            <cover-image class="close-icon" src="/static/icon/public/home.png"></cover-image>
        </cover-view>
    </web-view>
</template>

<script setup>
    import {
        onShareAppMessage,
        onShareTimeline
    } from '@dcloudio/uni-app'
    const closeView = () => {
        uni.reLaunch({
            url: '/pages/index/index'
        })
    }
    onShareAppMessage(() => {})
    onShareTimeline(() => {})
</script>

<style>
    .close-view {
        background-color: #616161;
        border-radius: 50%;
        position: fixed;
        z-index: 99999;
        bottom: 19vh;
        right: 30px;
        visibility: visible !important;
        padding: 5px;
    }

    .close-icon {
        width: 30px;
        height: 30px;
    }
</style>