UNIApp 原生子窗体 subNvue 使用指南

2023-11-19 08:55:47

在 UNIApp 中，subNvue 作为原生子窗体登场，有效解决了 App 中层级覆盖和原生界面灵活自定义的问题，为开发者带来了更为便捷的开发体验。本文将对 subNvue 的使用进行详细总结，帮助开发者轻松掌握这一利器。

subNvue 简介

subNvue 是自 1.9.10 版本开始在 UNIApp 中引入的一项新特性。它是一种 vue 页面的原生子窗体，用于解决 App 中 vue 页面中的层级覆盖问题，并提供原生界面的灵活自定义能力。subNvue 仅支持 App 平台，可通过组件进行使用。

subNvue 使用场景

subNvue 适用于以下场景：

解决层级覆盖问题：在 App 中，某些原生组件（如视频、地图）需要位于 vue 页面的最上层，而使用传统的 vue 布局方式难以实现。subNvue 可以将这些组件嵌入到 vue 页面中，并将其置于最上层，避免层级覆盖。
实现原生界面自定义：subNvue 允许开发者在 vue 页面中嵌入原生组件，从而实现原生界面的灵活自定义。例如，开发者可以在 vue 页面中嵌入一个原生导航栏，并对其外观和行为进行定制。

subNvue 使用方法

使用 subNvue 非常简单，仅需通过组件即可嵌入原生组件。该组件支持以下属性：

src： 原生组件的路径，如 @/components/my-native-component
style： 原生组件的样式，支持内联样式和外部样式表
id： 原生组件的 id，用于与原生代码进行交互

示例代码

<template>
  <view>
    <nvue id="my-native-component" src="@/components/my-native-component" style="width: 100%; height: 100%;"></nvue>
  </view>
</template>

<script>
export default {
  name: 'App',
  methods: {
    // 与原生组件交互
    callNativeMethod() {
      const nativeComponent = plus.webview.getWebviewById('my-native-component');
      nativeComponent.evalJS('myNativeMethod()');
    }
  }
}
</script>