UniApp中如何拉起HarmonyOS鸿蒙Next小艺智能体？

开始之前

这边将以我开发的《BabyOne》的经验为例，展开本话题。在开始之前，需要准备好一个小艺智能体，如果还不会创建的，可以参考我的上一篇文章完成创建哦~

传送门：华为小艺智能体完整创建流程保姆级教程（附审核避坑指南）

此外，发布智能体前，需要提前关联应用，具体操作如下：

在工作空间中找到准备关联的智能体，点击进入
找到**「关联应用」**，点击右侧的「+」号，添加对应的应用即可

调试时，如果智能体暂未发布，可以配置设备白名单后，发布真机调试，即可正常被白名单的设备拉起测试~

jack-aiagent 插件介绍

官方文档中，需要使用Agent Framework Kit中的Function组件拉起智能体。但是在UniAPP中无法直接使用，需要“搭桥”来实现。

在我的 BabyOne 应用实际开发过程中，为了简化在 UniApp 中集成小艺智能体的流程，我封装了 jack-aiagent 插件。

插件地址

🔗 UniApp 插件市场：https://ext.dcloud.net.cn/plugin?name=jack-aiagent

技术架构

插件目录结构

uni_modules/jack-aiagent/
├── utssdk/
│   └── app-harmony/
│       ├── aiagent.ets             # 鸿蒙平台实现
│       └── index.uts               # UTS插件引入
└── package.json

插件完整源码

为了方便大家使用和理解，这里提供 jack-aiagent 插件的完整源代码，可以直接复制到你的项目中使用。

1. jack-aiagent/utssdk/app-harmony/aiagent.ets（鸿蒙平台实现）

import { NodeRenderType } from '@kit.ArkUI'
import { NativeEmbedBuilderOptions, defineNativeEmbed } from "@dcloudio/uni-app-runtime"

import { FunctionComponent, FunctionController } from '@kit.AgentFrameworkKit';
import { BusinessError } from "@kit.BasicServicesKit";

interface AgentBuilderOptions extends NativeEmbedBuilderOptions {
  agentId: string,
  title: string,
  queryText: string
}

@Component
struct AiAgentComponent {
  @Prop agentId: string
  @Prop title: string
  @Prop queryText: string

  build() {
    FunctionComponent({
      agentId: this.agentId,
      onError: (err: BusinessError) => {
        console.log(err.message)
      },
      options: {
        title: this.title,
        queryText: this.queryText,
        isShowShadow: false,  // 这里可以根据需要选择是否要阴影，在我的BabyOne中，为了适配场景，所以调整成了false，如果有需要可以改为true
        titleColors:['#1AD0F1','#FFA4E5']
      },
      controller:new FunctionController()
    })
    
  }
}

@Builder
function AiAgentBuilder(options: AgentBuilderOptions) {
  AiAgentComponent(options)
    .width(options.width)
    .height(options.height)

  
}

defineNativeEmbed('aiagent', {
  builder: AiAgentBuilder
})

2. jack-aiagent/utssdk/app-harmony/index.uts（接口定义）

import './aiagent.ets';

核心实现原理

插件使用 UniApp 的 <embed> 标签来嵌入鸿蒙原生组件，通过传递参数来配置智能体的行为。

快速开始

第一步：安装插件

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

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

方式二：手动安装

打卡 HBuilderX
找到 uni_modules 目录，右击点击新建插件
填写好插件名称 jack-aiagent，分类选择「UTS插件-API插件」，完成创建即可
复制上面的源码
找到对应的路径，替换对应的内容即可
重新编译运行

第二步：获取智能体 ID

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

访问华为开发者联盟
进入"小艺智能体"管理后台
创建新的智能体，配置知识库和对话能力
获取智能体的 agentId

具体操作可以参考我的上一篇文章的「五、智能体ID」哦~

传送门：华为小艺智能体完整创建流程保姆级教程（附审核避坑指南）

第三步：在页面中使用

这是最简单的部分！只需要在你的页面中添加一个 <embed> 标签即可。

完整示例代码

下面是我BabyOne应用中的一个完整的示例页面，展示了如何使用 jack-aiagent 插件：

<template>
  <view class="ai-agent-page">
    <!-- 右上角装饰圆 -->
    <view class="decoration-circle"></view>
    
    <!-- #ifdef APP-HARMONY -->
    <!-- AI 智能体按钮 -->
    <view class="ai-agent-container">
      <embed 
        class="ai-agent-native" 
        tag="aiagent" 
        :options="agentOptions"
      ></embed>
    </view>
    <!-- #endif -->
    
    <text class="button-hint">点击上方按钮召唤AI助手</text>
    
    <!-- 介绍说明区域 -->
    <view class="intro-section">
      <view class="intro-card">
        <view class="card-header">
          <text class="card-icon">✨</text>
          <text class="card-title">育儿小伴侣BabyOne</text>
        </view>
        
        <view class="card-content">
          <text class="intro-text">
            点击上方的"育儿小伴侣"按钮，即可召唤BabyOne软件提供的《育儿小伴侣BabyOne》小艺智能体。
          </text>
          
          <view class="feature-list">
            <view class="feature-item">
              <text class="feature-icon">💬</text>
              <view class="feature-info">
                <text class="feature-title">智能问答</text>
                <text class="feature-desc">专业的育儿知识问答服务</text>
              </view>
            </view>
            
            <view class="feature-item">
              <text class="feature-icon">👶</text>
              <view class="feature-info">
                <text class="feature-title">个性化建议</text>
                <text class="feature-desc">根据宝宝情况提供定制建议</text>
              </view>
            </view>
            
            <view class="feature-item">
              <text class="feature-icon">📚</text>
              <view class="feature-info">
                <text class="feature-title">知识库丰富</text>
                <text class="feature-desc">涵盖喂养、健康、早教等领域</text>
              </view>
            </view>
            
            <view class="feature-item">
              <text class="feature-icon">⚡</text>
              <view class="feature-info">
                <text class="feature-title">即时响应</text>
                <text class="feature-desc">快速解答您的育儿疑问</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 使用提示 -->
      <view class="tips-card">
        <view class="tips-header">
          <text class="tips-icon">💡</text>
          <text class="tips-title">使用提示</text>
        </view>
        <view class="tips-list">
          <text class="tip-item">• 您可以询问任何育儿相关的问题</text>
          <text class="tip-item">• 支持语音和文字两种交互方式</text>
          <text class="tip-item">• AI助手会根据您的问题提供专业建议</text>
          <text class="tip-item">• 建议结合实际情况参考使用</text>
        </view>
      </view>
    </view>
  </view> 
</template>

<script>
// #ifdef APP-HARMONY
import 'uni_modules/jack-aiagent'
// #endif

export default {
  data() {
    return {
      agentOptions: {
        agentId: 'agent9**************************',  // 你的智能体 ID
        title: '育儿智能助手',                          // 按钮显示的标题
        queryText: '你好，我想咨询育儿问题'               // 默认问题（可以留空）
      }
    }
  },
  
  onLoad(options) {
    console.log('AI Agent 页面加载:', this.agentOptions)
  }
}
</script>

<style lang="scss" scoped>
.ai-agent-page {
  width: 100%;
  min-height: 100vh;
  background: #fff4f9;
  padding: 10rpx 40rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow: hidden;
}

/* 右上角装饰圆 */
.decoration-circle {
  position: absolute;
  top: -100rpx;
  right: -100rpx;
  width: 300rpx;
  height: 300rpx;
  border-radius: 50%;
  background: linear-gradient(135deg, #FF9A9E, #FECFEF);
  opacity: 0.15;
  z-index: 0;
}

.ai-agent-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 40rpx 0;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  padding: 0;
}

.ai-agent-native {
  width: 130px;
  height: 40px;
  text-align: center;
}

.button-hint {
  font-size: 26rpx;
  color: #FF9A9E;
  text-align: center;
  position: relative;
  z-index: 1;
}

/* 介绍说明区域 */
.intro-section {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
  text-align: left;
  position: relative;
  z-index: 1;
  width: 100%;
}

.intro-card {
  background: #fff;
  border-radius: 24rpx;
  padding: 32rpx;
  box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.06);
}

.card-header {
  display: flex;
  align-items: center;
  gap: 12rpx;
  margin-bottom: 24rpx;
}

.card-icon {
  font-size: 32rpx;
}

.card-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  text-align: left;
}

.card-content {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}


.feature-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  margin-top: 8rpx;
}

.feature-item {
  display: flex;
  align-items: flex-start;
  gap: 16rpx;
  padding: 20rpx;
  background: linear-gradient(135deg, #FFF5F5, #FFF0F5);
  border-radius: 16rpx;
}

.feature-icon {
  font-size: 36rpx;
  line-height: 1;
}

.feature-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4rpx;
}

.feature-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
}

.feature-desc {
  font-size: 24rpx;
  color: #999;
  line-height: 1.5;
}

/* 使用提示 */
.tips-card {
  background: #fff;
  border-radius: 24rpx;
  padding: 32rpx;
  box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.06);
}

.tips-header {
  display: flex;
  align-items: center;
  gap: 12rpx;
  margin-bottom: 20rpx;
}

.tips-icon {
  font-size: 28rpx;
}

.tips-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
}

.tips-list {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.tip-item {
  font-size: 26rpx;
  color: #666;
  line-height: 1.8;
}
</style>

示例效果图

当然了，还可以稍加修改，放到首页中，更加美观哦~效果如下图（页面右上角）：

更多介绍请移步我的个人主页，查看我的文章

更多关于UniApp中如何拉起HarmonyOS鸿蒙Next小艺智能体？的实战教程也可以访问 https://www.itying.com/category-93-b0.html

vueper 1楼

大家有什么问题欢迎在评论区讨论~

更多关于UniApp中如何拉起HarmonyOS鸿蒙Next小艺智能体？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

itying888 2楼

支持一波

bupafengyu 3楼

在UniApp中拉起HarmonyOS Next的小艺智能体，目前没有官方直接支持的API。UniApp主要面向跨平台应用开发，其能力封装通常基于现有平台的通用接口。HarmonyOS Next作为独立系统，其原生能力（如小艺智能体）需要通过鸿蒙原生开发（ArkTS）调用。若要在UniApp中实现，需通过开发原生插件来桥接鸿蒙的Want启动能力，具体实现依赖鸿蒙SDK。

bupafengyu 4楼

感谢分享！这是一个非常实用的UniApp集成HarmonyOS Next小艺智能体的解决方案。你封装的 jack-aiagent 插件巧妙地利用了UTS和 <embed> 标签，为跨平台开发者提供了便捷的接入途径。

核心要点总结：

前提条件：必须先在华为开发者平台创建并发布小艺智能体，并在智能体管理中关联你的应用。这是功能正常调用的基础。
技术路径：通过UTS插件，在HarmonyOS平台侧调用原生的 @kit.AgentFrameworkKit 中的 FunctionComponent，实现了在UniApp Vue页面中嵌入并拉起智能体。
关键配置：插件通过 agentOptions 接收 agentId、title、queryText 等参数，与原生开发体验保持一致。
调试技巧：在智能体审核发布前，可通过配置设备白名单进行真机调试，保障开发流程顺畅。

你的方案解决了UniApp生态直接调用HarmonyOS原生AI能力的关键问题，代码结构清晰，示例完整，具有很好的参考和复用价值。