鸿蒙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.xdnf.cn/news/1538391.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

leetcode:最高乘法得分

用auto可以过 class Solution { public:long long maxScore(vector<int>& a, vector<int>& b) {int n b.size();vector<vector<long long>> memo(4,vector<long long>(b.size(), LLONG_MIN));auto dfs [&](auto&& dfs, i…

Qt安卓开发连接手机调试(红米K60为例)

1.前置条件 本人默认您已经完成Qt安卓环境的配置&#xff0c;若还没配置请参考链接文章&#xff1a;【Qt】最详细教程&#xff0c;如何从零配置Qt Android安卓环境_qt_七夕先生-开放原子开发者工作坊。准备一台目前主流在用的手机&#xff0c;其实自己用的就行(只要你不是某些…

LeetCode-137. 只出现一次的数字 II【位运算 数组】

LeetCode-137. 只出现一次的数字 II【位运算 数组】 题目描述&#xff1a;解题思路一&#xff1a;解题思路二&#xff1a;符号位一起判断。背诵版解题思路三&#xff1a;0 题目描述&#xff1a; 给你一个整数数组 nums &#xff0c;除某个元素仅出现 一次 外&#xff0c;其余每…

CentOS7.9环境上NFS搭建及使用

Linux环境NFS搭建及使用 1. 服务器规划2. NFS服务器配置2.1 主机名设置2.2 nfs安装2.2.1 repo文件替换2.2.2 NFS服务安装 2.3 nfs配置2.4 服务查看2.5 资源发布2.6 配置nfs服务开机自启2.7 端口开放 3.应用服务器配置3.1 主机名设置3.2 nfs安装3.2.1 repo文件替换3.2.2 NFS服务…

XML映射器-高级查询结果映射

01-高级查询结果映射 emp表 dept表 02-多表关联查询映射 多对一映射 项目中Emp类的数据 项目中dept类的数据 想要多表查询需要建个公共类里面写入两个表中的属性,如下面方法 type里要写用到的类型,由于继承Emp所有Emp里面的属性直接写,column是写数据库的别字,property是写字…

WSL中使用AMBER GPU串行版

前提是已经安装过wsl 1 在 WSL 2 中启用 NVIDIA CUDA 参考在 WSL 2 上启用 NVIDIA CUDA | Microsoft Learn 注意&#xff1a;勿在 WSL 中安装任何 Linux 显示驱动程序。Windows 显示驱动程序将同时安装本机 Windows 和 WSL 支持的常规驱动程序组件。 2 在WSL2中配置Cuda 不安…

SEO之页面优化(一-页面标题2)

初创企业搭建网站的朋友看1号文章&#xff1b;想学习云计算&#xff0c;怎么入门看2号文章谢谢支持&#xff1a; 1、我给不会敲代码又想搭建网站的人建议 2、“新手上云”能够为你开启探索云世界的第一步 博客&#xff1a;阿幸SEO~探索搜索排名之道 &#xff08;接上一篇。。…

Fiddler抓包工具实战

文章目录 &#x1f7e2; Fiddler入门到精通&#x1f449;主要功能&#x1f449;使用场景 &#x1f7e2; 一、Fiddler抓包和F12抓包对比&#x1f7e2; 二、Fiddler的核心功能&#x1f7e2; 三、Fiddler的工作原理&#x1f7e2; 四、Fiddler功能配置使用&#x1f449;规则设置&am…

信息学奥赛报考指南

近年来&#xff0c;信息学奥林匹克竞赛&#xff08;NOI&#xff09;越来越受到家长和学生的重视。这项竞赛不仅能培养孩子的编程与算法思维&#xff0c;还为优秀的选手提供了进入国内顶尖大学的保送资格&#xff0c;并有机会参加国际级赛事。因此&#xff0c;许多家长都希望了解…

Microsoft Office LTSC 2024 离线安装ISO镜像

微软近日正式发布了 Microsoft Office 2024 LTSC&#xff08;长期服务版本&#xff09;&#xff0c;为那些不适用订阅模式的企业提供了最新的 Office 版本。LTSC 版本专为需要稳定、长期支持的用户设计&#xff0c;适合需要长期部署在特定硬件环境中的企业或组织。 ​从Office …

2024年【四川省安全员B证】新版试题及四川省安全员B证考试试卷

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 四川省安全员B证新版试题参考答案及四川省安全员B证考试试题解析是安全生产模拟考试一点通题库老师及四川省安全员B证操作证已考过的学员汇总&#xff0c;相对有效帮助四川省安全员B证考试试卷学员顺利通过考试。 1、…

9.18日常记录

一.信号和槽机制 信号和槽:是对象之间通信的一种机制 信号classA不关心有多少槽函数与之绑定&#xff0c;它只管触发信号&#xff0c;具体要触发哪些槽函数&#xff0c;是由Qt的信号和槽机制来实现的。这样的话就充分的体现了面向对象的解耦原则了&#xff0c;因为对于classA来…

CSS概览

概述 是什么 cascading style css 层叠样式表 由W3C制定的网页元素定义规则 为什么 美化 怎么办 设置样式 布局 css 引入 内部样式表 在head标签内部使用style标签 <html><head><style>.id{width: 400px;height: 400px;border: 1px solid black;ma…

Revit API:Element 的分类

前言 Revit的继承体系以Element作为作为最上层的元素&#xff0c;在这个体系里面&#xff0c;所有的构件都是从 Element 派生出来的。我们可以把这个派生的关系本身当作一个分类方式&#xff0c;但这种方式分的类别太多了&#xff0c;不一定可以记住。参考&#xff1a;Revit A…

【QML 基础】QML ——描述性脚本语言,用于用户界面的编写

文章目录 1. QML 定义 1. QML 定义 &#x1f427; QML全称为Qt Meta-Object Language&#xff0c;QML是一种描述性的脚本语言&#xff0c;文件格式以.qml结尾。支持javascript形式的编程控制。QML是Qt推出的Qt Quick技术当中的一部分&#xff0c;Qt Quick是 Qt5中用户界面的涵…

研1日记14

1.动态卷积&#xff1a;所得卷积核与输入相关&#xff0c;参考博文&#xff1a;动态卷积之CondConv和DynamicConv-CSDN博客 针对不同的频段&#xff0c;学习注意力权重&#xff0c; 深度学习中组卷积(Group convolution)、深度卷积(Depthwise Convolution)以及深度可分离卷积…

解密.bixi、.baxia勒索病毒:如何安全恢复被加密数据

导言 在数字化时代&#xff0c;数据安全已成为个人和企业面临的重大挑战之一。随着网络攻击手段的不断演进&#xff0c;勒索病毒的出现尤为引人关注。其中&#xff0c;.bixi、.baxia勒索病毒是一种新型的恶意软件&#xff0c;它通过加密用户的重要文件&#xff0c;迫使受害者支…

LinuxC高级作业1

1.已知网址www.hqyj.com截取出网址的每一个部分 2.整理思维导图 3.将配置桥接网络的过程整理成文档 i)) 保证虚拟机提供了桥接模式 菜单栏中 ----> 虚拟机 -----> 设置 -----> 网络适配器 ii) 保证虚拟机可以设置桥接网络 菜单栏中 ----> 编辑 -----> 虚拟网…

力扣674-最长连续递增序列(Java详细题解)

题目链接&#xff1a;674. 最长连续递增序列 - 力扣&#xff08;LeetCode&#xff09; 前情提要&#xff1a; 因为本人最近都来刷dp类的题目所以该题就默认用dp方法来做。 dp五部曲。 1.确定dp数组和i下标的含义。 2.确定递推公式。 3.dp初始化。 4.确定dp的遍历顺序。 …

算法笔记/USACO Guide GOLD金组DP 3. Paths on Grids

今天学习背包DP&#xff08;Knapsack DP) 是USACO Guide的DP章节中第三点 What is grid DP? -Summary DP problems often involve a 2D grid where paths are analyzed. Movement is restricted to one direction on the x-axis and y-axis, typically starting from one c…