`@infinilabs/custom-icons` 让“图标即配置”的能力落地：从主题与国际化，到自定义图片与统一风格，既能保证设计一致性，又给予业务足够自由度。把它接入你的管理面板或设置页....

方案一、常规安装 下载安装脚本：在终端中执行以下命令来下载并运行 NVM 的安装脚本3： bash 配置环境变量：安装完成后，需要配置环境变量。如果你的终端使用的是 bash，打开或创建~/.ba

你已经创建好了 Coze 智能体，现在想快速把它接入一个网页？不用 React、不用 Vue，甚至不用手敲 npm create —— 本文教你用 trae 的 AI 助手 + 原生 HTML/JS，

前言 在前端世界里，Promise 和 原型链（Prototype） 是两个看似毫不相干，却又互相影响、甚至能相互解释的重要概念。 很多人学习 Promise 时，会关注它的使用：then、catch

在现代 JavaScript 开发中，Promise 是处理异步操作的核心机制之一。ES6 引入的 Promise 极大地简化了“回调地狱”（Callback Hell）问题，并为后续的 async/

当我意识到摄影的思维和 Three.js 的世界如此吻合时，一切变得简单了：Scene 是影棚,Camera 是相机,Light + Material 是布光 + 质感,Renderer 是快门

大家好，我是 Immerse，一名独立开发者、内容创作者、AGI 实践者。 关注公众号：沉浸式趣谈，获取最新文章（更多内容只在公众号更新） 个人网站：https://yaolifeng.com 也同步

使用 React 19 Actions 构建可复用的 React 组件，通过 useTransition() 和 useOptimistic() 实现功能。通过实际案例学习如何追踪待处理状态、实现乐观

一个学生从被 __proto__ 虐哭到彻底搞懂原型链的真实记录。用大白话＋可运行代码，讲清 prototype、构造函数、实例与原型链的关系，揭秘 JS 面向对象底层逻辑，适合前端初学者学习

前言 我们在开发的时候，有时候会遇到，A页面跳转到B页面，B页面改一些数据（例如：收藏状态），回到A页面的时候不想刷新A页面，并看到最新的数据状态； 对于以上场景，有以下几种解决方案； 方法一：Eve

TypeScript中集合了很多泛型工具，在日常开发中，我们经常会看到这类工具的使用，所以属性这类工具也是必备的。

useNamespace useNamespace位于packages/hooks/use-namespace, 旨在帮所有组件统一生成类名/变量名，遵循BEM规范 什么是BEM规范？可阅读下面这篇文

在现代 JavaScript 开发中，异步编程是一个无法回避的话题。从早期的回调函数到 Promise，再到 Generator 函数，JavaScript 一直在探索更优雅的异步编程解决方案。而 a

本文将带你穿越 ES6 异步编程与 JavaScript 面向对象的核心机制，通过一段看似“诡异”的代码，揭示原型链的本质、动态性及其在实际开发中的意义。

想象一下，你的前端项目是一艘准备远航的巨轮，而那些动辄几百上千的依赖包，就是船上所需的各种物资和零件。如果没有一个高效、可靠的“港口管理员”，这艘船会怎样？

在前端开发中，TabBar 是一个非常常见的 UI 组件，而在一些设计需求中，我们希望激活的 Tab 有动态变化的圆角效果，并且宽度可以根据选中状态自适应。本文将分享一个 Vue3 + Less 实现

基于现代Web技术，实现扫码绑定设备工单、电子秤称重反推数量和自动打印标签三大核心功能。攻克了二维码扫描、电子秤对接和打印机集成等技术难点，为制造业提供了一套低成本、高效率的数字化报工解决方案。

一、字段（Field） 字段是类或结构中直接声明的变量。它的唯一使命，就是作为对象状态的一部分，存储数据。 1. 字段的声明 2. 访问修饰符 -- Public 使用Public可以在任何时候，任何

大家好，我是 V 哥。 鸿蒙6的 Agent Framework Kit 是连接应用与小艺智能体生态的核心工具，允许开发者在应用中嵌入智能体入口，实现“应用+智能体”协同服务。以下结合电商、工具类等典型场景，详解集成步骤、代码实战及避坑指南。

联系V哥获取 鸿蒙学习资料

---

一、核心概念与使用前提

关键概念	说明
FunctionComponent	智能体入口UI组件，根据是否设置title自动切换为图标或按钮形态。
AgentController	控制器，用于检查智能体可用性、监听对话框状态（如打开/关闭）。
agentId	智能体唯一标识，需从小艺开放平台获取，长度限制1~64字符。

环境要求：

• 设备：鸿蒙6.0.0(20)及以上版本的手机/平板（模拟器可能不支持）。
• 依赖：在module.json5中声明权限 "reqPermissions": [{ "name": "ohos.permission.INTERNET" }]。

---

二、基础集成：快速拉起智能体

场景示例：电商App在商品详情页添加“智能客服”入口，用户点击直接唤起智能体咨询商品信息。

1. 基础代码实现

import { FunctionComponent, FunctionController } from '@kit.AgentFrameworkKit';
import { common, BusinessError } from '@kit.AbilityKit';

@Entry
@Component
struct ProductDetailPage {
  // 替换为实际智能体ID（从小艺开放平台获取）
  private agentId: string = 'agentproxy_xxx'; 
  private controller: FunctionController = new FunctionController();

  build() {
    Column() {
      // 商品信息展示...
      Text("华为Mate 60 Pro").fontSize(20)

      // 智能客服入口（按钮形态）
      FunctionComponent({
        agentId: this.agentId,
        onError: (err: BusinessError) => {
          console.error("智能体拉起失败:", err.code, err.message); // 错误处理必填
        },
        options: {
          title: '智能客服',     // 设置标题后显示为按钮
          queryText: '咨询华为Mate 60 Pro的续航和拍照功能' // 预设用户意图
        },
        controller: this.controller
      })
      .margin(20)
    }
  }
}

2. 形态适配策略

• 图标形态（不设title）：适合首页导航栏等综合入口。

  FunctionComponent({
    agentId: this.agentId,
    onError: (err) => { /* 处理错误 */ }
    // 不设置title，默认显示小艺图标
  })

• 按钮形态（设置title）：适合场景化意图（如“智能生成旅行计划”）。

---

三、进阶实战：状态监听与可用性检查

场景示例：工具类App在智能体对话框关闭后刷新页面数据（如智能生成报表后更新UI）。

1. 监听对话框状态

@Entry
@Component
struct ReportPage {
  @State isDialogOpen: boolean = false;
  private controller: FunctionController = new FunctionController();

  aboutToAppear() {
    // 监听对话框打开
    this.controller.on('agentDialogOpened', () => {
      this.isDialogOpen = true;
      console.info("智能体对话框已打开");
    });
    
    // 监听对话框关闭（关键：对话框关闭后刷新数据）
    this.controller.on('agentDialogClosed', () => {
      this.isDialogOpen = false;
      this.refreshReportData(); // 自定义数据刷新逻辑
    });
  }

  // 销毁时移除监听
  aboutToDisappear() {
    this.controller.off('agentDialogOpened');
    this.controller.off('agentDialogClosed');
  }

  build() {
    Column() {
      if (this.isAgentSupported) { // 需先检查可用性
        FunctionComponent({
          agentId: this.agentId,
          onError: (err) => { /* 错误处理 */ },
          controller: this.controller
        })
      } else {
        Text("当前设备不支持智能体功能").fontColor(Color.Red)
      }
    }
  }
}

2. 预检查智能体可用性（避免无效加载）

import { common } from "@kit.AbilityKit";

@Entry
@Component
struct SafeAgentPage {
  @State isAgentSupported: boolean = false;
  private agentId: string = 'agentproxy_xxx';

  async aboutToAppear() {
    try {
      const context = getContext(this) as common.UIAbilityContext;
      // 异步检查智能体是否可用
      this.isAgentSupported = await FunctionController.isAgentSupport(context, this.agentId);
    } catch (err) {
      console.error("检查支持状态失败:", err);
    }
  }

  build() {
    Column() {
      if (this.isAgentSupported) {
        FunctionComponent({
          agentId: this.agentId,
          onError: (err) => { /* 处理错误 */ }
        })
      } else {
        Button("下载智能体支持模块")
          .onClick(() => { /* 引导用户升级系统 */ })
      }
    }
  }
}

---

四、常见问题与优化策略

问题场景	解决方案
agentId无效或设备不支持	使用isAgentSupport()预检查，降级显示提示或引导用户升级。
智能体拉起无响应	检查网络权限、确认小艺版本更新，错误回调中输出具体code。
界面卡顿	避免在主线程执行智能体相关操作，耗时逻辑放入TaskPool。

---

五、业务场景扩展建议

1. 电商场景：

   • 商品页设置“智能推荐”按钮，预设查询文本如“推荐适合老年人的手机”。
   • 订单页嵌入“物流查询”智能体，自动读取订单号生成查询意图。

2. 工具场景：

   • 笔记App用图标形态智能体作为全局入口，支持语音速记。
   • 旅行App通过按钮形态智能体生成行程规划（queryText: "规划北京3日游"）。

通过以上步骤，可快速在鸿蒙6应用中集成智能体功能，提升用户交互体验。