HarmonyOS NEXT 实战之元服务：静态案例效果---查看手机历史记录

背景：

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

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

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

import { authentication } from "@kit.AccountKit";
import { BusinessError } from "@kit.BasicServicesKit";
import { hilog } from "@kit.PerformanceAnalysisKit";


// 定义数据类型
interface TimeLineInfo {
  index: number;
  time: string;
  text: string;
  content: string;
}

@Entry
@Component
export struct Index {
  // PullToRefresh组件必需参数
  @State data: string[] = [];
  // 定义Scroller对象，Scroller组件所需参数
  private scroller: Scroller = new Scroller();
  // 控制图片下拉变化的高度
  @State refreshPullDownHeight: number = 0;
  // 图片初始高度以及控制图片上拉变化的高度
  @State imgMarginTop: number = -100;
  // clip属性值，表示裁剪掉超出父组件的部分
  private clipValue: boolean = true;
  // 时间轴模块数据
  private timeLineData: TimeLineInfo[] = [
    {
      index: 1,
      time: '时间：2024年12月1日08:15',
      text: '软件名称：微信',
      content: '情境描述：早上起床后，躺在床上先打开微信，看看有没有重要的消息或者朋友圈的新动态，顺便给家人发了个早安问候。'
    },
    {
      index: 2,
      time: '时间：2024年12月1日08:30',
      text: '软件名称：今日头条',
      content: '情境描述：在吃早餐的时候，打开今日头条浏览一下当天的新闻热点，了解国内外发生的大事小情，边吃边看，充实一下自己的见闻。'
    },
    {
      index: 3,
      time: '时间：2024年12月1日09:00',
      text: '软件名称：钉钉',
      content: '情境描述：到达工作地点后，坐在办公桌前，打开钉钉进行上班打卡，然后查看团队的工作任务安排以及有没有同事发来的新消息。'
    },
    {
      index: 4,
      time: '时间：2024年12月1日09:30',
      text: '软件名称：WPS Office',
      content: '情境描述：开始处理工作任务，需要撰写一份工作报告，于是打开WPS Office，新建文档，认真地敲打着键盘，将工作内容和成果详细记录下来。'
    },
    {
      index: 5,
      time: '时间：2024年12月1日10:30',
      text: '软件名称：QQ音乐',
      content: '情境描述：工作间隙，感觉有点疲惫，想放松一下，便打开QQ音乐，戴上耳机，播放起自己喜欢的轻音乐，让身心在舒缓的旋律中得到片刻的休憩。'
    },
    {
      index: 6,
      time: '时间：2024年12月1日11:00',
      text: '软件名称：淘宝',
      content: '情境描述：想起家里的洗发水快用完了，趁着休息时间打开淘宝，搜索自己常用的洗发水品牌，对比不同店铺的价格和优惠活动，准备下单购买。'
    },
    {
      index: 7,
      time: '时间：2024年12月1日12:30',
      text: '软件名称：美团',
      content: '情境描述：到了午餐时间，打开美团看看附近有哪些好吃的外卖，浏览着各种美食图片和评价，最后选了一家心仪的餐厅下单订了一份午餐。'
    }, {
    index: 10,
    time: '时间：2024年12月1日15:00',
    text: '软件名称：支付宝',
    content: '情境描述：收到淘宝的订单支付提醒，打开支付宝完成洗发水的付款操作，顺便查看了一下支付宝的余额和近期的消费账单。'
  }
  ];

  // 时间轴模块
  @Builder
  getTimeLineMode(time: string, text: string, content: string) {
    Row() {
      Column() {
        // 时间轴
        Column()
          .width($r('app.integer.refreshtimeline_width_and_height_zero'))
          .height($r('app.integer.refreshtimeline_width_and_height_one_hundred_and_forty'))
          .border({
            width: { left: $r('app.string.refreshtimeline_time_line_width') },
            color: { left: $r('app.color.refreshtimeline_time_line_color') },
            style: { left: BorderStyle.Dotted }
          })

        // 时间轴节点
        Column()
          .width($r('app.integer.refreshtimeline_width_and_height_ten'))
          .height($r('app.integer.refreshtimeline_width_and_height_ten'))
          .backgroundColor($r('app.color.refreshtimeline_time_node_color'))
          .borderRadius($r('app.integer.refreshtimeline_borderRadius_fifty'))
          .position({
            x: $r('app.integer.refreshtimeline_position_X'),
            y: $r('app.integer.refreshtimeline_position_Y')
          })
      }
      .margin({ left: $r('app.integer.refreshtimeline_margin_left_twenty') })

      // 内容区域
      Column() {
        Text(time)
          .fontSize($r('app.integer.refreshtimeline_font_size_fourteen'))
          .width($r('app.string.refreshtimeline_one_hundred_percent'))
          .height($r('app.integer.refreshtimeline_width_and_height_twenty'))
          .margin({
            left: $r('app.integer.refreshtimeline_margin_left_ten'),
            top: $r('app.integer.refreshtimeline_margin_top_five'),
            bottom: $r('app.integer.refreshtimeline_margin_bottom_five')
          })

        Text(text)
          .width($r('app.string.refreshtimeline_one_hundred_percent'))
          .margin({
            left: $r('app.integer.refreshtimeline_margin_left_ten'),
            top: $r('app.integer.refreshtimeline_margin_top_five')
          })
          .fontSize($r('app.integer.refreshtimeline_font_size_sixteen'))

        Text(content)
          .width($r('app.string.refreshtimeline_one_hundred_percent'))
          .margin({
            left: $r('app.integer.refreshtimeline_margin_left_ten'),
            top: $r('app.integer.refreshtimeline_margin_top_five')
          })
          .fontSize(12).padding(3)
      }
      .width($r('app.string.refreshtimeline_eighty_four_percent'))
      .height($r('app.integer.refreshtimeline_width_and_height_one_hundred_and_twenty'))
      .borderRadius($r('app.integer.refreshtimeline_borderRadius_ten'))
      .margin({
        left: $r('app.integer.refreshtimeline_margin_left_twelve'),
        top: $r('app.integer.refreshtimeline_margin_top_fifteen'),
        bottom: $r('app.integer.refreshtimeline_margin_bottom_five')
      })
      .backgroundColor(Color.White)
    }
    .width($r('app.string.refreshtimeline_one_hundred_percent'))
    .backgroundColor($r('app.color.refreshtimeline_time_line_mode_back_color'))
  }

  build() {
    Column() {
      Image($r('app.media.shoujilishijilu'))
        .width($r('app.string.refreshtimeline_one_hundred_percent'))
        .height(120)
        .objectFit(ImageFit.Cover)
      // .position({ y: (this.imgMarginTop + this.refreshPullDownHeight) })

      this.getListView();
    }
    .backgroundColor($r('app.color.refreshtimeline_back_color'))
    .clip(this.clipValue)
  }

  @Builder
  private getListView() {
    List({ scroller: this.scroller }) {
      // TODO: 高性能知识点：此处为了演示场景，列表数量只有7个，使用ForEach，列表数量较多的场景，推荐使用LazyForEach+组件复用+缓存列表项实现
      ForEach(this.timeLineData, (timeLine: TimeLineInfo) => {
        ListItem() {
          this.getTimeLineMode(timeLine.time, timeLine.text, timeLine.content);

        }
      })
    }
    .width($r('app.string.refreshtimeline_one_hundred_percent'))
    .height($r('app.string.refreshtimeline_one_hundred_percent'))
    .scrollBar(BarState.Off)
    .edgeEffect(EdgeEffect.None) // 必须设置列表为滑动到边缘无效果
  }

  aboutToAppear() {

    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

      }
    });

  }
}