当前位置: 首页 > news >正文

uniapp小程序中给web-view页面添加授权弹窗(使用cover-view组件覆盖实现该功能)

效果图:

在这里插入图片描述

web-view是承载网页的容器。会自动铺满整个小程序页面,个人类型的小程序暂不支持使用。

在这里插入图片描述
再看下面一个提示:
每个页面只能有一个 web-view,web-view 会自动铺满整个页面,并覆盖其他组件。
也就是说,小程序中使用web-view打开网页,在页面上写的其它组件会直接被网页给覆盖住
在这里插入图片描述


需求:在web-view页面添加弹窗

刚好有一个组件cover-view可以覆盖web-view

cover-view覆盖在原生组件上的文本视图。

app-vue和小程序框架,渲染引擎是webview的。但为了优化体验,部分组件如map、video、textarea、canvas通过原生控件实现,原生组件层级高于前端组件(类似flash层级高于div)。为了能正常覆盖原生组件,设计了cover-view。

cover-view功能描述:

可覆盖的原生组件包括 map、video、canvas、camera、live-player、live-pusher、web-view

cover-view只支持嵌套 cover-view、cover-image,可在 cover-view 中使用 button。组件属性的长度单位默认为px,2.4.0起支持传入单位(rpx/px)。

也就是在cover-view中只能使用cover-view、cover-image、button三个组件

代码示例:

注意:checkbox按钮是图片代替的,因为不能使用checkbox组件

<template><view><web-view :src="url"><cover-view class="my-cover" v-if="coverIsShow"><cover-view class="cover-box"><cover-view class="des"><cover-view class="des-text1">本服务将由{{corporateName}}提供,南洋商业银行(中国)将在您办理以下业务时将您的对应信息提供给该公司用于下述目的:</cover-view><cover-view class="des-text">购买商品</cover-view><cover-view class="des-text">手机号码:用于识别客户及查询订单</cover-view><cover-view class="des-text1">{{corporateName}}服务热线{{phoneNum}},相关商品和服务(包括售后)均由该公司负责。</cover-view></cover-view><cover-view class="nav-select"><cover-view class="select-item" @click="checkBoxBtn"><cover-image @click="checkAllGouBox" class="image" src="@/static/applyAccont/check.png" v-if="chackBoxIsShow"></cover-image><cover-image @click="checkAllGouBox" class="image" src="@/static/applyAccont/uncheck.png" v-else></cover-image><cover-view>我已阅读并同意</cover-view></cover-view><cover-view class="nav-privacy" @click="userPrivacy">《用户协议》</cover-view><cover-view></cover-view><cover-view class="nav-privacy" @click="agreePrivacy">《隐私协议》</cover-view></cover-view><cover-view class="btns"><button class="reject" @click="goBack">不同意授权</button><button type="primary" class="agree" @click="confirm">已知悉,同意授权</button><!-- <button type="primary" class="agree" @click="confirm" :disabled="!chackBoxIsShow">已知悉,同意授权</button> --></cover-view></cover-view></cover-view></web-view></view>
</template><script>import apiUrl from '@/utils/commonUrl.js';export default {data() {return {url: '',corporateName:'上海xxx科技有限公司',phoneNum: '999999999',coverIsShow: false,chackBoxIsShow: false,};},onLoad() {this.url = apiUrl.baseUrl+ "&t=" + new Date().getTime()},methods: {},// 复选框点击checkBoxBtn(){this.chackBoxIsShow = !this.chackBoxIsShow;},// 取消返回goBack(){uni.navigateBack({delta:1})},// 确认协议confirm(){this.$store.commit('SET_BEILIANPROVICY', '1');this.coverIsShow = false},// 用户协议userPrivacy(){uni.navigateTo({url:'/pages/home/beiLiAnUser'})},// 隐私协议agreePrivacy(){uni.navigateTo({url:'/pages/home/beiLiAnPrivacy'})}}}
</script><style lang="scss">
.my-cover{position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 100;background-color: rgba(0,0,0,.3);display: flex;align-items: center;justify-content: center;z-index: 99999;.cover-box{width: 636rpx;box-sizing: border-box;background: #fff;border-radius: 16rpx;display: flex;flex-direction: column;justify-content: center;align-items: center;.des {font-size: 26rpx;margin-top: 40rpx;width: 560rpx;.des-text{width: 560rpx;color: #666;line-height: 48rpx;white-space: pre-wrap;text-indent: 2em;word-break:break-all;}.des-text1{width: 560rpx;white-space:pre-wrap;line-height: 48rpx;color: #333;font-weight: bold;text-indent: 2em;word-break:break-all;}}.nav-select{margin-top: 28rpx;margin-left: 10rpx;margin-right: 10rpx;font-size: 26rpx;display: flex;.select-item{display: flex;.image {width: 30rpx;height: 30rpx;margin-right: 20rpx;}}.nav-privacy{color: #1989FF;}}.btns {margin-top: 32rpx;margin-bottom: 0;display: flex;.reject {color: #333;font-size: 28rpx;background: #fff;height: 100rpx;line-height: 100rpx;font-weight: 500;width: 320rpx;border-top: 2rpx solid #eee;}.agree {color: #1989ff;font-size: 28rpx;background: #fff;height: 100rpx;line-height: 100rpx;font-weight: 500;width: 320rpx;border-top: 2rpx solid #eee;margin-left: -2rpx;}:deep(button[disabled][type=primary]) {color: #8cc4fd !important;border-radius: 0!important;}button {border-radius: 0!important;}}}	
}
</style>

相关文章:

uniapp小程序中给web-view页面添加授权弹窗(使用cover-view组件覆盖实现该功能)

效果图&#xff1a; web-view是承载网页的容器。会自动铺满整个小程序页面&#xff0c;个人类型的小程序暂不支持使用。 再看下面一个提示&#xff1a; 每个页面只能有一个 web-view&#xff0c;web-view 会自动铺满整个页面&#xff0c;并覆盖其他组件。 也就是说&#xff0c;…...

2023年全球及中国CGT CDMO市场发展现状分析:CGT 渗透率有效助力CGT CDMO快速发展[图]

与传统药物相比&#xff0c;CGT的外包服务更注重活体开发过程&#xff0c;如质粒、病毒、细胞的生产及纯化。标准化、规模化的工艺流程对最终制备的产品起到重要影响&#xff0c;是获取及制备能够满足临床需求的高质量CGT产品的关键。 CGT CDMO服务内容 资料来源&#xff1a;共…...

上抖音热搜榜需要做哪些准备?

要想在抖音上获得高曝光&#xff0c;首先需要了解抖音热搜榜的算法和规则。抖音热搜榜的排名主要取决于作品的点赞数、评论数、分享数和播放量。其中&#xff0c;播放量是影响排名的关键因素。因此&#xff0c;在创作作品时&#xff0c;要注重提高作品的播放量。此外&#xff0…...

LDA代码训练报错记录

1、AttributeError: ‘CountVectorizer‘ object has no attribute ‘get_feature_names‘ 代码内容&#xff1a; tf_feature_names tf_vectorizer.get_feature_names()报错信息 AttributeError: CountVectorizer object has no attribute get_feature_names报错解析&#…...

【吞噬星空】爽翻,徐欣喜提永恒之体,罗峰秒杀败类,阿特金磕头认错

Hello,小伙伴们&#xff0c;我是小郑继续为大家深度解析国漫资讯。 吞噬星空动画第89集终于更新了&#xff0c;阿特金三大巨头的好日子到头了&#xff0c;从他们对徐欣出手的那一刻&#xff0c;就已经有取死之道。如今罗峰强势回归&#xff0c;上演复仇戏码&#xff0c;让大家看…...

【c++】跟webrtc学状态改变

peerconn的状态看起来只是为了通知上层PeerConnectionState // See https://w3c.github.io/webrtc-pc/#dom-rtcpeerconnectionstateenum class PeerConnectionState {kNew,kConnecting,kConnected,kDisconnected,kFailed,kClosed,};static constexpr absl...

【入门】.Net Core 6 WebApi 项目搭建

一、创建项目 1.1.创建新项目&#xff1a;打开开发工具>创建新项目>搜索API>选择C#语言的ASP.NET Core Web API 1.2.配置新项目&#xff1a;**自定义项目信息以及存储路径 1.3.其他信息&#xff1a;这里框架必须选择.NET 6.0,其他配置默认勾选即可&#xff0c;也可以根…...

xtrabackup备份 脚本

1、全量备份在周末晚上22点执行备份&#xff0c;增量是周一到周六晚上22点执行 2、考虑到增量备份第一次是根据全量备份开始备份&#xff0c;后面都是根据上一次增量备份在增量脚本做了if判断&#xff0c;周日做一次目录清理 3、每周日晚上91点50清理目录 22点就在次备份&#…...

13SpringMVC中拦截器的配置(拦截规则)和多个拦截器的preHandle,postHandle执行顺序原理详解

拦截器 Servlet中的过滤器的实现及其原理,参考文章 配置一个拦截器 SpringMVC中请求的处理流程: 用户请求—>listener—>filter—>DispatcherServlet—>filter—>preHandle—>controller—>postHandle 第一步: 编写一个Java类实现HandlerInterceptor(…...

Liunx中系统安全及文件系统(极其粗糙版)

PS&#xff1a;下面知识点还很粗糙下次有时间再改 系统安全&#xff1a; 系统安全和数据防护&#xff0c;数据备份的资质 比如三台服务器&#xff1a; 500万 工信部是有要求的&#xff0c;组织必须保证处理的个人数据的安全性 品牌形象如何维护呢 基于liunx的安全加固措施…...

Java中的数组

前言&#xff1a; 本篇博客将为大家介绍Java中的数组的相关知识。 目录 基本介绍 概念相关 数组的使用 数组是引用类型 应用场景 保存数据 作为方法的参数 作为方法的返回值 练习 数组转字符串 数组拷贝 求数组中元素的平均值 查找数组中的指定元素&#xff08;二…...

Java反射调用jar包实现多态

上一篇实现了反射调用jar包&#xff0c;但是没有实现多态&#xff0c;这次先给自己的jar包类抽象一个接口&#xff0c;然后实现类实现接口。最后调用放反射得到的对像转换成接口类型调用执行。 定义接口&#xff0c;指定包为ZLZJar package ZLZJar;public interface ITest {p…...

PowerBI 一些基础功能

1、PowerBI创建日期表 1.1、Power BI 日期表 - 知乎日期是做数据分析的时候使用最频繁的分析维度&#xff0c;一般建议建立单独的日期维度表&#xff0c;并与事实表的日期字段建立连接。 建立日期维度表可通过DAX函数的方式进行&#xff1a; 日期表 CALENDAR(DATE("2023&…...

Mac用命令行安装Adobe代码字体Source Code Pro

执行命令 brew tap homebrew/cask-fonts && brew cask install font-source-code-pro...

RustDay05------Exercise[31-40]

31.结构体申明 结构体在这里给了三种声明样式 (1)字典样式的键值对(使用花括号) (2)元组样式的数值元组(使用圆括号) (3)空结构体,可以被格式化输出名字 // structs1.rs // Address all the TODOs to make the tests pass! // Execute rustlings hint structs1 or use the…...

wireshark过滤器的简单介绍

wireshark过滤器的简单介绍 Wireshark的过滤器主要分为捕获过滤器和显示过滤器两种&#xff0c;其中捕获过滤器在数据包捕获时起作用&#xff0c;而显示过滤器用于在已捕获的数据包的集合中筛选数据。以下是一些Wireshark过滤器的详细介绍&#xff1a; 捕获过滤器&#xff1a;…...

数据结构:二叉树(1)

目录 树的概念 树的表示形式 二叉树 二叉树的性质 题目 二叉树的存储 链式存储 初始化二叉树 二叉树的遍历 前序遍历&#xff1a;根&#x1f449;左子树&#x1f449;右子树 中序遍历&#xff1a;左子树&#x1f449;根&#x1f449;右子树 后序遍历&#xff1a;左子…...

[nlp] chathome—家居装修垂类大语言模型的开发和评估

ChatHome: Development and Evaluation of a Domain-Specific LanguageModel for Home Renovation ChatHome: 家居装修垂类大语言模型的开发和评估 1、摘要: 我们的方法包括两个步骤:首先,使用广泛的家庭装修数据集(包括专业文章、标准文档和网络内容)对通用模型进行后预训…...

http(下)

http的工作流程&#xff1a; 客户端---服务端通信过程 请求----响应的模型 建立连接&#xff1a;tcp/ip协议与服务器建立连接&#xff08;三次握手&#xff09;&#xff0c;客户端向服务器的80端口发送连接请求 发送请求&#xff1a;一旦连接建立之后&#xff0c;客户端就像…...

Python学习基础笔记七十二——IDE集成开发环境

集成开发环境&#xff0c;英文缩写是IDE。 IDE可以帮你更高效地开发项目代码。因为它提供了非常实用的功能&#xff0c;比如项目文件管理、语法高亮、代码导航、自动补齐代码、语法静态检查、调试、版本控制等等。 两款IDE&#xff1a;Pycharm和VSCode。 pycharm中的代码文件都…...

解锁数据库简洁之道:FastAPI与SQLModel实战指南

在构建现代Web应用程序时&#xff0c;与数据库的交互无疑是核心环节。虽然传统的数据库操作方式&#xff08;如直接编写SQL语句与psycopg2交互&#xff09;赋予了我们精细的控制权&#xff0c;但在面对日益复杂的业务逻辑和快速迭代的需求时&#xff0c;这种方式的开发效率和可…...

HTML 列表、表格、表单

1 列表标签 作用&#xff1a;布局内容排列整齐的区域 列表分类&#xff1a;无序列表、有序列表、定义列表。 例如&#xff1a; 1.1 无序列表 标签&#xff1a;ul 嵌套 li&#xff0c;ul是无序列表&#xff0c;li是列表条目。 注意事项&#xff1a; ul 标签里面只能包裹 li…...

c++ 面试题(1)-----深度优先搜索(DFS)实现

操作系统&#xff1a;ubuntu22.04 IDE:Visual Studio Code 编程语言&#xff1a;C11 题目描述 地上有一个 m 行 n 列的方格&#xff0c;从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子&#xff0c;但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...

12.找到字符串中所有字母异位词

&#x1f9e0; 题目解析 题目描述&#xff1a; 给定两个字符串 s 和 p&#xff0c;找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义&#xff1a; 若两个字符串包含的字符种类和出现次数完全相同&#xff0c;顺序无所谓&#xff0c;则互为…...

爬虫基础学习day2

# 爬虫设计领域 工商&#xff1a;企查查、天眼查短视频&#xff1a;抖音、快手、西瓜 ---> 飞瓜电商&#xff1a;京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空&#xff1a;抓取所有航空公司价格 ---> 去哪儿自媒体&#xff1a;采集自媒体数据进…...

Linux --进程控制

本文从以下五个方面来初步认识进程控制&#xff1a; 目录 进程创建 进程终止 进程等待 进程替换 模拟实现一个微型shell 进程创建 在Linux系统中我们可以在一个进程使用系统调用fork()来创建子进程&#xff0c;创建出来的进程就是子进程&#xff0c;原来的进程为父进程。…...

第7篇:中间件全链路监控与 SQL 性能分析实践

7.1 章节导读 在构建数据库中间件的过程中&#xff0c;可观测性 和 性能分析 是保障系统稳定性与可维护性的核心能力。 特别是在复杂分布式场景中&#xff0c;必须做到&#xff1a; &#x1f50d; 追踪每一条 SQL 的生命周期&#xff08;从入口到数据库执行&#xff09;&#…...

PostgreSQL——环境搭建

一、Linux # 安装 PostgreSQL 15 仓库 sudo dnf install -y https://download.postgresql.org/pub/repos/yum/reporpms/EL-$(rpm -E %{rhel})-x86_64/pgdg-redhat-repo-latest.noarch.rpm# 安装之前先确认是否已经存在PostgreSQL rpm -qa | grep postgres# 如果存在&#xff0…...

深入理解Optional:处理空指针异常

1. 使用Optional处理可能为空的集合 在Java开发中&#xff0c;集合判空是一个常见但容易出错的场景。传统方式虽然可行&#xff0c;但存在一些潜在问题&#xff1a; // 传统判空方式 if (!CollectionUtils.isEmpty(userInfoList)) {for (UserInfo userInfo : userInfoList) {…...

DBLP数据库是什么?

DBLP&#xff08;Digital Bibliography & Library Project&#xff09;Computer Science Bibliography是全球著名的计算机科学出版物的开放书目数据库。DBLP所收录的期刊和会议论文质量较高&#xff0c;数据库文献更新速度很快&#xff0c;很好地反映了国际计算机科学学术研…...