uni-app开发APP端的层级问题

uni-app开发安卓APP的心酸路程

近期在使用uni-app框架开发安卓APP，在需求当中，内容页有图文类型和视频类型两种类型，图文类别的基本操作下来没毛病，但在视频页中，突然页面的效果就和预期不一样了！！！

接下来就浅浅记录一下此问题的发生和处理方案

1、问题的产生：原生组件概念

在视频页中，视频播放器的尺寸基本占满页面空间80%，当点击评论之后会有弹出层显示评论内容，在这时视频播放器和弹出层会重叠在一起，但不论怎么调整弹出层的 Z-index 加大层级都还是会被播放器覆盖，导致评论列表无法正常预览。

查找问题的发生原因，在uni-app官方文档中，有这样一段描述：

小程序和App的vue页面，主体是webview渲染的。为了提升性能，小程序和App的vue页面下部分ui元素，比如导航栏、tabbar、video、map使用了原生控件。这种方式被称为混合渲染。

虽然提升了性能，但原生组件带来了其他问题：
1、前端组件无法覆盖原生控件的层级问题
2、原生组件不能嵌入特殊前端组件(如scroll-view)
3、原生控件ui无法灵活自定义
4、原生控件在Android上，字体会渲染为rom的主题字体，而webview如果不经过单独改造不会使用rom主题字体

原文地址：https://uniapp.dcloud.io/component/native-component.html

到此，我们大概可以得出原因：

video 标签渲染是原生组件的方式，弹出层的标签是 webview 渲染方式，而原生组件层级默认最高。

2、寻找解决方案

官方文档中给出了对应的解决方案，描述如下所示，但本次的需求是 APP 开发，因此 cover-view 不能解决本次发生的问题，在 APP 端的3种解决方案中，plus.nativeObj.view 和 新开半透明nvue页面也被本人放弃，没有对应开发经验，查看文档发现上手难度较大，为快速解决问题，优先选择了使用 subNVue 的方式。

为了解决webview渲染中原生组件层级最高的限制，uni-app提供了 cover-view 和 cover-image 组件，让其覆盖在原生组件上。

除了跨端的cover-view，App端还提供了3种方案：plus.nativeObj.view、subNVue、新开半透明nvue页面。详述如下

3、使用 subNVue 解决问题

• pages.json 中配置 subNvue 组件

  详细见官方文档 app-plus 位置：https://uniapp.dcloud.io/collocation/pages.html#style

  {
      "path": "pages/videoDetail/index",
      "style": {
          // APP端开发配置
          "app-plus": {
              // 配置 subNVues 组件
              "subNVues": [{
                  // 组件的 id， 在组件当中需要绑定个 id 同此处定义的值一致
                  "id": "videoInfo",
                  // 组件所在的文件路径
                  "path": "pages/videoDetail/subNVue/videoInfo",
                  // 组件的初始化样式配置
                  "style": {
                      "position": "absolute",
                      "width": "100%",
                      "background": "transparent"
                  }
              }],
          }
      }
  },

• 组件编写

  记得组件创建的路径需要和配置的相同（这里查阅资料，推荐在页面文件所在位置创建 subNVue 文件夹放置组件，否则有某些问题，咱也没试过，就先照做着吧），同时最外层标签需要绑定 id 值！！！

  这样下来基本 subNVue 组件的创建就成功了，接下来就正常编写我们的样式和逻辑，运行就会发现层级问题得到解决啦~

  

• 个人开发的小记录

  ①官方提供的 subVue 组件方法详见：https://uniapp.dcloud.io/api/window/subNVues.html

  ②组件和页面通讯，官方提供：https://uniapp.dcloud.io/api/window/communication.html

  官方推荐使用 emit 和 on，但在实践中发现有某些不明问题，应该是本人技术不成熟没发现源头，这里推荐使用 vuex 等其他方式替代

  ③subVue 组件的样式限制，记得样式操作不能像普通 .vue 文件一样了哟，有点痛苦~

  这个本人发现 style 操作有小惊喜喔，虽然不推荐直接操作 style，但是真的感觉没办法了呀

  官方文档：https://uniapp.dcloud.io/tutorial/nvue-css.html