HarmonyOS NEXT 实战之元服务：静态案例效果---蜻蜓AI小助手

背景：

前几篇学习了元服务，后面几期就让我们开发简单的元服务吧，里面丰富的内容大家自己加，本期案例 仅供参考

先上本期效果图 ，里面图片自行替换

效果图1完整代码案例如下：

import { authentication } from '@kit.AccountKit';
import { BusinessError } from '@kit.BasicServicesKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { promptAction } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  @State inputValue: string = '';
  @State role: number = 0;
  @State roleal: number = 0;

  build() {
    Column({ space: 8 }) {
      Stack({ alignContent: Alignment.Bottom }) {
        Column() {
          Column({ space: 4 }) {
            Text($r('app.string.EntryAbility_label'))
              .fontSize(22)
              .fontColor(Color.Black)
              .fontWeight(FontWeight.Bolder)
            Text("介绍")
              .fontSize(15)
              .fontColor(Color.Black)
          }
          .width('100%')
          .justifyContent(FlexAlign.Center)
          .padding({
            top: 4,
            bottom: 8
          })

          Scroll() {
            Column({ space: 8 }) {
              Row() {
                Row({ space: 8 }) {
                  Row() {
                    Text('帮我写一个祝华为鸿蒙取得更大成绩的祝福语')
                      .fontSize(14)
                      .fontColor(Color.Black)
                  }
                  .width('auto')
                  .backgroundColor('#BAD7DB')
                  .padding({
                    left: 16,
                    right: 16,
                    top: 8,
                    bottom: 8
                  })
                  .borderRadius({
                    topLeft: 4,
                    bottomLeft: 4,
                    bottomRight: 8
                  })

                  Image($r('app.media.startIcon'))
                    .width(24)
                    .height(24)
                }
                .justifyContent(FlexAlign.End)
                .alignItems(VerticalAlign.Top)
              }
              .width('100%')
              .margin({ top: 10 })
              .justifyContent(FlexAlign.End)


              if (this.role === 1) {
                Row() {
                  Row({ space: 8 }) {
                    Image($r('app.media.qingtingal'))
                      .width(24)
                      .height(24)
                      .borderRadius(8)
                    Row() {
                      Text('鸿蒙破晓，智启新篇。愿华为鸿蒙在科技创新的征途上，如璀璨星辰闪耀无垠苍穹，以无畏之姿突破重重技术壁垒，将万物互联的愿景编织得更为绚丽壮阔。让智能生态的版图持续拓展，携手全球开发者共创无限可能，引领未来科技潮流，在数字化的浪潮中乘风破浪，斩获更为卓越辉煌的丰功伟绩，铭刻于科技发展的不朽史册，福泽亿万用户畅享智能极致体验。')
                        .fontSize(14)
                        .padding({ right: 8 })
                        .fontColor(Color.Black)
                    }
                    .width('100%')
                    .backgroundColor('#E6F4E8')
                    .padding({
                      left: 16,
                      right: 16,
                      top: 8,
                      bottom: 8
                    })
                    .borderRadius({
                      topRight: 4,
                      bottomLeft: 8,
                      bottomRight: 4
                    })
                  }
                  .justifyContent(FlexAlign.Start)
                  .alignItems(VerticalAlign.Top)
                }
                .width('100%')
                .justifyContent(FlexAlign.Start)
              }
              if (this.roleal === 1) {
                Row() {
                  Row({ space: 8 }) {
                    Image($r('app.media.qingtingal'))
                      .width(24)
                      .height(24)
                      .borderRadius(8)
                    Row() {
                      Text('小助手还在学习中哦。。。')
                        .fontSize(14)
                        .padding({ right: 8 })
                        .fontColor(Color.Black)
                    }
                    .width('100%')
                    .backgroundColor('#E6F4E8')
                    .padding({
                      left: 16,
                      right: 16,
                      top: 8,
                      bottom: 8
                    })
                    .borderRadius({
                      topRight: 4,
                      bottomLeft: 8,
                      bottomRight: 4
                    })
                  }
                  .justifyContent(FlexAlign.Start)
                  .alignItems(VerticalAlign.Top)
                }
                .width('100%')
                .justifyContent(FlexAlign.Start)
              }

            }.width('100%')
          }
          .width('96%')
          .scrollable(ScrollDirection.Vertical)
          .flexShrink(1)
        }
        .width('100%')
        .height('100%')
        .padding({ bottom: 50 })

        Row({ space: 8 }) {
          TextInput({ placeholder: "请输入提示词...", text: this.inputValue })
            .height(48)
            .fontSize(16)
            .placeholderFont({ size: 16 })
            .placeholderColor('#999999')
            .borderRadius(8)
            .backgroundColor('#F2F4F5')
            .flexShrink(1)
            .onChange((value: string) => {
              this.inputValue = value;
            })
          Image($r('app.media.fasong'))
            .width(32)
            .height(32)
            .onClick(async () => {
              // this.loadingCtrl.open();
              if (this.inputValue === "") {
                promptAction.showToast({
                  message: "发送内容不能为空！"
                })
                return;
              }
              this.roleal = 1

            })
        }
        .width('100%')
        .margin({ bottom: 50 })
        .padding({
          left: 8,
          right: 8
        })
        .backgroundColor(Color.White)
      }
      .width('100%')
      .height('100%')
    }
    .width('100%')
    .height('100%')
    .margin({ top: 50 })
  }

  aboutToAppear() {
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
    this.loginWithHuaweiID();
    setTimeout(() => {
      this.role = 1;
    }, 1000)


  }

  /**
   * Sample code for using HUAWEI ID to log in to atomic service.
   * According to the Atomic Service Review Guide, when a atomic service has an account system,
   * the option to log in with a HUAWEI ID must be provided.
   * The following presets the atomic service to use the HUAWEI ID silent login function.
   * To enable the atomic service to log in successfully using the HUAWEI ID, please refer
   * to the HarmonyOS HUAWEI ID Access Guide to configure the client ID and fingerprint certificate.
   */
  private loginWithHuaweiID() {
    // Create a login request and set parameters
    let loginRequest = new authentication.HuaweiIDProvider().createLoginWithHuaweiIDRequest();
    // Whether to forcibly launch the HUAWEI ID login page when the user is not logged in with the HUAWEI ID
    loginRequest.forceLogin = false;
    // Execute login request
    let controller = new authentication.AuthenticationController();
    controller.executeRequest(loginRequest).then((data) => {
      let loginWithHuaweiIDResponse = data as authentication.LoginWithHuaweiIDResponse;
      let authCode = loginWithHuaweiIDResponse.data?.authorizationCode;
      // Send authCode to the backend in exchange for unionID, session

    }).catch((error: BusinessError) => {
      hilog.error(0x0000, 'testTag', 'error: %{public}s', JSON.stringify(error));
      if (error.code == authentication.AuthenticationErrorCode.ACCOUNT_NOT_LOGGED_IN) {
        // HUAWEI ID is not logged in, it is recommended to jump to the login guide page

      }
    });
  }
}

最近文章>>>>>>>>>>>

HarmonyOS NEXT实战：元服务与应用 APP 发布应用市场的详细步骤与流程

若本文对您稍有帮助，诚望您不吝点赞，多谢。

有兴趣的同学可以点击查看源码

• gitee：https://gitee.com/jiaojiaoone/explore-harmony-next/tree/case%2Fwanandroid/
• github：https://github.com/JasonYinH/ExploreHarmonyNext.git