基于鸿蒙HarmonyOS 元服务开发一款公司运营应用(ArkTS API 9)

前言

最近基于Harmony OS最新版本开发了一个作品,本文来详细讲解一下,如何我是如何开发这个作品的。以及如何使用OpenHarmony,基于ArkTS,API 9来开发一个属于自己的元服务。
废话不多说,我的作品名称叫做Company Operate 公司运营,是一个根据会计公式来预测公司未来几个月的资产运营情况。
主要分为三部分,
第一部分:填写公司基本情况表单
第二部分:通过公司计算公司未来几个月的运营情况,使用扇形图,标识公司资金组成部分。
第三部分:使用元服务卡片来显示当前月份的公司资金状况。

具体动态效果图如下:
在这里插入图片描述

卡片展示效果
在这里插入图片描述

使用到的组件有:GaugeForEachTextInputRadioFlexTextRowColumnButton
下面开始讲解开发过程。

开发过程

由于我们要开发的应用是云服务,所有在IDE中创建项目时是按照下图来选择的:
【缺少图片】
在这里插入图片描述

参数解释

  • Compile SDK: 3.1.0 (API 9) 目前最新版本,具有很有优秀的特性
  • Model: Stage 目前有两种模式,Stage是持续迭代稳定的版本
  • Enable Super Visual : disable。是否开始低代码编辑模式
  • Language: ArkTS 当使用最新版本的时的SDK时,只能选择ArkTS开发语言
  • Compatible SDK: 3.1.0(API 9) 兼容SDK版本
  • Devuce type: Phone Tablet 需要支持的设备,手机和平板
    创建项目后,IDE会自动将我们的项目依赖包拉取到本地。

注意在IDE里讲相关版本的SDK及套件下载到本地
在这里插入图片描述

在这里插入图片描述
打开 首页文件, 打开右侧的 预览。
在这里插入图片描述
这样就可以开始愉快地编写了。
这里的预览具有热更新的功能,修改页面后会自动更新页面。

表单设计

由于我们不考虑国家化,所以直接使用表单直接使用中文,
像素单位使用虚拟像素,
虚拟像素(virtual pixel)是一台设备针对应用而言所具有的虚拟尺寸(区别于屏幕硬件本身的像素单位)。它提供了一种灵活的方式来适应不同屏幕密度的显示效果。使用虚拟像素,使元素在不同密度的设备上具有一致的视觉体量。

每行40vp,表单项的lable长度为80vp,输入框为220vp。
每行间隔12vp,这项常量组成了我们表单的盒子模型。
定义表单的数据模型

@State formData: any = {name: '111',currentAssets: null,nonCurrentAssets: null,equityAccount: null,currency: null,unitPrice: null,variableCosts: null,quantity: null,fixedCost: null,month: 6
}

数据模型与输入框绑定起来

TextInput().width(220).height(ROW_HEIGHT).onChange((value: string) => {this.formData.name = value
})

与Counter组件绑定

Counter() { Text(this.formData.month.toString()) }.onInc(() => {this.formData.month++}).onDec(() => {this.formData.month--})

首页的效果图
在这里插入图片描述
不同于网页的Vue应用开发,数据模型与视图并不是双向绑定关系,开发者需要监听每个输入框,单选按钮的修改事件。修改事件的回调函数里给数据模型重新赋值。

组件公共属性,事件介绍,盒子模型

基于ArkTS的组件,都有通用的一些属性,如:width,height,padding,margin。这些通用通用属性就组成了盒子模型 布局的基础。 组件完整的通用属性可以查阅此链接

除了通用属性,所有的组件也有通用事件 如onClick,onTouch,onKeyEvent,onDragStart。
完整通用事件可以查阅此处

结果页

在首页输入公司的运营数据后,点击开始预测,就会进入结果页。从首页跳转到结果页时,会将所有的表单数据传递过去。

router.pushUrl({url:'pages/res', params: {...this.formData}})

在结果页,在onPageShow生命周期中获取从路由传递过的参数

onPageShow() {const params = router.getParams(); // 获取传递过来的参数对象this.formData = params as any // 赋值给数据模型console.log(JSON.stringify(this.formData), '1111')
}

通过计算传过来的值,我们能够得到一系列公司运营的数据。
并最终使用Text组件将其显示到页面上。
值的注意的是
Gauge组件和ForEach的使用。

Gauge组件的使用

Gauge({ value: 75 }).value(25).width(100).height(100).colors([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1]])

colors 属性中填写所要显示的元素,元素的颜色值和0-1的比例。

ForEach 的使用

ForEach(arr: any[], itemGenerator: (item: any, index?: number) => void,keyGenerator?: (item: any, index?: number) => string 
)
  • ForEach必须在容器组件内使用。
  • 生成的子组件应当是允许包含在ForEach父容器组件中的子组件。
  • 允许子组件生成器函数中包含if/else条件渲染,同时也允许ForEach包含在if/else条件渲染语句中。
  • itemGenerator函数的调用顺序不一定和数组中的数据项相同,在开发过程中不要假设
  • itemGenerator和keyGenerator函数是否执行及其执行顺序。例如,以下示例可能无法正确运行:

最终效果图
在这里插入图片描述

遇到的问题

预览无法出现滚动条,没有下来

预览模式下,当内容超过一屏时,无法自动出现滚动条,不知道这是一个特性,还是bug。还是说需要特殊处理才能出现滚动条,比如使用滚动条组件。

缺少折线图

本来我想使用折线图来表现公司资产运营资产趋势,这也是普遍的做法。但是试了很多方法,都不太理想,使用canvas画折线图。缺少交互,标注,或者坐标轴的分割块显示不准确。总之,目前要想使用折线图,是需要一些技术的。或许也可以尝试从svg下手,尝试。

支持 API 9的设备太少

由于本应用使用的是最新版的API 9,要想使用真机模拟。结果 远程设备只有一个支持API 9,并且状态一直是 unavailable, 不可用状态。汗那,总不能为了开发一个应用,买一个Mate 50把。
在这里插入图片描述

总结

总的来讲,在开发云服务应用时,鸿蒙提供的文档还是很全的的,但是由于相对其他的成熟web技术,还是比较新的,所以生态还不算很完善。这也是可以理解的,生态还是要靠全体开发者来支持。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Softmax回归(多类分类模型)

目录 1.对真实值类别编码:2.预测值:3.目标函数要求:4.使用Softmax模型将输出置信度Oi计算转换为输出匹配概率y^i:5.使用交叉熵作为损失函数:6.代码实现: 1.对真实值类别编码: y为真实值&#xf…

统计学假设检验方法简单介绍

统计学的假设检验方法有以下几种: 1. 单样本 t 检验:用于检验一个样本均值是否与给定的理论值相等。 2. 独立样本 t 检验:用于比较两个独立样本的均值是否相等。 3. 配对样本 t 检验:用于比较同一组样本的两个相关变量的均值是…

【闪电侠学netty】第10章 实现客户端与服务端收发消息

【Netty】读书笔记 - 跟闪电侠学 1. 内容概要 1.1 总结 1.1.1 该章节的业务逻辑 客户端登录 -- 服务器 登录成功 -- 开启线程 -- 如果登录成功,将输入内容转换成MessageRequestPacket指令发送服务器登录重连(省略) 服务器 -- 处理 …

Python——VScode安装

⼀、下载安装 [root192 ~]# rpm --import https://packages.microsoft.com/keys/microsoft.asc[root192 ~]# sh -c echo -e "[code]\nnameVisualStudio Code\nbaseurlhttps://packages.microsoft.com/yumrepos/vscode\nenabled1\ngpgcheck1\ngpgkeyhttps://packages.mi…

PXIe‑6378国产替代,16路AI(16位,3.5 MS/s/ch),4路AO,48路DIO,PXI多功能I/O模块

PXIe,16路AI(16位,3.5 MS/s/ch),4路AO,48路DIO,PXI多功能I/O模块 PXIe‑6378是一款同步采样的多功能DAQ设备。 该模块提供了模拟 I/O、数字I/O、四个32位计数器和模拟和数字触发。 板载NI‑STC3…

Odrive 学习系列二:将烧录工具从ST-Link V2修改为JLink

一、背景: 通过观察odrive解压后的内容,可以看到在下面配置文件及makefile文件中的配置设置的均为openOCD + stlink v2,例如makefile中: # This is only a stub for various commands. # Tup is used for the actual compilation.BUILD_DIR = build FIRMWARE = $(BUILD_DI…

PCL ISS关键点提取(C++详细过程版)

边界提取 一、概述二、代码实现三、结果展示PCL ISS关键点提取(C++详细过程版)由CSDN点云侠原创,爬虫自重。如果你不是在点云侠的博客中看到该文章,那么此处便是不要脸的爬虫。 一、概述 ISS关键点提取在PCL里有现成的调用函数,具体算法原理和实现代码见:PCL ISS关键点提…

【软件测试】学习笔记-GUI测试稳定性的关键技术

这篇文章将从实际工程应用的角度,探讨GUI测试的稳定性问题。 GUI自动化测试稳定性,最典型的表现形式就是,同样的测试用例在同样的环境上,时而测试通过,时而测试失败。 这也是影响GUI测试健康发展的一个重要障碍&#x…

基于Xilinx K7-410T的高速DAC之AD9129开发笔记(二)

引言:上一篇文章我们简单介绍了AD9129的基础知识,包括芯片的重要特性,外部接口相关的信号特性等。本篇我们重点介绍下项目中FPGA与AD9129互联的原理图设计,包括LVDS IO接口设计、时钟电路以、供电设计以及PCB设计。 LVDS数据接口设…

openssl3.2 - 官方demo学习 - encode - rsa_encode.c

文章目录 openssl3.2 - 官方demo学习 - encode - rsa_encode.c概述笔记END openssl3.2 - 官方demo学习 - encode - rsa_encode.c 概述 命令行参数 server_priv_key.pem client_priv_key.pem 这2个证书是前面certs目录里面做的 官方这个程序有bug, 给出2个证书, 还要从屏幕上输…

Python - 深夜数据结构与算法之 BloomFilter

目录 一.引言 二.BloomFilter 简介 1.Hash Table 2.Bloom Filter 3.Bloom 示意图 4.Bloom 应用 三.Bloom Filter 实现 1.Python 实现 2.Python 测试 四.总结 一.引言 布隆过滤器 BloomFilter 是位运算在工业级场景应用的典范,其通过 bit 位保存元素是否存…

【Python数据可视化】matplotlib之增加图形内容:设置图例、设置中文标题、设置网格效果

文章传送门 Python 数据可视化matplotlib之绘制常用图形:折线图、柱状图(条形图)、饼图和直方图matplotlib之设置坐标:添加坐标轴名字、设置坐标范围、设置主次刻度、坐标轴文字旋转并标出坐标值matplotlib之增加图形内容&#x…

书生·浦语大模型实战营笔记(四)

Finetune模型微调 直接使用现成的大语言模型,在某些场景下效果不好,需要根据具体场景进行微调 增量预训练:投喂垂类领域知识 陈述形式,无问答,即只有assistant 指令跟随:system-user-assistant XTuner …

springboot集成kafka消费数据

springboot集成kafka消费数据 文章目录 springboot集成kafka消费数据1.引入pom依赖2.添加配置文件2.1.添加KafkaConsumerConfig.java2.2.添加KafkaIotCustomProperties.java2.3.添加application.yml配置 3.消费者代码 1.引入pom依赖 <dependency><groupId>org.spri…

yolov7混淆矩阵

测试部分代码 import argparse import json import os from pathlib import Path from threading import Threadimport numpy as np import torch import yaml from tqdm import tqdmfrom models.experimental import attempt_load from utils.datasets import create_dataload…

10.Spring Type Convertion 原理

目录 概述Spring Type Convertion总结Spring MVC层的数据转换debug 关键断点测试代码关键处调试字符串Long结束概述 此篇文章对 Spring Type Convertion 做深入学习。 两个源码调试例子,一个是转换成 String ,一个转换成 Long 环境:spring boot 2.6.13 相关文章如下: 文章…

嵌入式培训机构四个月实训课程笔记(完整版)-C++和QT编程第二天-类与对象(物联技术666)

链接:https://pan.baidu.com/s/1Am83Ut449WCbuTiodwJWgg?pwd=1688 提取码:1688 上午:类和对象 下午:类和对象高级应用 教学内容: 1、构造函数\析构函数\拷贝构造函数 构造函数: 每一个对象的创建都必须初始化,如果在没有写初始化函数(即构造函数),系统会默认写…

OpenCV——八邻域断点检测

目录 一、理论基础1、八邻域2、断点检测 二、代码实现三、结果展示四、参考链接 OpenCV——八邻域断点检测由CSDN点云侠原创&#xff0c;爬虫自重。如果你不是在点云侠的博客中看到该文章&#xff0c;那么此处便是不要脸的爬虫。 一、理论基础 1、八邻域 图1 八邻域示意图 图…

基于嵌入式AI的ROI区域视频传输系统设计与实现

在当今快速发展的智能监控领域&#xff0c;实现高效的视频流处理和传输成为了一项重要挑战。本文介绍了一个基于嵌入式AI平台的视频传输系统设计&#xff0c;该系统能够识别视频中的关键区域&#xff08;ROI&#xff09;&#xff0c;并对这些区域进行高效的编码处理。特别地&am…

Python数据的处理

一.字符串拼接的几种方式 使用str.join()方法进行拼接字符串直接拼接使用格式化字符串进行拼接 ​ s1hello s2world #(1)使用➕进行拼接 print(s1s2) #(2)使用字符串的join&#xff08;&#xff09;方式 print(.join([s1,s2])) print(*.join([s1,s2])) print(你好.join([s1,s…