HarmonyOS NEXT開發(fā)利器：BasicLibrary三方庫推薦

大家好，我是 V 哥。你在學(xué)習(xí)HarmonyOS NEXT 開發(fā)嗎，今天 V 哥給你推薦一款超好用的三方庫BasicLibrary，BasicLibrary 是一個(gè)基于 API 11 封裝的基本庫，旨在提升鴻蒙開發(fā)效率。它包含了一些常用的 UI 組件和實(shí)用工具類，未來計(jì)劃將其打造成一個(gè)通用的 UI 組件和基本工具組件庫。

安裝

要安裝 BasicLibrary，可以使用以下命令：

ohpm install @peakmain/library

BasicLibrary 功能有哪些

先來看一下BasicLibrary都提供了哪些功能，一目了然。

案例演示

List 列表

先來看一個(gè) List 列表，支持下拉刷新和加載更多。

1. 導(dǎo)入依賴

import { PkList } from '@peakmain/library/Index'

2. 參數(shù)

3. 看一個(gè)例子

import { NavBar, PkList } from '@peakmain/library/Index'


@Entry
@Component
struct ListPage{
  @State
  arr: String[] = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10']
  @State
  page: number = 1 // 第幾頁
  pageSize: number = 2 //共幾頁


  async getNewData(isRefresh:boolean){
    console.log("執(zhí)行了getNewData..." + isRefresh)
    const tmp = await this.getData(isRefresh)
    if (isRefresh) {
      this.arr = tmp
    } else {
      this.arr.push(...tmp)
    }
  }


  getData(isRefresh:boolean){
    console.log("執(zhí)行了getData..." + isRefresh)
    return new Promise<String[]>((resolve) => {
      let tmp: String[]
      setTimeout(() => {
        if (!isRefresh) {
          this.page++
          tmp = ['new_0', 'new_1', 'new_2', 'new_3', 'new_4', 'new_5']
        } else {
          this.page = 1
          tmp = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10']
        }
        console.log("當(dāng)前頁數(shù)：" + this.page)
        resolve(tmp); // 執(zhí)行完成后調(diào)用 resolve
      }, 2000);
    });
  }


  @Builder
  renderItem(item: object){
    Column(){
      Text('' + item)
        .width('100%')
        .height(100)
        .fontSize(16)
        .textAlign(TextAlign.Center)
        .borderRadius(10)
        .backgroundColor(Color.White)
    }
    .
    margin({
      bottom: 10,
      left: 10, right: 10
    })
      .border({
        width: 0.5,
        color: Color.Red
      })
      .borderRadius(20)
  }


  build(){
    Column()
    {
      NavBar({
        title: "下拉刷新與加載更多"
      })
      PkList({
        dataSource: this.arr,
        finished: this.page >= this.pageSize,
        onRefresh: async () => {
          await this.getNewData(true)
        },
        renderItem: (item) => {
          this.renderItem(item)
        },
        onLoad: async () => {
          await this.getNewData(false)
        }
      }).margin({
        bottom: 20
      })
    }
  }
}

Skeleton骨架屏

用于在內(nèi)容加載過程中展示一組占位圖形。

導(dǎo)入依賴

import {  PkSkeleton } from '@peakmain/library';

參數(shù)

示例代碼

PkSkeleton({
  count: 3,
  showAvatar: this.showAvatar
})

權(quán)限工具類

導(dǎo)入依賴

import PermissionUtils from '@peakmain/library/src/main/ets/utils/PermissionUtils';

創(chuàng)建request對(duì)象

request: PermissionUtils = new PermissionUtils()

檢查是否有權(quán)限 方法如下：

this.request.hasPermissions(權(quán)限數(shù)組)

示例如下

async checkPermission(){
  let result =
    await this.request.checkPermissions(['ohos.permission.LOCATION', "ohos.permission.APPROXIMATELY_LOCATION"])
  if (result) {
    promptAction.showToast({ message: "已授予位置權(quán)限" })
  }
  return result
}

請(qǐng)求權(quán)限

this.request.requestPermission(權(quán)限數(shù)組)

示例如下

 result = await this.request.requestPermission(['ohos.permission.LOCATION', "ohos.permission.APPROXIMATELY_LOCATION"])
if (result) {
  this.sLocation = true
  promptAction.showToast({ message: "已授予位置權(quán)限" })
} else {
  this.sLocation = false
  promptAction.showToast({ message: "已拒絕位置權(quán)限" })
}

打開應(yīng)用權(quán)限設(shè)置頁面

this.request.openPermissionsInSystemSettings()

以上簡單給大家做了個(gè)演示，BasicLibrary 的更多功能，可以詳細(xì)參考文檔哦。

gitee 上獲取 BasicLibrary

在gitee 上搜索 peakmain/BasicLibrary，即可獲取該組件的的全部內(nèi)容。關(guān)注威哥愛編程，一起學(xué)鴻蒙開發(fā)呀。