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

本文主要是介绍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组件覆盖实现该功能)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/217243

相关文章

MySQL 8 中的一个强大功能 JSON_TABLE示例详解

《MySQL8中的一个强大功能JSON_TABLE示例详解》JSON_TABLE是MySQL8中引入的一个强大功能,它允许用户将JSON数据转换为关系表格式,从而可以更方便地在SQL查询中处理J... 目录基本语法示例示例查询解释应用场景不适用场景1. ‌jsON 数据结构过于复杂或动态变化‌2. ‌性能要

postgresql使用UUID函数的方法

《postgresql使用UUID函数的方法》本文给大家介绍postgresql使用UUID函数的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录PostgreSQL有两种生成uuid的方法。可以先通过sql查看是否已安装扩展函数,和可以安装的扩展函数

Python实现终端清屏的几种方式详解

《Python实现终端清屏的几种方式详解》在使用Python进行终端交互式编程时,我们经常需要清空当前终端屏幕的内容,本文为大家整理了几种常见的实现方法,有需要的小伙伴可以参考下... 目录方法一:使用 `os` 模块调用系统命令方法二:使用 `subprocess` 模块执行命令方法三:打印多个换行符模拟

SpringBoot+EasyPOI轻松实现Excel和Word导出PDF

《SpringBoot+EasyPOI轻松实现Excel和Word导出PDF》在企业级开发中,将Excel和Word文档导出为PDF是常见需求,本文将结合​​EasyPOI和​​Aspose系列工具实... 目录一、环境准备与依赖配置1.1 方案选型1.2 依赖配置(商业库方案)二、Excel 导出 PDF

Python实现MQTT通信的示例代码

《Python实现MQTT通信的示例代码》本文主要介绍了Python实现MQTT通信的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一... 目录1. 安装paho-mqtt库‌2. 搭建MQTT代理服务器(Broker)‌‌3. pytho

如何使用Lombok进行spring 注入

《如何使用Lombok进行spring注入》本文介绍如何用Lombok简化Spring注入,推荐优先使用setter注入,通过注解自动生成getter/setter及构造器,减少冗余代码,提升开发效... Lombok为了开发环境简化代码,好处不用多说。spring 注入方式为2种,构造器注入和setter

MySQL中比较运算符的具体使用

《MySQL中比较运算符的具体使用》本文介绍了SQL中常用的符号类型和非符号类型运算符,符号类型运算符包括等于(=)、安全等于(=)、不等于(/!=)、大小比较(,=,,=)等,感兴趣的可以了解一下... 目录符号类型运算符1. 等于运算符=2. 安全等于运算符<=>3. 不等于运算符<>或!=4. 小于运

使用zip4j实现Java中的ZIP文件加密压缩的操作方法

《使用zip4j实现Java中的ZIP文件加密压缩的操作方法》本文介绍如何通过Maven集成zip4j1.3.2库创建带密码保护的ZIP文件,涵盖依赖配置、代码示例及加密原理,确保数据安全性,感兴趣的... 目录1. zip4j库介绍和版本1.1 zip4j库概述1.2 zip4j的版本演变1.3 zip4

Python 字典 (Dictionary)使用详解

《Python字典(Dictionary)使用详解》字典是python中最重要,最常用的数据结构之一,它提供了高效的键值对存储和查找能力,:本文主要介绍Python字典(Dictionary)... 目录字典1.基本特性2.创建字典3.访问元素4.修改字典5.删除元素6.字典遍历7.字典的高级特性默认字典

JAVA覆盖和重写的区别及说明

《JAVA覆盖和重写的区别及说明》非静态方法的覆盖即重写,具有多态性;静态方法无法被覆盖,但可被重写(仅通过类名调用),二者区别在于绑定时机与引用类型关联性... 目录Java覆盖和重写的区别经常听到两种话认真读完上面两份代码JAVA覆盖和重写的区别经常听到两种话1.覆盖=重写。2.静态方法可andro