更新记录

1.0.0（2026-01-27） 下载此版本

新版本上线咯~

平台兼容性

uni-app(4.81)

jack-aiagent

HarmonyOS 小艺智能体拉起插件 - 让你的 UniApp 应用轻松集成 AI 智能助手

📖 简介

jack-aiagent 是一个专为 UniApp 开发的鸿蒙小艺智能体拉起插件。通过简单的 <embed> 标签，即可在你的应用中集成华为小艺智能体功能，为用户提供智能问答、咨询服务等 AI 能力。

✨ 特性

• 🚀 简单易用 - 只需一个 <embed> 标签即可集成
• 🎯 原生体验 - 基于鸿蒙 @kit.AgentFrameworkKit 原生 API
• 🎨 可定制 - 支持自定义标题、问候语、按钮样式
• 📦 开箱即用 - 无需复杂配置，快速接入
• 🔒 安全可靠 - 不采集任何用户数据
• 💯 完全免费 - 开源免费使用

🎬 效果预览

点击智能体按钮后，会拉起华为小艺智能体对话界面，用户可以通过语音或文字与 AI 助手进行交互。

📋 平台支持

注意：此插件仅支持 HarmonyOS NEXT 平台，其他平台请使用条件编译处理。

📦 安装

方式一：通过 HBuilderX 插件市场（推荐）

1. 访问插件市场：https://ext.dcloud.net.cn/plugin?name=jack-aiagent
2. 点击"使用 HBuilderX 导入插件"
3. 选择你的项目，完成导入

方式二：手动安装

1. 下载插件源码
2. 将 jack-aiagent 文件夹复制到项目的 uni_modules 目录下
3. 重启 HBuilderX

🚀 快速开始

第一步：获取智能体 ID

在使用插件之前，需要先在华为开发者平台创建智能体：

1. 访问 华为开发者联盟
2. 进入"小艺智能体"管理后台
3. 创建新的智能体，配置知识库和对话能力
4. 获取智能体的 agentId（格式：agent9******************）

第二步：在页面中使用

<template>
  <view class="container">
    <!-- #ifdef APP-HARMONY -->
    <embed 
      class="ai-agent" 
      tag="aiagent" 
      :options="agentOptions"
    ></embed>
    <!-- #endif -->

    <!-- #ifndef APP-HARMONY -->
    <view class="not-support">
      <text>当前平台暂不支持智能体功能</text>
    </view>
    <!-- #endif -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      agentOptions: {
        agentId: 'agent9b5fb0d253194fde9b8e218c5ce36592',  // 你的智能体 ID
        title: '智能助手',                                  // 按钮显示文字
        queryText: '你好，有什么可以帮您的？'               // 默认问候语
      }
    }
  }
}
</script>

<style scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40rpx;
}

.ai-agent {
  width: 130px;
  height: 40px;
}

.not-support {
  text-align: center;
  color: #999;
  padding: 60rpx;
}
</style>

📚 API 文档

options 配置项

样式配置

插件内部已配置以下样式属性：

• isShowShadow: false - 不显示阴影
• titleColors: ['#1AD0F1','#FFA4E5'] - 渐变色标题

你可以通过 CSS 调整容器的宽高和布局：

.ai-agent {
  width: 130px;   /* 按钮宽度 */
  height: 40px;   /* 按钮高度 */
}

💡 使用示例

示例 1：基础用法

<template>
  <view>
    <!-- #ifdef APP-HARMONY -->
    <embed 
      class="ai-agent" 
      tag="aiagent" 
      :options="agentOptions"
    ></embed>
    <!-- #endif -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      agentOptions: {
        agentId: 'your_agent_id',
        title: '智能客服',
        queryText: '您好，有什么可以帮您的？'
      }
    }
  }
}
</script>

示例 2：动态参数

从其他页面跳转并传递参数：

// 页面 A：跳转并传递参数
uni.navigateTo({
  url: '/pages/ai-agent/index?message=' + encodeURIComponent('我想咨询育儿问题')
})

// 页面 B：接收参数
export default {
  data() {
    return {
      agentOptions: {
        agentId: 'your_agent_id',
        title: '育儿助手',
        queryText: '你好'
      }
    }
  },

  onLoad(options) {
    if (options.message) {
      this.agentOptions.queryText = decodeURIComponent(options.message)
    }
  }
}

示例 3：多智能体切换

<template>
  <view>
    <picker @change="onAgentChange" :value="currentIndex" :range="agents" range-key="name">
      <view class="picker">
        当前：{{ agents[currentIndex].name }}
      </view>
    </picker>

    <!-- #ifdef APP-HARMONY -->
    <embed 
      class="ai-agent" 
      tag="aiagent" 
      :options="currentAgent"
    ></embed>
    <!-- #endif -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentIndex: 0,
      agents: [
        {
          name: '育儿助手',
          agentId: 'agent_parenting_id',
          title: '育儿助手',
          queryText: '您好，我是育儿助手'
        },
        {
          name: '健康顾问',
          agentId: 'agent_health_id',
          title: '健康顾问',
          queryText: '您好，我是健康顾问'
        }
      ]
    }
  },

  computed: {
    currentAgent() {
      return this.agents[this.currentIndex]
    }
  },

  methods: {
    onAgentChange(e) {
      this.currentIndex = e.detail.value
    }
  }
}
</script>

示例 4：结合用户数据

export default {
  data() {
    return {
      agentOptions: {
        agentId: 'your_agent_id',
        title: '智能助手',
        queryText: '你好'
      }
    }
  },

  onLoad() {
    const userInfo = uni.getStorageSync('userInfo')
    if (userInfo) {
      this.agentOptions.queryText = `您好${userInfo.name}，有什么可以帮您的吗？`
    }
  }
}