鸿蒙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?.()
          })
      }
    }
  }

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

完整项目下载地址

相关推荐
Fanmeang1 小时前
OSPF高级特性之FRR
运维·网络·华为·ip·ospf·spf·frr
kumalab1 小时前
HarmonyOS ArkTS卡片堆叠滑动组件实战与原理详解(含源码)
华为·harmonyos
别说我什么都不会2 小时前
【OpenHarmony】鸿蒙开发之xml2jsDemo
harmonyos
HarmonyOS_SDK5 小时前
HarmonyOS免密认证方案 助力应用登录安全升级
harmonyos
zhanshuo7 小时前
鸿蒙操作系统核心特性解析:从分布式架构到高效开发的全景技术图谱
harmonyos
塞尔维亚大汉7 小时前
鸿蒙内核源码分析(编译过程篇) | 简单案例窥视编译全过程
源码·harmonyos
别说我什么都不会7 小时前
【OpenHarmony】鸿蒙开发之ohos_beacon_library
harmonyos
瑶光守护者8 小时前
【卫星通信】超低比特率语音编解码器(ULBC)的信道特性评估
深度学习·华为·卫星通信·3gpp·ulbc
不凡的凡13 小时前
鸿蒙图片相似性对比
华为·harmonyos
Georgewu15 小时前
【HarmonyOS】HAR和HSP循环依赖和依赖传递问题详解
harmonyos