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

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

正则表达式
- - ...手机号校验
  - ...邮箱校验
文件
- - 判断文件是否存在
网络下载
- - 下载图片
  - 从沙箱中图片转为Base64格式
  - 从资源文件中读取图片转Base64
组件
- - 输入框
  - - - ...矩形输入框
      - ...输入框堆叠效果（用于登录使用）
  - 文本
  - 按钮
组件工具包
- - ...输入框(矩形)
  - ...登录延时效果
类、接口、枚举工具包
- - 进程间通讯(IPC)
设计模式

正则表达式

…手机号校验

  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)}

文件

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

判断文件是否存在

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

网络下载

导包:
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.Base64Helperlet 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.pngconst fileData = await resourceMgr.getRawFileContent(img_name)// 4. 获取图片的ArrayBufferconst buffer = fileData.buffer;// 5. 创建ImageSource实例const imageSource = image.createImageSource(buffer);// 6. 定义解码参数DecodingOptionslet 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 = 60let id = setInterval(() => {time--this.isEnable = false // 禁用的状态this.message = '重新获取(' + time + ")s"if (time <= 0) {this.isEnable = truethis.message = '重新获取'}}, 1 * 1000)}

文本

按钮

组件工具包

(图片样式+代码) ，结合组件UI进行使用

…输入框(矩形)

在这里插入图片描述

@Preview
@Component// 文本输入框矩形
export default struct TextInputRectangleView {text ?: stringplaceholder?: stringinPutType ?: InputType = InputType.NormalonClickCallBack : (value: string) => void = () => { // 回调函数}width2?: ResourceStr | number = "100%"height2?: ResourceStr | number = 50backgroundColor2?: ResourceColor = "#ddd"borderRadius2 ?: number = 10build() {Row() {TextInput({ placeholder: this.placeholder, text: this.text }).type(this.inPutType).onChange((val: string) => {this.onClickCallBack(val)}).backgroundColor(this.backgroundColor2).placeholderColor(Color.Grey) // 提示信息颜色}.width(this.width2).height(this.height2).backgroundColor(this.backgroundColor2).borderRadius(this.borderRadius2)}
}

…登录延时效果

在这里插入图片描述

  wait() {let time = 60let id = setInterval(() => {time--this.isEnable = false // 禁用的状态this.message = '重新获取(' + time + ")s"if (time <= 0) {this.isEnable = truethis.message = '重新获取'}}, 1 * 1000)}

类、接口、枚举工具包

进程间通讯(IPC)

import commonEventManager from '@ohos.commonEventManager'// Publisher通讯事件类型
enum PublishEventType {APP_PUBLISH = "APP_PUBLISH",CARD_PUBLISH = "CARD_PUBLISH"
}class IPCManagerClass {static publishCount:number = 1// 发布者static publish(eventType:PublishEventType,data:string){// commonEventManager作用：可用于进程间通讯commonEventManager.publish(eventType,{data},(err)=>{if(err){// 失败只发3次if(this.publishCount<=3){this.publish(eventType,data)}else{this.publishCount = 1}}else{this.publishCount = 1}})}// 订阅者static subscribe(eventType:PublishEventType,subscriber,callback:(event:string)=>void){commonEventManager.createSubscriber({ events: [eventType] }, (err, data) => {if (err) {return console.log('common-->', `创建订阅者error ${JSON.stringify(err)}`)}console.log('common-->', `创建订阅者success`)subscriber = dataif (subscriber !== null) {//订阅事件commonEventManager.subscribe(subscriber, (err, data) => {if (err) {return console.error(`logData`, '订阅事件失败')}console.log('common-->',`接受订阅事件:${data.data}`)callback(data.data)})} else {console.error('common-->',`需要创建subscriber`);}})}
}export {IPCManagerClass,PublishEventType}