HarmonyOS 鸿蒙Next基于uniapp的方式开发HarmonyOS应用时候，通过app-plus:titleNView 配置页面右上角按钮未生效（API12+）

在基于 UniApp 开发 HarmonyOS 应用时，app-plus:titleNView配置未生效的核心原因是：app-plus是 UniApp 针对 Android/iOS 端设计的原生导航栏配置，HarmonyOS 平台的导航栏实现逻辑与 Android/iOS 不同，因此该配置暂未适配 HarmonyOS 平台。

解决方案：使用「自定义导航栏」替代（推荐，跨平台兼容）

由于 HarmonyOS 不支持 UniApp 的titleNView配置，建议通过隐藏原生导航栏 + 自定义导航栏组件的方式实现右上角按钮，同时兼容跨平台场景。

步骤 1：隐藏原生导航栏

在pages.json中，给目标页面的style添加navigationStyle: "custom"，隐藏原生导航栏：

{
  "path": "pages/besties",
  "style": {
    "navigationBarTitleText": "XXX",
    "navigationBarBackgroundColor": "#ff4f87",
    "navigationStyle": "custom", // 隐藏原生导航栏
    "app-plus": {
      "bounce": "none"
    }
  }
}

步骤 2：自定义导航栏组件（实现右上角按钮）

在页面中手动编写导航栏布局，包含标题和右上角按钮，示例代码（Vue3 语法）：

<template>
  <!-- 自定义导航栏 -->
  <view class="custom-nav-bar" :style="{backgroundColor: '#ff4f87'}">
    <!-- 标题 -->
    <view class="nav-title">XXX</view>
    <!-- 右上角按钮 -->
    <view class="nav-right-btn" @click="handleRightBtnClick">
      <text :style="{fontSize: '18px', color: '#FFFFFF'}">+</text>
    </view>
  </view>

  <!-- 页面内容 -->
  <view class="page-content">
    <!-- 你的页面内容 -->
  </view>
</template>

<script setup>
// 右上角按钮点击事件
const handleRightBtnClick = () => {
  console.log("右上角按钮被点击");
  // 这里写按钮的业务逻辑
};
</script>

<style scoped>
/* 自定义导航栏样式（适配HarmonyOS状态栏高度） */
.custom-nav-bar {
  width: 100%;
  height: var(--status-bar-height) + 44px; /* 状态栏高度 + 导航栏高度 */
  padding-top: var(--status-bar-height); /* 适配状态栏 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
  box-sizing: border-box;
}

.nav-title {
  color: #FFFFFF;
  font-size: 18px;
  font-weight: bold;
}

.nav-right-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
}

/* 页面内容区，避免被导航栏遮挡 */
.page-content {
  padding-top: calc(var(--status-bar-height) + 44px);
}
</style>

补充说明（针对 UniApp X 项目）

如果你的项目是UniApp X（专门适配 HarmonyOS 的 UniApp 模式），可以直接使用 HarmonyOS 原生的Navigation组件配置右上角按钮（需在uts页面中实现）：

// pages/besties/besties.uts
@Entry
@Component
struct BestiesPage {
  build() {
    Navigation() {
      // 页面内容
      Column() {
        Text("页面内容")
      }
    }
    .title("XXX") // 导航栏标题
    .titleMode(NavigationTitleMode.Free)
    .backgroundColor("#ff4f87")
    // 配置右上角按钮
    .toolBar({
      items: [
        {
          value: "+",
          textColor: "#FFFFFF",
          fontSize: 18,
          action: () => {
            console.log("右上角按钮被点击");
            // 业务逻辑
          }
        }
      ]
    })
  }
}

关键注意事项

1. app-plus配置的局限性：app-plus是 UniApp 对 Android/iOS 端的扩展配置，HarmonyOS 平台的导航栏、原生组件等逻辑与 Android/iOS 不同，因此大部分app-plus配置在 HarmonyOS 上不生效。
2. 状态栏高度适配：自定义导航栏时，需通过var(--status-bar-height)获取 HarmonyOS 设备的状态栏高度，避免导航栏被状态栏遮挡。
3. UniApp X 的适配：若使用 UniApp X 开发 HarmonyOS 应用，建议直接使用 HarmonyOS 原生组件（如Navigation），兼容性和体验更好。

通过自定义导航栏或 UniApp X 的原生Navigation组件，即可实现 HarmonyOS 应用中页面右上角按钮的需求，同时保证跨平台兼容性或原生体验。