【鸿蒙】大模型对话应用（三）：跨Ability跳转页面

news2024/10/6 12:29:14

Demo介绍

本demo对接阿里云和百度的大模型API，实现一个简单的对话应用。

DecEco Studio版本：DevEco Studio 3.1.1 Release

HarmonyOS SDK版本：API9

关键点：ArkTS、ArkUI、UIAbility、网络http请求、列表布局、层叠布局

页面跳转

在前序大模型对话应用（一）（二）中完成了接口的调试和页面的构建；

想要从应用首页跳转到百度和阿里云的大大模型对话页面，可以通过 router.pushUrl 方法直接进行页面之间的跳转；

也可以通过跨Ability拉起其他Ability的方式，从EntryAbility（默认的入口Ability）中启动新的Ability；为了可以同时与两个大模型进行对话而不相互影响，本demo才用拉起新的Ability方式进行实现。

新建Ability

ets目录下新建ability，命名为 ALiYunAbility

新建成功后，会自动创建对应的目录和UIAbility（此处是ALiYunAbility）；

ALiYunAbility 中 onWindowStageCreate方法是窗口页面展示时（可以简单的这么理解）会触发的系统回调函数；其中 windowStage.loadContent 会指明加载展示的具体页面。

同时src/main/module.json5 文件中，会自动生成对应ability的配置信息：

用同样的方式，可以创建百度云模型对话的Ability（BaiDuYunAbility）：

添加点击事件，拉起Ability

在首页src/main/ets/pages/Index.ets 中添加两个按钮（Button组件），分别实现点击事件

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column({space: 20}) {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)

        Button('拉起文心一言').fontSize(25)
          .onClick(() => {

          })
        
        Button('拉起通义千问').fontSize(25)
          .onClick(() => {

          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

复习一下拉起一个Ability的三个步骤：

获取UIAbility上下文 UIAbilityContext
构建want参数，描述跳转Ability信息
调用UIAbilityContext.startAbility(want:Want) 方法完成Ability的启动

根据上述步骤完善首页（Index.ets）按钮点击事件：

Index.ets代码：

import common from '@ohos.app.ability.common'
import Want from '@ohos.app.ability.Want'
@Entry
@Component
struct Index {
  private context = getContext(this) as common.UIAbilityContext
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column({space: 20}) {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)

        Button('拉起文心一言').fontSize(25)
          .onClick(() => {
            let want: Want = {
              deviceId: "",
              bundleName: "com.example.intelligenttalk",
              moduleName: "entry",
              abilityName: "BaiDuYunAbility"
            }
            this.context.startAbility(want)
          })

        Button('拉起通义千问').fontSize(25)
          .onClick(() => {
            let want: Want = {
              deviceId: "",
              bundleName: "com.example.intelligenttalk",
              moduleName: "entry",
              abilityName: "ALiYunAbility"
            }
            this.context.startAbility(want)
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

页面预览效果：