当前位置：首页 > article >正文

HarmonyOS NEXT 实战之元服务：静态案例效果---我的订阅每日咨询

article 2025/1/1 23:24:32

背景：

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

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

在这里插入图片描述

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

Index

import { authentication } from '@kit.AccountKit';
import { BusinessError } from '@kit.BasicServicesKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { EventProposeItem } from './EventProposeItem';

@Entry
@Component
struct Index {


  build() {
    Column() {
      Text($r('app.string.EntryAbility_label')).fontSize(20).margin({ bottom: 10 })
      List({ space: 6 }) {
        ForEach(['科技前沿资讯',
          '财经商业动态',
          '文化娱乐热点',
          '健康养生领域',
          '旅游领域',
        ], (item: string) => {
          ListItem() {
            EventProposeItem({ title: item })
          }

        })
      }

    }
    .alignItems(HorizontalAlign.Start)
    .height('100%')
    .padding(8)
    .width('100%')
    .margin({ top: 40 })
  }

  aboutToAppear() {
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
    this.loginWithHuaweiID();
  }

  /**
   * 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

      }
    });
  }
}

Item


@Preview
@ComponentV2
export struct EventProposeItem {
  @Param title: string = ''

  build() {
    Column() {
      Row() {
        Column() {
          Text(this.title).fontSize(16).fontColor('#FFFFFF')
          Text(`${getCurrentDate()} 00:00~${getCurrentDate()} 23:59`).fontSize(11).fontColor('#DDDDDD')
        }.alignItems(HorizontalAlign.Start)

        if (this.title == '科技前沿资讯' ) {
          Image($r('app.media.ic_event_finish')).width(55).height(36).fillColor('#FFFFFF')
        }
      }.width('100%').justifyContent(FlexAlign.SpaceBetween)

      Text(this.getData()).fontSize(12).fontColor('#FFFFFF').margin({ top: 12 })
      Blank().height(21)

      Row() {
        if (this.title == '科技前沿资讯' || this.title == '文化娱乐热点' || this.title == '旅游领域') {
          Text('社会热点')
            .fontSize(11)
            .fontColor('#FFFFFF')
            .backgroundColor('#FFE6960C')
            .padding({
              left: 4,
              right: 4,
              top: 1,
              bottom: 1
            })
            .borderRadius({ topLeft: 4, bottomRight: 4 })
        } else {
          Text('最近热点')
            .fontSize(11)
            .fontColor('#FFFFFF')
            .backgroundColor('#FFE6960C')
            .padding({
              left: 4,
              right: 4,
              top: 1,
              bottom: 1
            })
            .borderRadius({ topLeft: 4, bottomRight: 4 })
        }
        Blank()

        this.infoNum('相关评论', generateFiveDigitRandomNumber() + '', 39)

        Row() {
          this.infoNum('全部信息', generateFiveDigitRandomNumber() + '')
          Image($r('app.media.ic_arrow_right_white')).width(16).margin({ left: 8 })
        }

      }.width('100%')

    }
    .width('100%')
    .borderRadius(8)
    .alignItems(HorizontalAlign.Start)
    .linearGradient({
      angle: 180,
      colors: [["#66000000", 0.3], ['#1a000000', 0.5], ['#66000000', 0.7]]
    })
    .padding({
      top: 8,
      right: 12,
      left: 12,
      bottom: 8
    })
    .margin({ top: 4, bottom: 4 })
    .backgroundImage($r('app.media.startIcon'))
    .backgroundImageSize(ImageSize.Cover)

  }

  @Builder
  infoNum(title: string, num: string, marginRight: number = 0) {
    Column() {
      Text(title)
        .fontSize(10)
        .fontColor('#DDDDDD')
      Text(num)
        .fontSize(14)
        .fontColor('#FFFFFF')
        .fontWeight(FontWeight.Bold)
        .maxLines(2)
        .textOverflow({ overflow: TextOverflow.Ellipsis })
    }.alignItems(HorizontalAlign.End).margin({ right: marginRight })
  }

  // '科技前沿资讯',
  // '财经商业动态',
  // '文化娱乐热点',
  // '健康养生领域',
  // '旅游领域'
  private getData(): string {
    if (this.title == '科技前沿资讯') {
      return '主题：人工智能新突破\n' +
        '内容：今日关注到某知名科研团队在人工智能图像识别领域取得重大进展。他们研发的新型算法能够将图像识别准确率提升至前所未有的高度，在医疗影像诊断、自动驾驶等多个领域有着巨大的应用潜力。例如在医疗领域，该算法可精准识别出微小的病变组织，为早期疾病诊断提供更可靠依据，有望大幅提高疾病治愈率。'
    }
    if (this.title == '财经商业动态') {
      return '主题：股市重大行情\n' +
        '内容：今日全球股市出现较大波动，某新兴行业板块因政策利好消息刺激，股价大幅上涨。多家相关企业市值在短时间内增长显著，其中龙头企业涨幅超过 20%。分析认为，这一趋势可能会持续一段时间，吸引更多投资者关注该领域，但同时也伴随着一定的市场风险，需投资者谨慎评估。'
    }
    if (this.title == '文化娱乐热点') {
      return '主题：热门电影上映\n' +
        '内容：备受期待的一部大片今日全球同步上映，影片以其震撼的视觉效果、精彩的剧情和强大的演员阵容吸引了众多观众。上映首日票房便突破亿元大关，在各大社交媒体平台引发热议，观众纷纷称赞其为年度佳作，有望打破多项票房纪录，成为电影市场的新爆款。'
    }
    if (this.title == '健康养生领域') {
      return '主题：季节饮食与健康\n' +
        '内容：随着冬季的到来，养生专家建议增加一些温热性食物的摄入。例如，羊肉具有补肾壮阳、温中暖胃的功效，可适当食用羊肉汤、涮羊肉等菜品。同时，冬季气候干燥，应多补充水分和富含维生素 C 的水果，如橙子、柚子等，有助于增强免疫力，预防感冒和呼吸道疾病。此外，早睡晚起、适当运动，如散步、太极拳等，也是冬季养生的关键要点。'
    }
    if (this.title == '旅游领域') {
      return '主题：热门旅游目的地推荐\n' +
        '内容：冬季来临，北方的冰雪旅游进入旺季。哈尔滨成为了热门旅游目的地之一，游客可以前往冰雪大世界欣赏精美的冰雕作品，这些冰雕在灯光的映照下宛如梦幻城堡。此外，还可以去亚布力滑雪场体验刺激的滑雪项目，那里拥有多条不同难度级别的雪道，适合各类滑雪爱好者。同时，当地的特色美食如红肠、马迭尔冰棍等也不容错过，能让游客在欣赏美景的同时大饱口福。'
    }
    return ''
  }
}

function getCurrentDate(): string {
  const now = new Date();
  const year = now.getFullYear();
  const month = now.getMonth() + 1; // getMonth() 返回值从0开始，所以需要+1
  const day = now.getDate();

  return `${year}年${month}月${day}日`;
}


function generateFiveDigitRandomNumber(): number {
  const min = 10000; // 五位数的最小值
  const max = 99999; // 五位数的最大值
  return Math.floor(Math.random() * (max - min + 1)) + min;
}