鸿蒙Harmony应用开发,数据驾驶舱 项目结构搭建

对于一个项目而言,在拿到我们的开发任务后,我们最重要的就是技术的选型。选型定下来了之后我们便开始脚手架的搭建,然后开始撸代码,开搞.

首先我们需要对一些常见依赖库的引入 我们需要再oh-package.json5的dependencies节点下面添加我们所需要的依赖,

  "dependencies": {"@ohos/axios": "^2.1.1","@ohos/protobufjs": "^2.0.0","@ohos/crypto-js": "^2.0.3","@hview/dayjs": "^1.11.11","@wolfx/lodash": "^4.17.21-rc.2","@ibestservices/ibest-ui": "^1.2.0",
//    "@wuyan/hm_chart": "^2.0.2","@abner/banner": "^1.0.2"}

我们添加了前端网络请求框架中比较流行的axios组件以及JavaScript 中著名的工具库lodash。 鸿蒙其实自身的组件已经很丰富了,但是很多组件的UI 效果的配置还是比较麻烦,我们又引入了 ibest-ui框架,这个组件是一套轻量,可定制化主题类似Vant的UI 库,里面有很多UI的效果。关于鸿蒙常见开源库查询使用以及第三方依赖库可查询如下网站:

DevEco Marketplace

OpenHarmony三方库中心仓

接下来我们将对一些常见的utils的封装,引入(copy).

我们对常见的Toast ,Preferences ,Log ,Json 以及Dialog等都做了封装并都放到了我们这个utils包下面。由于我们的项目中用到了RSA加解密这块,翻阅了鸿蒙中自带加解密库可能是语言差异得到的结果与服务端的结果一直不一样。想到在JS中已经有知名的jsencrypt库,由于都是JS语言,我便开始研究如何把开源库移植到鸿蒙上面来。

如何将开源库移植到鸿蒙上面?

其实也很简单,我们只需要将对应的第三方库的代码下载下来 ,把代码中导入库中的模块,按正常使用流程使用即可,上面我们已经将jsencrypt3.3.2.相关代码放到了utils的目录下面。

import JSEncrypt from './jsencrypt/lib';
import { VITE_APP_PUBLIC_KEY } from '../constants/constants';
​
export const createEncryPt = (words) => {// 新建JSEncrypt对象const encryptor = new JSEncrypt()//设置公钥,可以从上面的非对称加密密钥生成网站中得到const publicKey = VITE_APP_PUBLIC_KEY;// 将得到的公钥通过setPbulicKey方法设置到JSEncrypt对象中encryptor.setPublicKey(publicKey)return encodeURIComponent(encryptor.encrypt(words));
}

我们的项目架构采用的是mvvm架构。我们先是定义了BaseViewModle,在基类的ViewModel中定义了StateCallback(我们可以通过StateCallback来设置显示Loading,或者取消Loading),以及ResultCallback(这个的作用是在网络请求中将得到的结果回调给View层,关于网络请求的封装后面将单独介绍)

import useRequestStatus, { LoadStateResult } from '../http/usePolarisRequestStatus'
import { LogUtils } from '../utils/LogUtils'
​
export type StateCallback = (state: string) => void
​
export type ResultCallback<T> = (result: T) => void
​
export class BaseViewModel {private stateCallback?: StateCallback
​observeState(stateCallback: StateCallback) {this.stateCallback = stateCallback}
​dispatchViewState(state: string) {this.stateCallback?.(state)}
​httpRequest(checkResult?: boolean): LoadStateResult {LogUtils.debug('开始httpRequest..网络请求:');return useRequestStatus((state): void => this.dispatchViewState(state), checkResult)}
}

骨架屏Skeleton:

骨架屏的作用是在数据完整加载之前,通过占位图形给用户展示简单的页面布局,不在是一个空白的界面,让用户有更佳的体验。我们在BaseViewModle中介绍了, 里面有一个StateCallback,我们可以在数据加载时候让UI界面使用骨架屏进行占位.

holdContent() {if (this.showSkeleton && this.viewState == ViewStateConstant.VIEW_STATE_LOADING) {CommonSkeleton()} else {Column() {Image(this.convertImage()).width($r('app.float.size_100')).height($r('app.float.size_100'))Text(this.convertValue()).fontSize($r('app.float.size_text_15')).fontColor($r("app.color.color_666")).margin($r('app.float.size_10'))if (this.viewState != ViewStateConstant.VIEW_STATE_LOADING) {Button($r('app.string.press_retry')).width($r('app.float.size_120')).height($r('app.float.size_35')).backgroundColor($r('app.color.color_red')).fontColor($r('app.color.color_fff')).onClick(() => {this.retryCallback?.()})}}}

至此,我们把项目的基础架构已经搭建完成. 接下来我们开始讲 网络请求的封装.

完整项目下载地址

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

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

相关文章

8--SpringBoot原理分析、注解-详解(面试高频提问点)

目录 SpringBootApplication 1.元注解 --->元注解 Target Retention Documented Inherited 2.SpringBootConfiguration Configuration Component Indexed 3.EnableAutoConfiguration&#xff08;自动配置核心注解&#xff09; 4.ComponentScan Conditional Co…

基于PHP的新闻管理系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、SSM项目源码 系统展示 【2025最新】基于phpMySQL的新闻管理系统。…

JavaWeb--纯小白笔记03:servlet入门---动态网页的创建

笔记&#xff1a;index.html在tomcat中为默认的名字&#xff0c;html里面的语法不严谨。改配置文件要小心&#xff0c;不然容易删掉其他 Servlet&#xff1a;服务器端小程序&#xff0c;写动态网页需要用Servlet&#xff0c;普通的java类通过继承HttpServlet&#xff0c;可以响…

【GUI设计】基于Matlab的图像处理GUI系统(1),用matlab实现

博主简介&#xff1a;matlab图像代码项目合作&#xff08;扣扣&#xff1a;3249726188&#xff09; ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 本次案例是基于Matlab的图像处理GUI系统&#xff0c;用matlab实现。 本次内容主要分为两部分&a…

Why is OpenAI image generation Api returning 400 bad request in Unity?

题意&#xff1a;为什么 OpenAI 图像生成 API 在 Unity 中返回 400 Bad Request 错误&#xff1f; 问题背景&#xff1a; Im testing out dynamically generating images using OpenAI API in Unity. Amusingly, I actually generated most of this code from chatGPT. 我正在…

【笔记】第二节 轧制、热处理和焊接工艺

2.2 钢轨的轧制工艺 坯料进厂按标准验收, 然后装加热炉加热, 加热好的钢坯经高压水除鳞后进行轧制。轧出的钢轨经锯切、打印到中央冷床冷却, 然后装缓冷坑进行缓冷。缓冷后的钢轨进行矫直、轨端加工和端头淬火。钢轨入库前逐根进行探伤和外观检查。 钢轨的轧制 #mermaid-svg-…

foreach,for in和for of的区别

forEach 不能使用break return 结束并退出循环 for in 和 for of 可以使用break return&#xff1b; for in 遍历的是数组的索引&#xff08;即键名&#xff09;&#xff0c;而for of遍历的是数组元素值。 for of 遍历的只是数组内的元素&#xff0c;而不包括数组的原型属性…

后端-navicat查找语句(单表与多表)

表格字段设置如图 语句&#xff1a; 1.输出 1.输出name和age列 SELECT name,age from student 1.2.全部输出 select * from student 2.where子语句 1.运算符&#xff1a; 等于 >大于 >大于等于 <小于 <小于等于 ! <>不等于 select * from stude…

JdbcTemplate常用方法一览AG网页参数绑定与数据寻址实操

JdbcTemplate是Spring框架中的一个重要组件&#xff0c;主要用于简化JDBC数据库操作。它提供了许多常用的方法&#xff0c;如查询、插入、更新、删除等。本文将介绍JdbcTemplate的常用方法及其使用方式&#xff0c;以及参数绑定和删除数据的方法。 一、JdbcTemplate常用方法 查…

钉钉与MySQL对接集成获取部门列表2.0打通EXECUTE语句

钉钉与MySQL对接集成获取部门列表2.0打通EXECUTE语句 接入系统&#xff1a;钉钉 钉钉是阿里巴巴集团打造的企业级智能移动办公平台&#xff0c;是数字经济时代的企业组织协同办公和应用开发平台。钉钉将IM即时沟通、钉钉文档、钉闪会、钉盘、Teambition、OA审批、智能人事、钉工…

828华为云征文|华为Flexus云服务器搭建Cloudreve私人网盘

一、华为云 Flexus X 实例&#xff1a;开启高效云服务新篇&#x1f31f; 在云计算的广阔领域中&#xff0c;资源的灵活配置与卓越性能犹如璀璨星辰般闪耀。华为云 Flexus X 实例恰似一颗最为耀眼的新星&#xff0c;将云服务器技术推向了崭新的高度。 华为云 Flexus X 实例基于…

基于SpringBoot+Vue的商城积分系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、SSM项目源码 精品专栏&#xff1a;Java精选实战项目源码、Python精…

我的AI工具箱Tauri版-MicrosoftTTS文本转语音

本教程基于自研的AI工具箱Tauri版进行MicrosoftTTS文本转语音服务。 MicrosoftTTS文本转语音服务 是自研的AI工具箱Tauri版中的一款功能模块&#xff0c;专为实现高效的文本转语音操作而设计。通过集成微软TTS服务&#xff0c;用户可以将大量文本自动转换为自然流畅的语音文件…

物理学基础精解【9】

文章目录 直线与二元一次方程两直线夹角直线方程斜率两点式方程截距式方程将不同形式的直线方程转换为截距方程直线的一般方程直线一般方程的系数有一个或两个为零的直线 参考文献 直线与二元一次方程 两直线夹角 两直线 y 1 k 1 x b 1 , y 2 k 2 x b 2 形成夹角 a 1 和 a…

关于字节 c++

字节的介绍 字节是计算机中最小的存储单位&#xff0c;通常由8个二进制位组成&#xff0c;用来存储一个字符。在C中&#xff0c;字节也是基本数据类型之一&#xff0c;用关键字"byte"来表示。字节主要用于存储一些较小的数据&#xff0c;如整数、字符等。字节的大小…

【Delphi】通过 LiveBindings Designer 链接控件示例

本教程展示了如何使用 LiveBindings Designer 可视化地创建控件之间的 LiveBindings&#xff0c;以便创建只需很少或无需源代码的应用程序。 在本教程中&#xff0c;您将创建一个高清多设备应用程序&#xff0c;该应用程序使用 LiveBindings 绑定多个对象&#xff0c;以更改圆…

python - self 调用父类方法

Python 子类继承父类构造函数说明 | 菜鸟教程如果在子类中需要父类的构造方法就需要显式地调用父类的构造方法&#xff0c;或者不重写父类的构造方法。 子类不重写 __init__&#xff0c;实例化子类时&#xff0c;会自动调用父类定义的 __init__。 实例 [mycode3 typepython] cl…

Linux基础---13三剑客及正则表达式

一.划水阶段 首先我们先来一个三剑客与正则表达式混合使用的简单示例&#xff0c;大致了解是个啥玩意儿。下面我来演示一下如何查询登录失败的ip地址及次数。 1.首先&#xff0c;进入到 /var/log目录下 cd /var/log效果如下 2.最后&#xff0c;输入如下指令即可查看&#xf…

基于协同过滤+python+django+vue的音乐推荐系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、SSM项目源码 系统展示 【2025最新】基于协同过滤pythondjangovue…

Linux使用常见问题指南

普通用户sudo权限问题 我在普通用户Sun下,编写了一个.cc文件,然后用sudo权限安装gcc/g去运行该文件,却提示我如下: 原因 当前的用户没有加入到sudo的配置文件里 #切换到root用户 su #编辑配置文件 vim /etc/sudoers #增加配置, 在打开的配置文件中&#xff0c;找到root ALL(A…