uniapp 如何使用subNVue原生子窗体创建分享弹窗(全网最详细)

已于 2023-12-01 11:14:06 修改
阅读量2.7k 收藏 7
点赞数
分类专栏： uniapp框架专业知识 文章标签： uni-app vue
于 2023-10-31 12:39:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40808668/article/details/118222174
版权
本文档详细介绍了如何在uni-app中利用subNVue原生子窗体解决在web-view或video上弹窗被覆盖的问题。遵循官方文档，首先在项目中创建subNVue文件夹和nvue文件，然后在pages.json中配置引用，最后在需要弹窗的页面调用显示subNVue。注意nvue的CSS规则和调试时需在手机上进行。
摘要由CSDN通过智能技术生成

1.解决问题：
如何解决在使用web-view页面或者video上能够使用弹窗，总所周知在原生子组件中没办法在使用uni-popup或是另外的一些普通弹窗都会被覆盖住所有接下来我们可以使用subNVue这个原生子窗体的方法去解决APP端打开弹窗显示弹窗被覆盖(下面我要解决的是在web-view页面创建弹窗不被覆盖)

2.官方文档解释：
点击跳转链接
注意事项:(重要的事情请先注意看完再操作)
1.nvue中css与我们平时使用css 的规则有所不同，不明白的同学想要了解可以跳转我另外的链接学习
跳转路径
2.调试的时候请不要在Hbuilder虚拟机上调试不然是空白页面，请连接手机的时候去调试，subNVue只支持在手机上运行

3.接下来废话少说直接上手
第一步在你的文档中创建一个subNVue文件夹，文件夹下创建一个nvue文件

了解本专栏 订阅专栏 解锁全文 超级会员免费看
嚣张农民
关注
专栏目录
订阅专栏
uni-app原生子窗体（app端）
初来乍到IT狗的博客
10-24 8027
  在uni-app中video是原生组件，层级最高，全屏后普通前端组件无法覆盖，如果想要在视频自行绘制界面：   1、app端vue页面可以用 cover-view、cover-image ，但是cover-view、cover-image中不支持嵌套其它组件，包括再次嵌套cover-view；   2、app端 2.1.5 以上nvue页面的video也可以通过cover-view来绘制界面覆...
uniapp 使用原生子窗体进行视频聊天
anyRTC的博客
05-21 2010
uniapp 使用原生子窗体进行视频聊天 现在 uniapp 开发的实时音视频聊天类的 APP 大部分都要在 nvue 页面上进行开发。虽然 nvue 与 vue 的区别不是很大，但还是有所差异的。 仔细查看了 uniapp 官网，发现了可以使用原生子窗体进行开发，可以把整个视频聊天封装到一个原生子窗体中，方便移植。 一、原生子窗体 subNVue subNVue 页面可以和 vue 页面进行通信，来告知 vue 页面用户执行的操作。或者通过 vue 页面对 subNVue 进行数据和状态的更新。 subN
uniapp + Vue3自定义封装弹窗组件
最新发布
正是修行时，正是修行时，正式修行时...
08-26 659
uniapp + Vue3自定义封装弹窗组件
Vue 组件间的通信(1)
2401_84436058的博客
04-29 592
父组件向子组件传递数据。：自定义事件。：插槽分发内容，带上标签数据一起传输，主要是父组件想子组件传输。组件间通信规则。
uniapp原生子窗体subNvue的使用超容易理解的总结，解决覆盖不了视频或者地图等层级问题
2401_84140023的博客
04-18 2254
javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。
uni-app subNVue 原生子窗体开发指南
球球不吃虾WHR2349博客
08-04 2914
此功能需要 HBuilderX 版本 1.9.10+， 不支持非自定义组件模式。 需求背景 在我们的开发中，经常会遇到各种层级覆盖和原生界面自定义的问题： 覆盖原生导航栏、tabbar 的弹出层组件。比如侧滑菜单盖不住地图、视频、原生导航栏，比如 popup盖不住tabbar。 弹出层内部元素可滚动, 在地图、视频等组件上的添加复杂覆盖组件：比如直播视频上覆盖滚动的聊天记录。 在小程序中只能用 cover-vi...
Uni-App subNVue 原生子窗体
Lix0777的博客
03-18 1150
在我们的开发中，经常会遇到各种弹窗，层级问题 而在uniapp官网中就有这么一个 Popup，而且使用这个 组件之间通信也简单了多。直接正题，最简单的使用。 创建 子窗体 页面，这边建议在pages目录下面创建一个subNVue目录，再在其目录下创建子窗体页面。 |-- pages |-- index // index 目录 | |-- subNVue // subNVue 目录 | |-- nav.nv
uniapp使用video组件，并实现一些弹框
2301_77513512的博客
11-07 1595
我当前项目是一个看视频的小程序，因为用到了uniapp内置的video组件，并且观看视频中以及结尾有不少弹框，所以准备记录一下一些常用api、函数、使用方法和中间遇到的问题。
uniapp video视频层级过高 遮挡顶部导航 页面弹窗 使用原生子窗体解决问题
05-30
在uniapp项目中 video层级过高 页面滑动时 遮挡顶部导航 或者页面有弹窗效果 视频同时也会遮挡弹窗 使用subNVues 解决此问题 pages.json 中 配置{ "path": "pages/index/index", "style": { ...
uni-app中覆盖视频（原生子窗体）、视频下载
ZJW222的博客
03-12 4045
在uni-app中，使用video时，要在视频上覆盖内容，并且要兼容app端，安卓端的适配还好做点，但是ios的话，就弄了我好久，搞了大半天才搞定，这里记录下 1.微信小程序端 视频做的是全屏显示的视频，使用cover-view和cover-image对视频进行覆盖，不过，cover-view也有很多限制，像文字多行省略，这个没找到方式，单行的省略就直接用普通就可以了 使用cover-vie...
uniapp subNvue 写的视频播放
11-03
应该能应付大部分的视频播放功能
uniapp原生子窗体(弹出层为例子)
qq_40666120的博客
03-29 3059
在当前目录下新建一个目录和一个nvue页面 { "path": "msVideo/msVideo", "style": { "navigationBarTitleText": "子窗体", "navigationStyle": "custom", "app-plus": { "animationType": "slide-out-right", "animationDuration": 300, "subNVues":[{
【uni-app系列】uni-app之nvue使用
热门推荐
邓邓子的博客
09-05 1万+
uni-app App 端内置了一个基于 weex 改进的原生渲染引擎，提供了原生渲染能力。在 App 端，如果使用 vue 页面，则使用 webview 渲染；如果使用 nvue 页面(native vue 的缩写)，则使用原生渲染。一个 App 中可以同时使用两种页面，比如首页使用 nvue，二级页使用 vue 页面，官网 hello uni-app 示例就是如此。虽然 nvue 也可以多端编译，输出 H5 和小程序，但 nvue 的 css 写法受限，所以如果不开发 App，不需要使用 nvue。
uniapp开发app原生子窗体subNvue的使用
weixin_43090018的博客
01-05 8930
用uniapp开发app的时候经常会有以下问题： 1、覆盖原生导航栏、tabbar 的弹出层组件。比如侧滑菜单盖不住地图、视频、原生导航栏，比如 popup盖不住tabbar。 2、弹出层内部元素可滚动, 3、在map、video等组件上的添加复杂覆盖组件：比如直播视频上覆盖滚动的聊天记录 虽然有cover-view来覆盖原生组件，但是在app-vue中不支持嵌套，且只能在map、video组件使用 这个时候用原生子窗体是比较适合的 1、使用前配置page.json 在 pages.json 中，新增
uniapp开发APP如何使用subNVues（map,video组件必备技能）
mengmeng1_的博客
03-02 1万+
在开发中，经常会遇到各种层级覆盖和原生界面自定义的问题： 原生导航栏渐变背景色、灵活自定义内容 覆盖原生导航栏、tabbar 的弹出层组件。比如侧滑菜单盖不住地图、视频、原生导航栏，比如 popup盖不住tabbar。 弹出层内部元素可滚动, 在地图、视频等组件上的添加复杂覆盖组件：比如直播视频上覆盖滚动的聊天记录。 在小程序中只能用 cover-view 来解决。 App中就有三种方法： 1、c...
uniapp 使用subNVue原生子窗体显示弹框或悬浮框
浮游的博客
09-18 2957
subNVue原生子窗体是uniapp提供的一种原生组件，可以在uniapp中嵌入原生页面，并且可以与uniapp页面进行通信。我们可以在原生页面中使用uniapp提供的API来与uniapp页面进行通信，从而实现弹框等功能。在uniapp中，我们可以使用subNVue原生子窗体来解决web-view等原生页面中弹框无法显示的问题。在页面目录下新建专门存放原生子窗体的文件夹，subNVue是使用原生子窗体的vue页面。效果如图，显示在右下角的专属福利弹窗，不挂载在当前页面，挂载在全局。
uniapp：使用subNVue原生子窗体在map上层添加自定义组件
1111111111
10-17 1151
1、创建一个nvue页面，也就是需要在map上层显示的组件，这是子组件，原生子窗体只能用nvue开发，必须遵循nvue的语法规则，很多uniapp组件在nvue里使用不了，很多css也使用不了，这是比较考验耐心的，开发前多研究一下nvue和vue的区别。我们想要在地图上层添加自定义组件，比如一个数据提示框，点一下会展开，再点一下收起，在h5段显示正常，但是到app端真机测试发现组件显示不出来，这是因为map是内置原生组件，层级最高，自定义组件被挡住了，无论如何设置自定义组件的z-index都没有用。
uniapp视频组件层级太高，解决方法使用subNvue原生子体窗口
m0_64520392的博客
06-07 1572
uniapp视频组件层级太高，使用subNvue原生子体窗口 解决
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

嚣张农民

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值