HarmonyOS开发:下拉刷新库和日志库已适配NEXT版本

前言

在去年的时候,自己开源了多个鸿蒙库,其中一个是日志库,一个是下拉刷新库,感兴趣的同学可以查看下,两篇文章分别是:HarmonyOS开发:封装一个便捷的Log工具类HarmonyOS开发:开源一个刷新加载组件,大家可以直接点击打开。

因为之前是基于Api9进行封装的,在NEXT版本上使用会有不同的错误报出,而且,当时在OpenHarmony三方库中心仓的审核迟迟未通过,所谓的开源使用,只能通过静态共享包的形式使用,十分的不便;最近花了一些时间,把这两个库针对NEXT版本做了更新,于是分享出来,供大家使用。

本篇的文章内容如下:

1、日志库和刷新库开源地址

2、两个库主要做了哪些更改

3、总结

一、日志库和刷新库开源地址

刷新库:

ohpm.openharmony.cn/#/cn/detail...

日志库:

ohpm.openharmony.cn/#/cn/detail...

使用方式上,不再推荐静态包har的方式,推荐以下的远程方式依赖,方便功能的更新:

在工程的oh-package.json5中设置三方包依赖,配置示例如下,依赖后,同步项目即可。

text 复制代码
"dependencies": { 
  "@abner/refresh": "^1.0.1",
  "@abner/log": "^1.0.3"
}

在OpenHarmony三方库中心仓中已经做了大量的使用描述了,这里就不多介绍了,可以点进去,详细查看使用文档。

目前针对性的也把源码开源了出来,如果功能不满足,大家可以对其做针对扩展即可。

二、两个库主要做了哪些更改

1、日志库

日志库,和之前的使用上没有大的区别,仅仅优化了json格式化输出,由于Api的升级,NEXT版本不再支持{}这种形式的传参,其参数类型也不在支持any类型,必须需要显式标注对象字面量的类型。

简单举一个例子:

在之前,我们可以传递一个大括号形式对象,或者参数定义为any。

Typescript 复制代码
error({"name":"AbnerMing"})


static error(message: any, tag?: string) {
  
}

NEXT版本以上的写法就会编译错误,其错误为arkts-no-untyped-obj-literals和arkts-no-any-unknown,也就是,需要显式标注对象字面量的类型和不支持any和unknown类型。

可以修改为以下方式:

Typescript 复制代码
error(Object({"name":"AbnerMing"}))

static error(message: Object, tag?: string) {

}

目前的日志库升级之后,关于json的打印,和以上的案例很类似,目前暂时支持对象,或者转成对象的方式,或者对象转字符串的形式,不再支持原来的大括号形式打印;其它的普通形式打印保持不变。

2、下拉刷新库

优化刷新

之前无论是列表还是网格,如果有头部View,会使得下拉头展示错误,新的版本做了彻底的优化,无论在哪使用,都会很好的展示出来,同样的针对网格布局,在NEXT版本上也做了优化。

瀑布流刷新

新的版本,增加了瀑布流模式的列表的刷新。

代码如下:

TypeScript 复制代码
    StaggeredGridView({
      items: this.array, //数据源
      itemLayout: (item: UnionData, index: number) => this.itemLayout(item, index), //条目布局
      controller: this.controller, //控制器,负责关闭下拉和上拉
      onRefresh: () => {
        //下拉刷新
        this.controller.finishRefresh()
      },
      onLoadMore: () => {
        //上拉加载
        this.controller.finishLoadMore()
      }
    })

相关属性介绍:

属性 类型 概述
columnsTemplate string 展示几列,默认是两列
columnsGap Length 列与列的间距,默认为0
rowsGap Length 行与行的间距
bgColor ResourceColor 整体的背景
sWidth Length 宽度
sHeight Length 高度

三、总结

毕竟能力有限,难免在封装的时候有遗漏或者瑕疵,大家如果在使用的时候遇到问题,都可以进行提出,我看到后会做定期的处理。

相关推荐
2601_949593653 小时前
基础入门 React Native 鸿蒙跨平台开发:模拟智能音响
react native·react.js·harmonyos
xiaoqi9223 小时前
React Native鸿蒙跨平台如何进行狗狗领养中心,实现基于唯一标识的事件透传方式是移动端列表开发的通用规范
javascript·react native·react.js·ecmascript·harmonyos
jin1233224 小时前
React Native鸿蒙跨平台剧本杀组队消息与快捷入口组件,包含消息列表展示、快捷入口管理、快捷操作触发和消息详情预览四大核心功能
javascript·react native·react.js·ecmascript·harmonyos
烬头88215 小时前
React Native鸿蒙跨平台实现二维码联系人APP(QRCodeContactApp)
javascript·react native·react.js·ecmascript·harmonyos
2601_949833395 小时前
flutter_for_openharmony口腔护理app实战+预约管理实现
android·javascript·flutter
xiaoqi9227 小时前
React Native鸿蒙跨平台如何实现分类页面组件通过searchQuery状态变量管理搜索输入,实现了分类的实时过滤功能
javascript·react native·react.js·ecmascript·harmonyos
听麟7 小时前
HarmonyOS 6.0+ 智慧出行导航APP开发实战:离线地图与多设备位置协同落地
华为·wpf·harmonyos
qq_177767378 小时前
React Native鸿蒙跨平台实现应用介绍页,实现了应用信息卡片展示、特色功能网格布局、权限/联系信息陈列、评分展示、模态框详情交互等通用场景
javascript·react native·react.js·ecmascript·交互·harmonyos
2603_949462108 小时前
Flutter for OpenHarmony社团管理App实战:预算管理实现
android·javascript·flutter
jin1233229 小时前
基于React Native鸿蒙跨平台地址管理是许多电商、外卖、物流等应用的重要功能模块,实现了地址的添加、编辑、删除和设置默认等功能
javascript·react native·react.js·ecmascript·harmonyos