微信小程序webview场景下的一些解决方案

本文转载自互联网，已在文末注明来源。

webview 覆盖层中添加返回小程序的功能

描述

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

需求希望用户在 webview 中浏览内容时能够便捷的返回到小程序主体，通过小程序左上角的返回也可以一定程度上实现该需求，但是在 ios 和 Android 中的效果不尽如意，ios 中浏览的网页栈多了之后很难直接返回到小程序中

考虑在 webview 视图层上添加一个返回按钮图标，以供用户点击返回

解决方法

使用 uni-app 的 cover-view 组件，覆盖在小程序的原生组件上，层级更高

<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>

扫普通链接二维码打开小程序

描述

用户通过扫描已有的二维码，可以在小程序中打开，例如线下商户的点餐小程序，微信扫描打开微信小程序，支付宝扫描打开支付宝小程序

实现：用户扫描某一在业务域名下的二维码，通过微信小程序的 webview 打开该页面进行访问

解决方法

微信小程序入口页在 onLoad 中获取扫码参数，根据需求决定是否在 webview 打开

    // 扫描普通二维码在微信小程序通过webview打开的白名单（可选，更精细化实现不同的需求）
    const scanCodeWhiteList = [
        "https://example.com"
    ]
  onLoad((query) => {
        // 获取扫码参数（必需）
        const q = decodeURIComponent(query.q) // 获取到二维码原始链接内容
        const scancode_time = parseInt(query.scancode_time) // 获取用户扫码时间 UNIX 时间戳
        if (q) {
            if (scanCodeWhiteList.includes(q)) {
                uni.navigateTo({
                    url: `/pages/webViewPage/webViewPage?webviewUrl=${encodeURIComponent(q)}`
                });
            }
        }
    })

原文地址：

微信小程序webview场景下的一些解决方案 - 明心镜

微信小程序嵌入 H5 页面（webview）基本用法和父子传参数说明_webview和wx小程序传参-CSDN博客

扫普通链接二维码打开小程序 | 微信开放文档

开放能力 / web-view

cover-view | uni-app官网

版权属于：soarli

本文链接：https://blog.soarli.top/archives/743.html

转载时须注明出处及本声明。