更新记录

1.1.0（2026-03-30） 下载此版本

• 新增鸿蒙 HDS 沉浸光感底部 Tab 原生 embed 组件
• 新增材质能力查询与配置解析同步 API
• 移除插件内置 Vue 包装组件，改为页面侧直接使用 embed
• 新增示例页面接入代码

平台兼容性

uni-app(4.87)

jack-hds-cjgg

jack-hds-cjgg 是一个面向 uni-app 的鸿蒙 UTS 插件，用来在普通页面中挂载鸿蒙原生 HDS 沉浸光感底部 Tab，并提供材质能力查询与配置解析接口。

功能

• 在 uni-app 普通页面中通过 embed 使用鸿蒙原生 HDS 浮动底部 Tab
• 支持系统自适应沉浸光感
• 支持根据设备能力自动降级自定义材质等级
• 提供 getHdsMaterialInfoSync、resolveHdsMaterialProfileSync、createHdsImmersiveTabOptionsSync 等接口
• 插件仅保留 UTS API + 原生 embed 注册，页面侧自行控制布局与定位

页面用法

<template>
  <view class="page">
    <embed
      class="page-tab-embed"
      tag="jack-hds-cjgg-tab"
      :options="nativeTabOptions"
      @change="handleNativeChange"
      @itemclick="handleNativeItemClick"
    />
  </view>
</template>

<script>
import { createHdsImmersiveTabOptionsSync } from '@/uni_modules/jack-hds-cjgg'

export default {
  data() {
    return {
      currentIndex: 0,
      nativeTabOptions: {},
      items: [
        { label: '闹钟', systemSymbol: 'alarm_fill_1' },
        { label: '时钟', systemSymbol: 'worldclock_fill_2' },
        { label: '秒表', systemSymbol: 'stopwatch_2' }
      ]
    }
  },
  onLoad() {
    this.refreshNativeTabOptions()
  },
  methods: {
    refreshNativeTabOptions() {
      this.nativeTabOptions = createHdsImmersiveTabOptionsSync({
        items: this.items,
        current: this.currentIndex,
        barBottomMargin: 0,
        preferAdaptive: true
      })
    },
    handleNativeChange(event) {
      const detail = event.detail || event
      this.currentIndex = detail.index
      this.refreshNativeTabOptions()
    },
    handleNativeItemClick(event) {
      console.log(event.detail || event)
    }
  }
}
</script>

支持的系统符号

当前插件内置了以下 systemSymbol 映射：

• alarm_fill_1
• worldclock_fill_2
• stopwatch_2
• square_and_pencil
• star
• more

如果你不传 systemSymbol，组件会退化为纯文字 Tab。

API

// #ifdef APP-HARMONY
import {
  getHdsMaterialInfoSync,
  resolveHdsMaterialProfileSync,
  createHdsImmersiveTabOptionsSync
} from '@/uni_modules/jack-hds-cjgg'
// #endif

getHdsMaterialInfoSync()

返回当前设备支持的系统材质类型，以及推荐的自定义材质等级。

resolveHdsMaterialProfileSync(options)

根据 preferAdaptive、requestedLevel、requestedType 解析出最终建议使用的 materialType 与 materialLevel。

createHdsImmersiveTabOptionsSync(options)

生成可直接传给原生 embed 组件的配置对象。

开发文档

• UTS 语法
• UTS API插件
• uni-app 鸿蒙嵌入原生组件