基于鸿蒙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技术,还是比较新的,所以生态还不算很完善。这也是可以理解的,生态还是要靠全体开发者来支持。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Spring Boot 中实现文件上传、下载、删除功能

🏆作者简介,普修罗双战士,一直追求不断学习和成长,在技术的道路上持续探索和实践。 🏆多年互联网行业从业经验,历任核心研发工程师,项目技术负责人。 🎉欢迎 👍点赞✍评论…

【RPC】序列化:对象怎么在网络中传输?

今天来聊下RPC框架中的序列化。在不同的场景下合理地选择序列化方式,对提升RPC框架整体的稳定性和性能是至关重要的。 一、为什么需要序列化? 首先,我们得知道什么是序列化与反序列化。 网络传输的数据必须是二进制数据,但调用…

Jenkins-Maven Git

整合Maven 安装GIT #更新yum sudo yum update #安装git yum install git 安装Maven插件,在插件管理中心: 配置仓库 配置密码认证 我们可以在这个目录下看到Jenkins 帮我们拉取了代码 /env/liyong/data/docker/jenkins_mount/workspace/maven-job 配置maven打包…

江科大STM32 下

目录 ADC数模转换器DMA直接存储器存取USART串口9-2 串口发送接受9-3 串口收发HEX数据包 I2CSPI协议10.1 SPI简介W25Q64简介10.3 SPI软件读写W25Q6410.4 SPI硬件读写W25Q64 BKP、RTC11.0 Unix时间戳11.1 读写备份寄存器BKP11.2 RTC实时时钟 十二、PWR12.1 PWR简介12.2 修改主频1…

Scratch优秀作品飞翔小鸟

程序说明:在无尽的划痕堆中飞驰而过随着你越来越多地飞进迷宫般的街区,平台变得越来越难。 演示视频 scratch飞翔小鸟 其实这就是一个类似像素小鸟的程序,只不过水管角色就地取材,使用scratch里面的积木图片拼成了水管&#xff0…

爬虫案例—抓取豆瓣电影的电影名称、评分、简介、评价人数

爬虫案例—抓取豆瓣电影的电影名称、评分、简介、评价人数 豆瓣电影网址:https://movie.douban.com/top250 主页截图和要抓取的内容如下图: 分析: 第一页的网址:https://movie.douban.com/top250?start0&filter 第二页的…

文献阅读:Large Language Models as Optimizers

文献阅读:Large Language Models as Optimizers 1. 文章简介2. 方法介绍 1. OPRO框架说明2. Demo验证 1. 线性回归问题2. 旅行推销员问题(TSP问题) 3. Prompt Optimizer 3. 实验考察 & 结论 1. 实验设置2. 基础实验结果 1. GSM8K2. BBH3.…

linux建立基本网站

网站需求: 1.基于域名[www.openlab.com]可以访问网站内容为 welcome to openlab!!! 2.给该公司创建三个子界面分别显示学生信息,教学资料和缴费网站,基于[www.openlab.com/student] 网站访问学生信息 [www.openlab.com/data]网站访问教学资…

微机原理常考填空以及注意事项

以下: 1,两条高位地址线未参加地址译码,则对应的地址范围它的容量是多少倍? 答:公式CPU的地址线(假设16位)(它的低位地址线一般进入片内A0~A10,高位A11就是A、A12就是B、…

微信小程序(一)简单的结构及样式演示

注释很详细&#xff0c;直接上代码 涉及内容&#xff1a; view和text标签的使用类的使用flex布局水平方向上均匀分布子元素垂直居中对齐子元素字体大小文字颜色底部边框的宽和颜色 源码&#xff1a; index.wxml <view class"navs"><text class"active…

任务7:安装MySQL数据库

任务描述 知识点&#xff1a; MySQL数据库安装与使用 重 点&#xff1a; 基于CentOS系统&#xff0c;安装MySQL数据库 内 容&#xff1a; 安装MySQL数据库修改root用户密码 任务指导 MySQL是一个关系型数据库管理系统&#xff0c;由瑞典MySQL AB 公司开发&#xff0c…

【汽车销售数据】2015~2023年各厂商各车型的探索 数据分析可视化

数据处理的思路&#xff1a; 1 各表使用情况&#xff1a; 汽车分厂商每月销售表&#xff0c;该表主要分析展示top10销量的厂商销量、占比变化情况&#xff08;柱形图、饼图&#xff09;&#xff1b;中国汽车分车型每月销售量表&#xff0c;该表主要分析展示top20销量的车型销…

UML-顺序图

提示&#xff1a;用例图从参与者的角度出发&#xff0c;描述了系统的需求&#xff08;用例图&#xff09;&#xff1b;静态图定义系统中的类和对象间的静态关系&#xff08;类图、对象图和包图&#xff09;&#xff1b;状态机模型描述系统元素的行为和状态变化流程&#xff08;…

计算机体系结构基础复习

1. 计算机系统可划分为哪几个层次,各层次之间的界面是什么? 你认为这样划分层次的意义何在? 答&#xff1a; 计算机系统可划分为四个层次&#xff0c;分别是&#xff1a;应用程序、 操作系统、 硬件系统、 晶体管四个大的层次。 注意把这四个层次联系起来的三个界面。各层次…

css 怎么绘制一个带圆角的渐变色的边框

1&#xff0c;可以写两个样式最外面的div设置一个渐变的背景色。里面的元素使用纯色。但是宽高要比外面元素的小。可以利用里面的元素设置padding这样挡住部分渐变色。漏出来的渐变色就像边框一样。 <div class"cover-wrapper"> <div class"item-cover…

春节回家前,请一定给你的电脑装上KKView远程控制软件

马上春节了&#xff0c;电脑不能带回家&#xff0c;有时候要处理点意外的事情&#xff0c;怎么办&#xff1f;只要走之前&#xff0c;给你电脑装上KKView远程控制软件&#xff0c;就可以随时随地用手机或电脑控制你的工作电脑&#xff0c;远程办公、传文件、看摄像头都没问题。…

人脸识别为何老是不过?是什么原因导致的?

人脸识别可能无法通过的原因有很多&#xff0c;以下是可能的一些原因&#xff1a; 1. 非常规面部表情&#xff1a;如果你做出了与常规面部表情不同的表情&#xff0c;如张大嘴巴或瞪大眼睛等&#xff0c;可能会干扰人脸识别系统的准确性。 2. 光线条件&#xff1a;人脸识别系统…

30 3D导航栏

效果演示 实现了一个导航栏&#xff0c;其中包含了五个图标&#xff0c;每个图标都有一个悬浮的文字标签&#xff0c;当鼠标悬停在图标上时&#xff0c;文字标签会旋转并向上移动&#xff0c;同时底部会出现一个阴影效果。整个导航栏的背景颜色为浅灰色。 Code <ul><…

js(JavaScript)数据结构之堆(Heap)

什么是数据结构&#xff1f; 下面是维基百科的解释&#xff1a; 数据结构是计算机存储、组织数据的方式。数据结构意味着接口或封装&#xff1a;一个数据结构可被视为两个函数之间的接口&#xff0c;或者是由数据类型联合组成的存储内容的访问方法封装。 我们每天的编码中都会…

docker安装部署Elasticsearch(ES)以及相关配置

Elasticsearch简介 mysql用作持久化存储&#xff0c;ES用作检索 基本概念&#xff1a;index库>type表>document文档 index索引&#xff08;相当于MySQL的数据库&#xff09; 动词&#xff1a;相当于mysql的insert 名词&#xff1a;相当于mysql的db Type类型&#xff…