HarmonyOS应用开发(组件库)--组件模块化开发、工具包、设计模式（持续更新）

原创

已于 2025-01-03 11:29:59 修改 · 置顶 · 1.7k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#harmonyos #设计模式 #华为

于 2024-09-22 19:55:21 首次发布

致力于，UI开发拿来即用，提高开发效率

常用网站
常量格式
枚举enum格式
正则表达式
文件
- - ...判断文件是否存在
网络请求
网络下载
组件
组件工具包
成形UI
- - ...聊天界面UI
工具类/接口、枚举工具包、监听、事件中心
设计模式
- - 单例模式
  - 分层架构设计
系统授权/用户授权

常用网站

鸿蒙开发文档
 鸿蒙主题图标库
 第三方中心库
 高德开发文档

常量格式

export  class CommonConstants {
   
   
  // 首选项名称
  static  readonly  PRE_USER:string= "user"
  // 全局应用
  static  readonly  STORE_USER:string= "user"
  // 列表查询行数
  static  readonly  LIST_SIZE:number = 10
}

枚举enum格式

// 数值可以为number、string
export enum Status {
   
   
  Enable=0, //启用
  Disable=1 // 禁用
}

正则表达式

…手机号校验

  isValidPhoneNumber(phoneNumber: string): boolean {
   
   
    const regex = /^(13[0-9]|14[5|7|9]|15[0-3|5-9]|16[2|5|6|7]|17[0-8]|18[0-9]|19[8|9])\d{8}$/;
    return regex.test(phoneNumber)
  }

…邮箱校验

  isValidEmail(email: string): boolean {
   
   
    let regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
    return regEmail.test(email)
  }

…用户名密码校验方式

// 校验账号正则表达式
    if (!(this.user.getAccountName() && /^[A-Za-z][0-9A-Za-z]{5,19}$/.test(this.user.getAccountName()))) {
   
    // 5-19位长度
      showToast("账号错误")
      return
    }
    if (!(this.pass && /^[0-9A-Za-z]{6,20}$/.test(this.pass))) {
   
    // 6-20位密码长度
      showToast('密码错误')
      return
    }
    if (!(this.pass === this.rePass)) {
   
   
      showToast('2次密码不同')
      return
    }
    this.user.setUserPass(this.rePass)

文件

导包: import fs from ‘@ohos.file.fs’;

…判断文件是否存在

 // 判断文件是否存在？
 let imgFile = filesDir + '/myImg.png'; // 路径
 let res = fs.accessSync(imgFile);
 if (res) {
   
   
   //如存在，就删除
   fs.unlinkSync(imgFile);
 }

网络请求

工具包：
见：权限和http/Axios网络请求

网络下载

导包:
import request from ‘@ohos.request’;
import fs from ‘@ohos.file.fs’;

…下载图片

request.downloadFile(getContext(), {
   
   
      url: netFile, filePath: imgFile // 网络路径,本地路径
    }).then((task) => {
   
   
      task.on('complete', function callback() {
   
   
      	let file:fileIo.File;
          file = fs.openSync(imgFile) // 本地路径
        prompt.showToast({
   
   
          message: "文件下载成功：" + imgFile
        })
      })
      task.on('fail', function callBack(err) {
   
   
        prompt.showToast({
   
   
          message: "文件下载失败,err:" + JSON.stringify(err)
        })
      });

…从沙箱中图片转为Base64格式

// 工具包：
// 其中当转为这个后，可能会与原文件有差异，需要修改配置base64ImgStr
// 获取沙箱路径:this.context.__Dir
async toBase64(image_uri: string) {
   
   
  if (image_uri) {
   
   
    let selectImage = fs.openSync(image_uri, fs.OpenMode.READ_WRITE) // openSync() 根据文件file://路径 转文件
    const imageSource = image.createImageSource(selectImage.fd);
    const imagePackerApi: image.ImagePacker = image.createImagePacker();
    let packOpts: image.PackingOption = {
   
    format: 'image/jpeg', quality: 100 };
    let readBuffer = await imagePackerApi.packing(imageSource, packOpts);
    let bufferArr = new Uint8Array(readBuffer)
    let help = new util.Base64Helper
    let base = help.encodeToStringSync(bufferArr)
    let base64ImgStr = 'data:image/png;base64,' + base; // 回显需要有前面的前缀才可以
    return base64ImgStr;
  }
  return '';
}

…从资源文件中读取图片转Base64

 async toBase64StrFromResource(img_name: string) {
   
   
    // 1. 获取图片所对应的PixelMap对象
    let pixelMap: PixelMap = await this.toPixelMapFromResource(img_name); // 自己封装函数,见下
    // 2. 获取pixelMap总字节数
    let pixelBytesNumber: number = pixelMap.getPixelBytesNumber();
    // 3. 创建了一个ImagePacker对象，用于图像编码。(ImagePacker是HarmonyOS中用于将图像（PixelMap格式）编码为不同存档格式的工具)
    const imagePackageApi: image.ImagePacker = image.createImagePacker();
    // 4. 定义了一个PackingOption对象，用于设置图像编码的选项。
    let packOpts: image.PackingOption = {
   
   
      format: 'image/jpeg', //表示编码的图像格式为jpeg格式
      quality: 100, //表示图像质量为最高质量(取值为0~100之间)
    }
    // 5. 将pixelMap对象按照packOpts中设置的选项进行编码。编码的结果被存储在readBuffer中
    const readBuffer = await imagePackageApi.packing(pixelMap, packOpts);
    // 6. 创建了一个Base64Helper对象，用于进行Base64编码和解码操作。
    let base64Helper = new util.Base64Helper();
    // 7. 将readBuffer转换为一个Uint8Array对象（Uint8Array是一种JavaScript内置对象，表示一个8位无符号整数的数组，适合表示二进制数据。）
    let uint8Arr = new Uint8Array(readBuffer);
    // 8. 将uint8Arr中的二进制数据同步地编码为Base64字符串
    let pixelStr = base64Helper.encodeToStringSync(uint8Arr);
    // 9. 加入base64编码协议（用于显示在Image组件中）（以下前缀形成一个可以在Web上直接使用的Data URL。这个Data URL可以被用于在HTML或CSS中嵌入图像数据，而不需要额外的图像文件）
    let base64ImgStr = 'data:image/png;base64,' + pixelStr;
    Log.MyLog("'hmlog-->',base64 str : " + base64ImgStr);
    // 10. 返回编码后并转换为Data URL的Base64字符中
    return base64ImgStr;
  }


  async toPixelMapFromResource(img_name: string) {
   
   
    // 1. 获取stage模型下的Context上下文对象
    const context = getContext(this);
    // 2. 获取ResourceManager资源管理类
    const resourceMgr = context.resourceManager;
    // 3. 获取resource/rawfile/face.png
    const fileData = await resourceMgr.getRawFileContent(img_name)
    // 4. 获取图片的ArrayBuffer
    const buffer = fileData.buffer;
    // 5. 创建ImageSource实例
    const imageSource = image.createImageSource(buffer);
    // 6. 定义解码参数DecodingOptions
    let decodingOptions = {
   
   
      editable: true, // editable设置为true表示图片是可编辑的
      desiredPixelFormat: 3 // desiredPixelFormat设置为3表示解码的像素格式为RGBA_8888
    }
    // 7. 根据解码参数DecodingOptions获取PixelMap图片对象
    const pixelMap = await imageSource.createPixelMap(decodingOptions)
    // 8. 返回PixelMap图片对象
    return pixelMap;
  }

组件

(图片样式+代码) : 封装的组件则放在工具包下，可以使用 CTRL+F进行搜索如： TextInputRectangleView

输入框

…矩形输入框

若有其他变动，可以修改参数即可

在这里插入图片描述

TextInputRectangleView({
   
   
        placeholder: '请输入手机号/邮箱',
        onClickCallBack: (value: string) => {
   
    // 回调函数
          this.name = value
        }
      })

…输入框堆叠效果（用于登录使用）

在这里插入图片描述

Stack({
   
    alignContent: Alignment.End }) {
   
    // 布局
        TextInputRectangleView({
   
   
          placeholder: '请输入验证码',
          inPutType: InputType.Number,
          onClickCallBack: (value: string) => {
   
   
            this.code = value
          }
        })

        Text(this.message)
          .fontColor(Color.Red)
          .padding({
   
    right: 20 })
          .enabled(this.isEnable)
          .opacity(this.isEnable ? 1 : 0.5)
          .onClick(() => {
   
   
          // 点击字体时的业务处理
            this.wait() // 延时
            this.getVaCode() // 校验代码
          })
      }.width("100%")


// 延时函数点击重新获取触发
  wait() {
   
   
    let time = 60
    let id = setInterval(() => {
   
   
      time--
      this.isEnable = false // 禁用的状态
      this.message = '重新获取(' + time + ")s"
      if (time <= 0) {
   
   
        this.isEnable = true
        this.message = '重新获取'
      }
    }
      , 1 * 1000)
  }

文本

…Text公用组件：TextView

@Component
export default  struct TextView {
   
   
  text:ResourceStr|number= ''
  fontColor:ResourceStr|Color = Color.Black
  fontSize:ResourceStr|number = 16
  fontWeight:number | FontWeight | string = FontWeight.Normal
  backgroundColor2:ResourceColor = Color.White
  decoration:TextDecorationType= TextDecorationType.None
  onClickCallBack ?:()=>void=()=>{
   
   } // 设置默认否则会导致，使用组件不调用导致闪退
  build() {
   
   
    Row(){
   
   
      Text(''+this.text)
        .fontColor(this.fontColor)
        .fontSize(this.fontSize)
        .fontWeight(this.fontWeight)
        .decoration({
   
    type: this.decoration})
        .backgroundColor(this.backgroundColor2)
        .onClick(()=>{
   
   
          this.onClickCallBack()
        })
    }
  }
}

使用方式：

例:
TextView({
   
   
          text: "详细信息",
          fontColor: "#ff2a24e5",
          fontSize: 25,
          fontWeight: FontWeight.Bold,
        })

按钮

…Button公用组件：ButtonView

@Component
export  default struct ButtonView {
   
   
  text:ResourceStr
  comWidth:number|string|Resource = "100%"
  comHeight:number|string|Resource = 50
  onClickCallback ?:()=>void=()=>{
   
   } // 回调函数
  type:ButtonType =ButtonType.Capsule // 默认胶囊
  backgroundColor2:ResourceColor = Color.Blue
  isEnabled:boolean = true // 启用
  build() {
   
   
    Column(){
   
   
      Button(this.text,{
   
   type:this.type})
        .width(this.comWidth)
        .height(this.comHeight)
        .onClick(()=>{
   
   
          this.onClickCallback()
        })
        .backgroundColor(this.backgroundColor2)
        .enabled(this.isEnabled)
    }
  }
}

使用方式:

例：
ButtonView({
   
   
                text: "修改",
                comWidth: 50,
                comHeight: 30,
                backgroundColor2: item.getUserType() === UserType.Admin ? Color.Grey : "#ff0f9107",
                type: ButtonType.Normal,
                isEnabled: item.getUserType() === UserType.Admin ? false : true,
                onClickCallback: () => {
   
   
         this.changUserState(Operate.UpdateUser, item)
                }
              })

…单选按钮公用组件：RadioView

import {
   
    Status } from '../entity/User'
@Component
export default struct RadioView {
   
   
  group:string='group'
  text: string
  radiosValue: Array<number>
  radiosStr: Array<string>
  checked: number = -1
  onClickCallBack ?:(value?:number)=>void=()=>{
   
   }
  isEnabled:Status = Status.Enable
  build() {
   
   
    Row({
   
    space: 10 }) {
   
   
      if (this.text) {
   
   
        Text(this.text+':')
      }
      ForEach(this.radiosValue, (item: number, index: number) => {
   
   
        Row(){
   
   
        Radio({
   
    value: item.toString(), group: this.group }) // 枚举值
          .onClick(() => {
   
   
            this.onClickCallBack(item)
          })
          .checked(this.checked == item)
          .enabled(!this.isEnabled) // false: 禁用
        Text(this.radiosStr[index]) // 对应的文本
        }.margin({
   
   right:10})
        .width("80")
      })
    }
  }
}

使用方式：(需要自己定义枚举)

例:
Row() {
   
   
        RadioView(
          {
   
   
            group: 'sex',
            text: '性别',
            isEnabled: Status.Enable,
            radiosValue: [UserSex.Girl, UserSex.Boy],
            radiosStr: ['女', '男'],
            onClickCallBack: (val: number) => {
   
   
              this.user.setUserSex(val