【鸿蒙】大模型对话应用(三):跨Ability跳转页面

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的三个步骤:

  1. 获取UIAbility上下文 UIAbilityContext
  2. 构建want参数,描述跳转Ability信息
  3. 调用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: "",abilityName: "ALiYunAbility"
            }
            this.context.startAbility(want)
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

页面预览效果:

Preview预览器无法实现跨Ability跳转,此处需要使用模拟器(本机/远程均可)或真机调试。

src/main/ets/pages 目录下新建一个Page(注意是新建,复制已有的ets文件不会自动生成路由配置文件),命名为ChatPageALiYun,与ChatPage区分;并将ChatPage的代码复制过来。修改一下对话框头的文本即可。

 修改两个UIAbility文件,指定加载页面

使用模拟器或真机调试

点击首页, [ 拉起文心一言 ] 按钮,页面将发生跳转,此处展示远程模拟器的页面截图效果。(本地模拟器、远程模拟器、真机设备均可达到调试效果)

点击首页, [ 拉起通义千问 ] 按钮,页面将发生跳转,此处展示远程模拟器的页面截图效果。(本地模拟器、远程模拟器、真机设备均可达到调试效果)

打开任务栏,可以看到一个应用启用了三个不同的功能界面

完成在一个Ability中启动另一个Ability的功能后,我们实现了页面的跳转;目前跳转的对话页面,展示的对话内容是固定的。

那么下一步将在跳转至对话页面后,将输入框的输入文本内容,作为调用大模型接口的参数,向大模型发起请求;将大模型接口返回的信息作为对话内容展示在页面中,完成对话效果。

相关参考文档(鸿蒙官方开发指南)文档中心

原文地址:https://blog.csdn.net/weixin_44348327/article/details/135922259

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


文章浏览阅读1.4k次。被@Observed装饰的类,可以被观察到属性的变化;子组件中@ObjectLink装饰器装饰的状态变量用于接收@Observed装饰的类的实例,和父组件中对应的状态变量建立双向数据绑定。这个实例可以是数组中的被@Observed装饰的项,或者是class object中是属性,这个属性同样也需要被@Observed装饰。单独使用@Observed是没有任何作用的,需要搭配@ObjectLink或者@Prop使用。_鸿蒙ark对象数组
文章浏览阅读1k次。Harmony OS_harmonyos创建数据库
文章浏览阅读1.1k次,点赞25次,收藏23次。自定义组件Header.ets页面(子组件)//自定义组件@Component//组件声明private title:ResourceStr//接收的参数build(){Row() {index.ets(父组件)//导入自定义组件@Entry@Componentbuild() {Column() {/*** 1. 自定义组件调用-----自定义组件------* 2. 在调用的组件上设置样式*/ShopTitle({ title: '商品列表' })
文章浏览阅读952次,点赞11次,收藏25次。ArkUI是一套构建分布式应用界面的声明式UI开发框架。它使用极简的UI信息语法、丰富的UI组件、以及实时界面预览工具,帮助您提升移动应用界面开发效率30%。您只需使用一套ArkTS API,就能在Android、iOS、鸿蒙多个平台上提供生动而流畅的用户界面体验。_支持ios 安卓 鸿蒙next的跨平台方案
文章浏览阅读735次。​错误: 找不到符号符号: 变量 Layout_list_item位置: 类 ResourceTable_错误: 找不到符号 符号: 变量 resourcetable 位置: 类 mainabilityslice
文章浏览阅读941次,点赞23次,收藏21次。harmony ARKTS base64 加解密_鸿蒙 鸿蒙加解密算法库
文章浏览阅读860次,点赞21次,收藏24次。使用自定义布局,实现子组件自动换行功能。图1自定义布局的使用效果创建自定义布局的类,并继承ComponentContainer,添加构造方法。//如需支持xml创建自定义布局,必须添加该构造方法实现ComponentContainer.EstimateSizeListener接口,在onEstimateSize方法中进行测量。......@Override//通知子组件进行测量//关联子组件的索引与其布局数据idx++) {//测量自身。_鸿蒙javaui
文章浏览阅读917次,点赞25次,收藏25次。这里需要注意的是,真机需要使用华为侧提供的测试机,测试机中会安装纯鸿蒙的系统镜像,能够体验到完整的鸿蒙系统功能,纯鸿蒙应用目前还不能完美地在 HarmonyOS 4.0 的商用机侧跑起来。当前,真机调试需要使用华为侧提供的测试机,测试机中会安装纯鸿蒙的系统镜像,能够体验到完整的鸿蒙系统功能,纯鸿蒙应用目前还不能完美地在 HarmonyOS 4.0 的商用机侧跑起来。另外,由于样式的解析是基于组件文件的纬度的,因此样式文件只能应用于被其引用的组件文件中,而不能跨文件应用,并且样式文件也只支持类选择器。_鸿蒙 小程序
文章浏览阅读876次,点赞17次,收藏4次。2. HarmonyOS应用开发DevEcoStudio准备-1HUAWEI DevEco Studio为运行在HarmonyOS和OpenHarmony系统上的应用和服务(以下简称应用/服务)提供一站式的开发平台。
文章浏览阅读811次。此对象主要映射JSON数组数据,比如服务器传的数据是这样的。_arkts json
文章浏览阅读429次。鸿蒙小游戏-数字华容道_华为鸿蒙手机自带小游戏
文章浏览阅读1.1k次,点赞24次,收藏19次。Ability是应用/服务所具备的能力的抽象,一个Module可以包含一个或多个Ability。
文章浏览阅读846次。本文带大家使用MQTT协议连接华为IoT平台,使用的是E53_IA1 智慧农业扩展板与 BearPi-HM_Nano 开发主板_mqtt 如何对接第三方iot平台
文章浏览阅读567次。HarmonyOS_arkts卡片
文章浏览阅读1k次,点赞19次,收藏20次。ArkTS开发鸿蒙OS连接mongoDB(后端node.js)2024最新教程
文章浏览阅读1.2k次,点赞23次,收藏15次。HarmonyOS与OpenHarmony(1)本质上的不同是:HarmonyOS是鸿蒙操作系统,而OpenHarmony则是从开源项目。这里可以联想一下Android,比如小米手机在Android开源系统的基础上开发了MIUI的手机操作系统,HarmonyOS就类似于MIUI,OpenHarmony类似Android基础底座。(2)HarmonyOS:是双框架,内聚了AOSP(Android Open Source Project )和OpenHarmony等。_鸿蒙模拟器开了怎么跑代码
文章浏览阅读1.1k次,点赞21次,收藏21次。鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Navigation组件。
文章浏览阅读2k次。由于之前的哥们匆忙离职了,所以鸿蒙手表项目的新版本我临时接过来打包发布,基本上之前没有啥鸿蒙经验,但是一直是做Android开发的,在工作人员的指导下发现打包配置基本上和Android一样,所以这些都不是问题,这里记录一下使用过程中遇到的问题。!过程和遇到的问题基本上都讲解了,关机睡觉,打卡收工。_鸿蒙系统adb命令
文章浏览阅读7.3k次,点赞9次,收藏29次。39. 【多选题】_column和row容器中,设置子组件在主轴方向上的对齐格式
文章浏览阅读1.1k次,点赞13次,收藏24次。18.鸿蒙HarmonyOS App(JAVA)日期选择器-时间选择器点击button按钮显示月份与获取的时间。_harmonyos农历获取