HarmonyOS NEXT 实战之元服务：静态案例效果（二）

news2025/3/17 4:13:11

背景：

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

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

在这里插入图片描述

效果图代码案例如下：

  • Index里面实现
import { authentication } from '@kit.AccountKit';
import { BusinessError } from '@kit.BasicServicesKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { AddressExchangeViewComponent } from './AddressExchangeViewComponent';


export const DATA_CONFIG: Record<string, number> = {
  'NUMBER_LEN': 7, // 数字个数
  'DURATION_TIME': 200, // 动画时长
  'MILLENNIAL_LEN': 3 // 千分位长度
}

export const STYLE_CONFIG: Record<string, number> = {
  'ITEM_GUTTER': 12, // 元素间距
  'ITEM_HEIGHT': 26, // 数字元素高度
  'TEXT_MARGIN': 2, // 文本间距
  'PADDING_TOP': 32  // 顶部边距
}



@Entry
@Component
struct Index {
  build() {
    Column({ space: STYLE_CONFIG.ITEM_GUTTER }) {
      Text($r('app.string.EntryAbility_label')).fontColor(Color.White)
        .fontSize($r('sys.float.ohos_id_text_size_headline8'))
        .width($r('app.string.digital_scroll_animation_max_size'))
        .textAlign(TextAlign.Start)
        .margin({left:25})
      Row({ space: 10 }) {
        Text(this.getDate())
          .fontSize($r('app.string.ohos_id_text_size_headline'))
          .fontWeight(FontWeight.Medium)
          .height(30)
          .fontColor(Color.White)
        Text('天气  多云 18℃')
          .height(30)
      }
      .width('100%').margin({left:15})


      AddressExchangeViewComponent()
    }
    .padding({
      top: STYLE_CONFIG.PADDING_TOP
    })
    .margin({ top: 60 })
    .width($r('app.string.digital_scroll_animation_max_size'))
    .height($r('app.string.digital_scroll_animation_max_size'))
    .linearGradient({
      colors: [[$r('app.color.digital_scroll_animation_background_color'), 0.0],
        [$r('sys.color.ohos_id_color_background'), 0.3]]
    })

  }

  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

      }
    });
  }

  private getDate() {
    const now = new Date();
    const year = now.getFullYear();
    const month = now.getMonth() + 1; // 注意：月份是从0开始计数的
    const day = now.getDate();
    const hours = now.getHours();
    const minutes = now.getMinutes();
    const seconds = now.getSeconds();
    return `${year} 年 ${month} 月 ${day} 日`
  }
}
  • AddressExchangeViewComponent 里面实现
import { promptAction } from "@kit.ArkUI"

@Preview
@Component
export struct AddressExchangeViewComponent {

  build() {

    Column({ space: 16 }) {

      Row() {
        Text('附近汽车租赁门店')
          .fontSize(18)
          .fontColor(Color.Black)

        Text('查看更多>')
          .fontSize(15)
          .fontColor(Color.Black)
      }.justifyContent(FlexAlign.SpaceBetween).width('100%').padding(10).onClick(() => {
      })

      Row({ space: 20 }) {
        Column({ space: 10 }) {
          Text() {
            Span('小王汽车租赁门店')
          }.fontWeight(FontWeight.Bold).fontSize(13)

          Row({space:4}) {
            Image($r('app.media.weizhi')).width(18).height(18)
            Text('距离1.02km').fontSize(10).fontColor('#5EB761')
          }

          Text('预计3分钟路程').fontSize(10).fontColor('#2EB59F')
        }
        .width('40%')
        .borderRadius(4)
        .backgroundColor('#F5F9F8')
        .padding(8)
        .alignItems(HorizontalAlign.Start)

        Column({ space: 10 }) {
          Text() {
            Span('小贾汽车租赁门店')
          }.fontWeight(FontWeight.Bold).fontSize(13)

          Row({space:4}) {
            Image($r('app.media.weizhi')).width(18).height(18)
            Text('距离5km').fontSize(10).fontColor('#5EB761')
          }

          Text('预计23分钟路程').fontSize(10).fontColor('#2EB59F')
        }
        .width('40%')
        .borderRadius(4)
        .backgroundColor('#F5F9F8')
        .padding(8)
        .alignItems(HorizontalAlign.Start)
      }
      Row({ space: 20 }) {
        Column({ space: 10 }) {
          Text() {
            Span('小明汽车租赁门店')
          }.fontWeight(FontWeight.Bold).fontSize(13)

          Row({space:4}) {
            Image($r('app.media.weizhi')).width(18).height(18)
            Text('距离1.02km').fontSize(10).fontColor('#5EB761')
          }

          Text('预计3分钟路程').fontSize(10).fontColor('#2EB59F')
        }
        .width('40%')
        .borderRadius(4)
        .backgroundColor('#F5F9F8')
        .padding(8)
        .alignItems(HorizontalAlign.Start)

        Column({ space: 10 }) {
          Text() {
            Span('小朱汽车租赁门店')
          }.fontWeight(FontWeight.Bold).fontSize(13)

          Row({space:4}) {
            Image($r('app.media.weizhi')).width(18).height(18)
            Text('距离5km').fontSize(10).fontColor('#5EB761')
          }

          Text('预计23分钟路程').fontSize(10).fontColor('#2EB59F')
        }
        .width('40%')
        .borderRadius(4)
        .backgroundColor('#F5F9F8')
        .padding(8)
        .alignItems(HorizontalAlign.Start)
      }
      Button($r('app.string.EntryAbility_label'))
        .fontColor(Color.White)
        .height(40)
        .backgroundColor('#5EB761')
        .width(200)
        .onClick(() => {
          promptAction.showToast({
            message: '今日机器出现故障，请找工作室人员解决'
          });
        })


      Row() {
        Text('我的服务')
          .fontSize(18)
          .fontColor(Color.Black)

        Text('查看更多 >')
          .fontSize(15)
          .fontColor(Color.Black)
      }.justifyContent(FlexAlign.SpaceBetween).width('100%').padding(10).onClick(() => {
      })

      Column() {
        Row() {
          this.msgRelated($r('app.media.j1'), '我的优惠', () => {

          })
          this.msgRelated($r('app.media.j3'), '邀请有奖', () => {

          })
          this.msgRelated($r('app.media.j4'), '收藏/看过', () => {

          })

        }
        .width('95%')
        .height(80)
        .margin({
          top: 10,
          left: 12,
          right: 12
        })
        .backgroundColor(Color.White)
        .justifyContent(FlexAlign.SpaceAround)

      }
      .width('95%')
      .height(80)
      .margin({
        top: 10,
        bottom: 4,
        left: 12,
        right: 12
      })
      .borderRadius(10)
      .borderWidth(1)
      .borderColor('#35B6BD')
      .backgroundColor(Color.White)
      .justifyContent(FlexAlign.SpaceAround)




    }
    .width($r('app.string.address_exchange_content_size'))
    .height(178)
    .margin($r('app.string.ohos_id_card_margin_start'))
  }

  //消息相关
  @Builder
  msgRelated(src: Resource, title: string, onClick?: () => void) {
    Column() {
      Image(src).width(24)
      Text(title).fontSize(11).fontColor('#222222').margin({ top: 8 })
    }.onClick(() => {
      onClick?.()
    })

  }

}

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

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

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

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

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2266581.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Android Studio超级详细讲解下载、安装配置教程（建议收藏）

Android Studio超级详细讲解下载、安装配置教程（建议收藏）

博主介绍&#xff1a;✌专注于前后端、机器学习、人工智能应用领域开发的优质创作者、秉着互联网精神开源贡献精神&#xff0c;答疑解惑、坚持优质作品共享。本人是掘金/腾讯云/阿里云等平台优质作者、擅长前后端项目开发和毕业项目实战&#xff0c;深受全网粉丝喜爱与支持✌有…
阅读更多...
从安全角度看 SEH 和 VEH

从安全角度看 SEH 和 VEH

从安全角度看 SEH 和 VEH 异常处理程序是处理程序中不可预见的错误的基本方法之一 https://learn.microsoft.com/en-us/dotnet/csharp/fundamentals/exceptions/ SEH——结构化异常处理程序 就其工作方式而言&#xff0c;异常处理程序与其他处理程序相比相当基础&#xff0…
阅读更多...
运行Zr.Admin项目（前端）

运行Zr.Admin项目（前端）

1.确认环境信息 我这里装的是node16.17版本的 官网16版本的最新为v16.20.2&#xff0c;下载链接https://nodejs.org/dist/v16.20.2/node-v16.20.2-x64.msi 2.去掉ssl 进入到Zr.Admin项目根目录&#xff0c;进入到ZR.vue 打开package.json 文件&#xff0c;删除启动命令配置中…
阅读更多...
uniapp登录

uniapp登录

第一步整登录 先整个appid APPID和APPSecret https://developers.weixin.qq.com/community/develop/article/doc/000ca4601b8f70e379febac985b413 一个账号只能整一个小程序 正确流程 调用uni.login https://juejin.cn/post/7126553599445827621 https://www.jb51.net/a…
阅读更多...
esp32学习：用虫洞ESP32S3-EYE开发板快速实现USB摄像头（UVC免驱）

esp32学习：用虫洞ESP32S3-EYE开发板快速实现USB摄像头（UVC免驱）

直接上干货&#xff1a;实现一个USB摄像头&#xff0c;免驱UVC设备。 硬件准备&#xff1a; 乐官方推荐的Cam开发板就是乐鑫带摄像头OV2604的esp32-s3-eye&#xff0c;我们虫洞esp32-s3-eye完全兼容这个板子哦&#xff0c;虫洞ESP32-S3-EYE 人脸识别 esp-cam升级 OpenCV LVGL …
阅读更多...
CMake 构建项目并整理头文件和库文件

CMake 构建项目并整理头文件和库文件

本文将介绍如何使用 CMake 构建项目、编译生成库文件&#xff0c;并将头文件和库文件整理到统一的目录中以便在其他项目中使用。 1. 项目结构 假设我们正在构建一个名为 rttr 的开源库&#xff0c;初始的项目结构如下&#xff1a; D:\WorkCode\Demo\rttr-master\|- src\ …
阅读更多...
磁盘结构、访问时间、调度算法

磁盘结构、访问时间、调度算法

目录 一、什么是磁盘&#xff1f; 二、磁盘分类 1、从磁头分 2、通过盘面分 三、一次磁盘读/写的时间 四、磁盘调度算法 1、先来先到服务算法FCFS 2、最短寻找时间优先SSTF 3、扫描算法&#xff08;SCAN&#xff09; 4、LOOk算法 5、循环扫描算法&#xff08;C-SCAN…
阅读更多...
重生之我在异世界学编程之C语言：深入预处理篇（上）

重生之我在异世界学编程之C语言：深入预处理篇（上）

大家好&#xff0c;这里是小编的博客频道 小编的博客&#xff1a;就爱学编程 很高兴在CSDN这个大家庭与大家相识&#xff0c;希望能在这里与大家共同进步&#xff0c;共同收获更好的自己&#xff01;&#xff01;&#xff01; 本文目录 引言正文一、预处理的作用与流程&#xf…
阅读更多...
Github——网页版上传文件夹

Github——网页版上传文件夹

第一步&#xff1a;创建一个新的仓库或进入已存在的仓库页面 第二步&#xff1a;点进对应的文件夹下&#xff0c;然后 点击 “Upload files” 第三步&#xff1a;将文件夹拖拽到上传区域 打开资源管理器&#xff0c;将要上传的文件夹从计算机中拖拽到上传区域。 注意&#xf…
阅读更多...
LeetCode - Google 校招100题 第6天 回溯法(Backtracking) (8题)

LeetCode - Google 校招100题 第6天 回溯法(Backtracking) (8题)

欢迎关注我的CSDN：https://spike.blog.csdn.net/ 本文地址：https://spike.blog.csdn.net/article/details/144743505 LeetCode 合计最常见的 112 题： 校招100题 第1天 链表(List) (19题)校招100题 第2天 树(Tree) (21题)校招100题 第3天 动态规划(DP) (20题)
阅读更多...
flask后端开发（2）：URL与视图

flask后端开发（2）：URL与视图

目录 URL定义request获取请求参数 gitcode地址&#xff1a; https://gitcode.com/qq_43920838/flask_project.git URL定义 from flask import FlaskappFlask(__name__)app.route(/) def hello_world():return Hello World!app.route(/profile) def profile():return 我是个人…
阅读更多...
＜数据集＞风力发电机损伤识别数据集＜目标检测＞

＜数据集＞风力发电机损伤识别数据集＜目标检测＞

数据集下载链接 &#xff1c;数据集&#xff1e;风力发电机损伤识别数据集&#xff1c;目标检测&#xff1e;https://download.csdn.net/download/qq_53332949/90187097数据集格式&#xff1a;VOCYOLO格式 图片数量&#xff1a;2527张 标注数量(xml文件个数)&#xff1a;252…
阅读更多...
【工具推荐】MobaXterm远程终端管理工具最全攻略，涉及下载、安装、字体配置、中文汉化版、中文显示乱码和中文输入乱码、adb tab无效无法补全、Telnet/ssh使用说明、使用技巧等保姆级教程

【工具推荐】MobaXterm远程终端管理工具最全攻略，涉及下载、安装、字体配置、中文汉化版、中文显示乱码和中文输入乱码、adb tab无效无法补全、Telnet/ssh使用说明、使用技巧等保姆级教程

MobaXterm远程终端管理工具史上最全攻略&#xff0c;涉及下载、安装、字体等配置、解决中文乱码、Telnet/ssh/Serial使用教程、高级功能使用技巧等。MobaXterm 是一个增强型的 Windows 终端。其为 Windows 桌面提供所有重要的远程网络终端工具&#xff08;如 SSH、X11、RDP、VN…
阅读更多...
19、鸿蒙学习——配置HDC命令 环境变量

19、鸿蒙学习——配置HDC命令 环境变量

一、下载Command Line Tools 可参考上篇《鸿蒙学习——配置OHPM、hvigor环境变量》 二、配置hdc环境变量 hdc命令行工具用于HarmonyOS应用/元服务调试所需的工具&#xff0c;该工具存放在命令行工具自带的sdk下的toolchains目录中。为方便使用hdc命令行工具&#xff0c;请将…
阅读更多...
Go语言及MongoDB数据库安装配置详解！

Go语言及MongoDB数据库安装配置详解！

Go语言安装 首先讲一下go语言的安装&#xff0c;这部分可直接从官网下载&#xff0c;基本上一键配置的&#xff1a; 官网地址&#xff1a;All releases - The Go Programming Language 选择自己对应系统的安装包&#xff0c;这里官网提供了5种不同的包可自行下载 之后便是默认…
阅读更多...
Linux配置ODBC连接Mysql

Linux配置ODBC连接Mysql

1、安装mysql 2、安装unixodbc odbcinst -j 查询unixodbc版本以及配置文件路径 3、安装mysql-connector-odbc ####下载 wget https://cdn.mysql.com/archives/mysql-connector-odbc-9.0/mysql-connector-odbc-9.0.0-1.el7.x86_64.rpm ####安装 rpm -ivh mysql-connector-od…
阅读更多...
芯片Tapeout power signoff 之IR Drop Redhawk Ploc文件格式及其意义

芯片Tapeout power signoff 之IR Drop Redhawk Ploc文件格式及其意义

数字IC后端工程师在芯片流程最后阶段都会使用redhawk或voltus进行设计的IR Drop功耗signoff分析。必须确保静态&#xff0c;动态ir drop都符合signoff标准。 在做redhawk ir drop分析前&#xff0c;我们需要提供一个redhawk ploc供电点坐标。 数字IC设计后端实现前期预防IR D…
阅读更多...
数据仓库工具箱—读书笔记02(Kimball维度建模技术概述03、维度表技术基础)

数据仓库工具箱—读书笔记02(Kimball维度建模技术概述03、维度表技术基础)

Kimball维度建模技术概述 记录一下读《数据仓库工具箱》时的思考&#xff0c;摘录一些书中关于维度建模比较重要的思想与大家分享&#x1f923;&#x1f923;&#x1f923; 第二章前言部分作者提到&#xff1a;技术的介绍应该通过涵盖各种行业的熟悉的用例展开&#xff08;赞同…
阅读更多...
设置首选网络类型以及调用Android框架层的隐藏API

设置首选网络类型以及调用Android框架层的隐藏API

在Android SDK中提供的framework.jar是阉割版本的&#xff0c;比如有些类标记为hide&#xff0c;这些类不会被打包到这个jar中&#xff0c;而有些只是类中的某个方法或或属性被标记为hide&#xff0c;则这些类或属性会被打包到framework.jar&#xff0c;但是我们无法调用&#…
阅读更多...
3D几何建模引擎Parasolid功能解析

3D几何建模引擎Parasolid功能解析

一、什么是Parasolid&#xff1f; Parasolid是由Siemens PLM Software开发的高精度精密几何建模引擎。它全面评估CAD&#xff08;计算机辅助设计&#xff09;、CAM&#xff08;计算机辅助制造&#xff09;、CAE&#xff08;计算机辅助工程&#xff09;、PLM&#xff08;产品生…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023