DEV Community: RogueYBJ

Harmony-Free WeChat Open Platform (WeChat Official Account Platform)

RogueYBJ — Tue, 24 Jun 2025 09:16:59 +0000

Hello, dear students! Good morning!
Today, we are going to talk about the third-party libraries of the WeChat Open Platform.
I believe that many of you have encountered various problems during the development process.
Today, I will help you all clear up the problems with the WeChat third-party platform SDK.

一、First, according to the requirements of the WeChat Open Platform, create the configuration for your own HarmonyOS application.

二、Secondly, when using the SDK of third-party platforms, we must first import the third-party libraries.

1、The method of introducing third-party libraries in WeChat

ohpm install @tencent/wechat_open_sdk

2、Check if WeChat is installed, and then add the following declaration in module.json5 "weixin""wxopensdk"

3、Configuration and the action agreed upon with WeChat: wxentity.action.open

三、Implement the related functions of WeChat

1、Initialization (requires WeChat app ID)

// WeChat ID 
private wxId: string = "wxXXXXXXXXXappid";
// Instantiate the WeChat object 
private wx: WXApi = WXAPIFactory.createWXAPI(this.wxId)
// Application Context
private context: common.UIAbilityContext = getContext() as common.UIAbilityContext;

2、WeChat message monitoring

// Initialization 
this.wx.handleWant(appWant, WXShareEventHandler)
// Register the Resp event WXShareEventHandler.registerOnWXRespCallback(handler.onResp)
// Cancel Resp event WXShareEventHandler.unregisterOnWXRespCallback(handler.onResp)
// Registration Request Event WXShareEventHandler.registerOnWXReqCallback(handler.onReq)
// Logout Req event
WXShareEventHandler.unregisterOnWXReqCallback(handler.onReq)

Add the listening code file

import { BaseReq, BaseResp, Log, WXApiEventHandler } from "@tencent/wechat_open_sdk"

const kTag = "SharePluginWXApiEventHandlerImpl"

export type OnWXReq = (req: BaseReq) => void

export type OnWXResp = (resp: BaseResp) => void

class WXApiEventHandlerImpl implements WXApiEventHandler {
  private onReqCallbacks: Map<OnWXReq, OnWXReq> = new Map
  private onRespCallbacks: Map<OnWXResp, OnWXResp> = new Map

  registerOnWXReqCallback(on: OnWXReq) {
    this.onReqCallbacks.set(on, on)
  }
  unregisterOnWXReqCallback(on: OnWXReq) {
    this.onReqCallbacks.delete(on)
  }

  registerOnWXRespCallback(on: OnWXResp) {
    this.onRespCallbacks.set(on, on)
  }
  unregisterOnWXRespCallback(on: OnWXResp) {
    this.onRespCallbacks.delete(on)
  }

  onReq(req: BaseReq): void {
    Log.i(kTag, "onReq:%s", JSON.stringify(req))
    this.onReqCallbacks.forEach((on) => {
      on(req)
    })
  }

  onResp(resp: BaseResp): void {
    Log.i(kTag, "onResp:%s", JSON.stringify(resp))
    this.onRespCallbacks.forEach((on) => {
      on(resp)
    })
  }
}
export const WXShareEventHandler = new WXApiEventHandlerImpl

3、WeChat Sharing

Key point: Package the shared fixed elements into the "shareType" method

Parameter 1: shareType - Sharing Type

0: SendMessageToWXReq.WXSceneSession (Friend)

SendMessageToWXReq.WXSceneTimeline (Friend Circle)

Parameter 2: object: Sharing object

textObject: Sharing Content Object

imageObject: Sharing Image Object

webpageObject: Webpage Sharing Object

miniProgramObject: Mini Program Sharing Object

shareType(shareType:number,object:WXMediaMessage,handler?:HandlerAction):SendReqResultWrap{
    let req = new SendMessageToWXReq()
    req.scene = shareType

    let mediaMessage = new WXMediaMessage()
    mediaMessage.mediaObject = object
    mediaMessage.title = message.title
    mediaMessage.description = message.description

    req.message = message

    this.wx.sendReq(this.context,req)
}

Copywriting Share

const textObject = new WXTextObject()
textObject.text = args
this.shareType(0,textObject)

Image sharing

const imageObject = new WXImageObject()
imageObject.uri = fileUri.getUriFromPath("file://path");
this.shareType(0,imageObject)

Webpage sharing

const webpageObject = new WXWebpageObject("https://xxxxxxx")
webpageObject.webpageUrl = args
this.shareType(0,webpageObject)

Mini-program sharing

const miniProgramObject = new WXMiniProgramObject()
miniProgramObject.userName = "username"
miniProgramObject.path = "path"
this.shareType(0,miniProgramObject)

4、Launch the WeChat mini-program from the app.

const req = new LaunchMiniProgramReq()
req.userName = "username"
req.path = "path"
this.wx.sendReq(this.context,req)

5、Tap to open WeChat

let ctx = getContext(this) as common.UIAbilityContext
let want:Want = {
    uri:"uri",
    action: "ohos.want.action.viewData"
}
ctx.startAbility(want);

Note: The complete code has been submitted to the HarmonyOS Third-Party Library. Please use the following command to install it.

ohpm install @free/wechat

Calling method

// Share Content
WeChat.install.shareText("text",{onResp:(resp)=>{}})
// Share the picture
WeChat.install.shareImage("https://xxx",{onResp:(resp)=>{}})
// Share the webpage
WeChat.install.shareWeb("https://xxx",{onResp:(resp)=>{}})
// Share Mini Program
WeChat.install.shareMini({username:"username",path:"path"},{onResp:(resp)=>{}})
// Open the WeChat mini-program
WeChat.install.openMini({username:"username",path:"path"},{onResp:(resp)=>{}})
// Open WeChat
WeChat.install.openWX("uri",{onResp:(resp)=>{}})

If you like this content, please give a little heart!

Harmony-Free Hengong Dialog Customized Pop-up Window

RogueYBJ — Tue, 24 Jun 2025 09:10:24 +0000

Hello everyone, nice to meet you all! Today, we are going to talk about the custom dialog "openCustomDialog" in HONOR OS. I believe that many of you will need to use pop-up windows in your development process, and it should not be coupled with the page during use. Today, I will help you all analyze the usage of "openCustomDialog" in detail.

一、First, let's analyze the settings for pop-up windows in Harmony OS. Harmony OS provides some basic design for pop-up windows, but it cannot meet the requirements for diverse designs of pop-ups. However, it offers the method "openCustomDialog" which can be used. This method is based on the "PromptAction" under the UIContext.

1、First, define a context

// Applying Context
private context: common.UIAbilityContext = getContext() as common.UIAbilityContext;
// Tips for Methodology
private promptAction: PromptAction = context.windowStage.getMainWindowSync().getUIContext().getPromptAction()

2、Let's take a look at the parameters of penCustomDialog. dialogContent refers to the content to be displayed, which is the component. options are the parameters related to the pop-up window, such as closing the pop-up window, etc. You can refer to the Harmony OS documentation for detailed descriptions. Here, we mainly discuss the custom components that need to be displayed.

this.promptAction().openCustomDialog(custom,options);

二、The ComponentContent of the custom component has three parameters. Among them, the T type parameter is the key data for data interaction.

uiContext: This is the context of the UI. getUIContext()

builder: It is the WrappedBuilder<[T]> component decorated with @builder.

args: is a parameter of type T

1、"Builder" is a global component, which is the custom component we need to write. The generic type "T" represents the data object type that we need to pass, and "args" represents the data object that needs to be passed.

// custom component
@Builder
export function customBuilder(params: DialogBuilderParams) {
    Text("custom component")
}
// create component
let custom = new ComponentContent(getUIContext(), wrapBuilder,params)
// show component
this.promptAction().openCustomDialog(custom,options);

2、So, basically, this is the completion of a basic pop-up window. Next, let's talk about the parameters that the component needs to pass in. The parameters need to be displayed as 'params', and there are also the close method 'close' and other parameters 'status'.

export interface DialogBuilderParams<T,R>{
  params: T
  close: (data: R) => void
  status?: DialogStatus
}

3、After obtaining the data, it is displayed in the component. The code of the group definition component is modified. params.params is used to display the data, and params.close(true) is used to close the pop-up window.

// custom component
@Builder
export function customBuilder(params: DialogBuilderParams) {
  Column() {
    Text(params.params).width('90%').textAlign(TextAlign.Center).padding(10)
    Blank()
    Divider()
    Text('确认')
      .onClick(() => {
        params.close(true)
      })
      .width('100%')
      .aspectRatio(6)
      .textAlign(TextAlign.Center)
  }
  .width('70%')
  .backgroundColor(Color.White)
}

4、Implement the method for closing the popup window. When it is necessary to pass parameters for processing the close method.

// create component
let custom = new ComponentContent(getUIContext(),wrapBuilder,{
    params: "This is the data to be presented.",
    close: (data: R) => {
        // close dialog
        this.promptAction().closeCustomDialog(custom)
    }
})

Note: The complete code has been submitted to the HarmonyOS Third-Party Library. Use the following command to install.

ohpm install @free/dialog

Calling method

// Prompt Pop-up Window 
Dialog.alert({data:"alert"})
// Middle pop-up window 
Dialog.open({data:"open"})
// Bottom pop-up window 
Dialog.sheet({data:['sheet']})
// Selector Popup Window 
Dialog.picker({data:['picker']})
// Phone call pop-up window 
Dialog.tel("168********")
// Input box popup window 
Dialog.input({data:"input"})
// Time Selection Dialog Box 
Dialog.time({data:new Date()})
// Date selection dialog box 
Dialog.date({data:new Date()})
// Calendar Selection Dialog Box 
Dialog.calendar({data:new Date()})
// Custom Pop-up Window 
Dialog.custom(wrap, params)

If you like this content, please give a little heart!

Harmony-Free Hengong Generator Automatically Generates Modes

RogueYBJ — Tue, 24 Jun 2025 09:06:30 +0000

Hello everyone, welcome! Today, we will be discussing the scenario of automatically generating models using JSON in Harmony. Many students often make mistakes when writing model data, either by omitting or miswriting certain parameters, or by incorrectly specifying the data type of the parameters. This can lead to unexpected errors during development, which require multiple debugging attempts to identify the problem. In this session, I will guide you all through using the hvigor script to implement the generator to automatically generate models, ensuring the correctness of the models.

一、First, create a TypeScript project and import the necessary dependencies. You can refer to hvigor plugin development for details. Additionally, take a look at hvigor - it is a lightweight build tool provided by Huawei, which enables the automatic generation of models by writing JavaScript code.

二、The data in the JSON file is read from the specified path of the JSON data file using the hvigor and fs-extra plugins.

1、Traverse and read the JSON file

traverseDirectory(path:string,complete: (dirent: fs.Dirent<string>) => void){
    fs.readdir(path, { withFileTypes: true },(err,dirents)=>{
        if (err) {
            log(`Error reading directory ${path}:${err}`);
            return;
        }
        dirents.forEach((dirent)=>{
            const fullPath = `${path}/${dirent.name}`;
            if (dirent.isDirectory()){
                // If it is a folder, make a recursive call
                fs.mkdir(`${this.config.out}/${dirent.name}`)
                this.traverseDirectory(fullPath,complete);
            }else{
                complete(dirent)
            }
        })
    })
}

2、Read the file data

this.traverseDirectory(this.config.input,(dirent)=>{
    let buf =  fs.readFileSync(dirent.parentPath + "/" + dirent.name,{encoding:'utf-8'})
})

三、Create the model file using the fs-extra plugin and output it to the "out" folder. Create the model file based on the JSON file. Convert the JSON data into model data using jsonToModel, and then write it into the model file.

1、Convert JSON data to model data

jsonToModel(json:object,name:string):string{
    let data = Object.entries(json);
    let body = "";
    let init = `\tconstructor(face:${name}Face) {\n\t\tif(face==null)`;
    let otherMap:Map<string,any> = new Map()
    data.forEach((k)=>{
        if(k[1] instanceof Array){
            body += `\t${k[0]}:Array<${this.arrayToModel(k[0],k[1],otherMap,name)}> | undefined \n`
        }else if(k[1] != null && typeof k[1] == "object"){
            let objName = name + k[0].substring(0, 1).toUpperCase() + k[0].substring(1);
            otherMap.set(objName,k[1])
            body += `\t${k[0]}:${objName}Model | undefined \n`
        }else{
            body += `\t${k[0]}:${typeof k[1]} | undefined \n`
        }
        init += `\t\tthis.${k[0]} = face.${k[0]} \n`
    })
    let model = `export interface ${name}Face{ \n ${body}}\n\n`
    model += `export class ${name}Model implements ${name}Face{\n${body}\n}\n\n`
    otherMap.forEach((v,k)=>{
        model += this.jsonToModel(v,k)
    })
    return model
}
// Handling array nesting issues
arrayToModel(k:string,v:Array<any>,otherMap:Map<string,any>,name:string):string{
    if(v.length > 0){
        if(typeof v[0] == "object"){
            if(v[0] instanceof Array){
                return `Array<${this.arrayToModel(k,v[0],otherMap,name)}>`;
            }else{
                let objName = name + k.substring(0, 1).toUpperCase() + k.substring(1);
                otherMap.set(objName,v[0])
                return objName + "Model"
            }
        }else{
            return typeof v[0]
        }
    }else{
        return "object"
    }
}

2、Based on creating the model file and writing the model data into the model file

this.traverseDirectory(this.config.input,(dirent)=>{
    let buf =  fs.readFileSync(dirent.parentPath + "/" + dirent.name,{encoding:'utf-8'})
    let fileName = dirent.name.split('.')[0];
    fileName = fileName.substring(0, 1).toUpperCase() + fileName.substring(1);
    const filePath = `${this.config.out}/${fileName}.g.ets`;
    let model = this.jsonToModel(JSON.parse(buf),fileName)
    fs.writeFileSync(filePath,model)
})

Note: The complete code has been submitted to Code Repository，Go to Download.tgz package

1、Manual Import: Place the downloaded.tgz package into the project. In the /hvigor/hvigor-config.json5 file, introduce XXX to replace the storage path.

/hvigor/hvigor-config.json5

{
  "dependencies": {
    "@free/generator": "file:../XXX.tgz"
  },
}

Introduce the hvigorfile.json5 file under the "entry" directory.

/entry/hvigorfile.json5

import { jsonToModelPlugin } from '@free/generator';

// Input: The location for JSON input. Default: /entry/json/
// Output: The location for the model. Default: /entry/model/

export default {
    system: hapTasks, 
    plugins:[
        jsonToModelPlugin(input?:string,out?:string)
    ]        
}

3、Execute the command hvigorw --sync

If you like this content, please give a little heart!

Harmony-Free Hengong List Refresh Loading Function

RogueYBJ — Tue, 24 Jun 2025 09:02:57 +0000

Hello everyone, welcome! Today, we are going to talk about the refresh loading function in HarmonyOS. Refresh is mainly divided into two parts: pull-down refresh and pull-up load. By pulling up or down, we distinguish the refresh or loading status, and execute the current state's animation after releasing.

一、First, obtain the sliding gesture, and then distinguish the sliding state by obtaining the position of the sliding movement.

1、Obtain the sliding gesture.

// Define the 'refresh' extension attribute and pass in the RefreshUtils utility class to calculate the current status
// The 'List' can be used for any component
@Extend(List)
function refresh(refresh: RefreshUtils) {
  .offset({ x: 0, y: refresh.offsetY }) // The position of the sliding action
.onTouch((e) => refresh.onTouch(e)) // Touch gesture
.enabled(refresh.state < 4) // Disables further sliding during the refreshing or loading process
}

2、Calculate the current state based on the position obtained through.onTouch.

export enum RefreshState {
  // Default state 
  normal,
// Currently in sliding state 
  runAll,
  // Currently in the process of loading more content by pulling up 
  runLoading,
  // Currently in the pull-to-refresh state 
  runRefresh,
  // Prepare for the pull-up loading state 
  readLoading,
  // Prepare for the pull-down refresh state 
  readRefresh,
  // Start loading 
  onLoading,
  // Start refreshing 
  onRefresh,
  // Success loading status 
  successLoading,
  // Loading failure state 
  failLoading,
  // Refresh successful status 
  successRefresh,
  // Failure in refreshing state 
  failRefresh,
}

二、Based on the RefreshState status, customize the pull-to-load attempt and the pull-to-refresh attempt in the refreshBuilder.

@Builder
export function refreshBuilder(refresh: RefreshUtils) {
  if (refresh.isRefresh() && refresh.upData != undefined) {
    Row() {
      if (refresh.state == RefreshState.runRefresh) {
        Text("↓").fontSize(25)
      } else if (refresh.state == RefreshState.readRefresh) {
        Text("↑").fontSize(25)
      } else if (refresh.state == RefreshState.onRefresh) {
        Text() {
          SymbolSpan($r('sys.symbol.rays'))
        }.fontSize(25).rotate({ angle: refresh.animator.progress * 360 })
      } else {
        Text() {
          SymbolSpan(refresh.state == RefreshState.successRefresh ? $r('sys.symbol.checkmark') :
          $r('sys.symbol.xmark'))
        }.fontSize(25)
      }
      Column() {
        if (refresh.state == RefreshState.runRefresh) {
          Text("Pull down to refresh").fontSize(14)
        } else if (refresh.state == RefreshState.readRefresh) {
          Text("Release to refresh immediately").fontSize(14)
        } else if (refresh.state == RefreshState.onRefresh) {
          Text("Refreshing...").fontSize(14)
        } else {
          Text(refresh.state == RefreshState.successRefresh ? "Refresh successful!" : "Refresh failed!").fontSize(14)
        }
        Text(`Last update:${refresh.refreshTiming.toLocaleTimeString()}`)
          .fontSize(12)
          .fontColor(0x999999)
          .padding({ top: 3 })
      }.padding({ left: 5 })
    }
    .height(50)
    .width('100%')
    .justifyContent(FlexAlign.Center)
    .position({ top: 0 })
  } else if (refresh.isLoading() && refresh.downData != undefined) {
    Row() {
      if (refresh.state == RefreshState.runLoading) {
        Text("↑").fontSize(25)
      } else if (refresh.state == RefreshState.readLoading) {
        Text("↓").fontSize(25)
      } else if (refresh.state == RefreshState.onLoading) {
        Text() {
          SymbolSpan($r('sys.symbol.rays'))
        }.fontSize(25).rotate({ angle: refresh.animator.progress * 360 })
      } else {
        Text() {
          SymbolSpan(refresh.state == RefreshState.successLoading ? $r('sys.symbol.checkmark') :
          $r('sys.symbol.xmark'))
        }.fontSize(25)
      }
      Column() {
        if (refresh.state == RefreshState.runLoading) {
          Text("Pull up to load").fontSize(14)
        } else if (refresh.state == RefreshState.readLoading) {
          Text("Release and immediately load").fontSize(14)
        } else if (refresh.state == RefreshState.onLoading) {
          Text("Loading...").fontSize(14)
        } else {
          Text(refresh.state == RefreshState.successLoading ? "Loading completed!" : "Failed to load!").fontSize(14)
        }
        Text(`Last time loading:${refresh.loadingTiming.toLocaleTimeString()}`)
          .fontSize(12)
          .fontColor(0x999999)
          .padding({ top: 3 })
      }.padding({ left: 5 })
    }
    .height(50)
    .width('100%')
    .justifyContent(FlexAlign.Center)
    .position({ bottom: 0 })
  }
}

Note: The complete code has been submitted to the HarmonyOS Third-Party Library. Please use the following command to install it.

ohpm install @free/refresh

Calling method

@Component
export struct RefreshComponent{

  @Builder
  itemBuilder(model:object){
    Text("item")
  }

/**
   * Refresh
   */
  upData = (page?: PageFace):Promise<boolean | Array<object>> => {
    return new Promise<boolean | Array<object>>((res, rej) => {
      res([])
    })
  }
  /**
   * Loading...
   */
  downData = (page?: PageFace):Promise<boolean | Array<object>> => {
    return new Promise<boolean | Array<object>>((res, rej) => {
      res([])
    })
  }

  build() {
    Column(){
      RefreshList({
        cachedCount:5,
        refresh:new RefreshUtils({upData:this.upData,downData:this.downData}),
        itemBuilderParam:this.itemBuilder,
      }).height("100%")
    }
  }
}

If you like this content, please give a little heart!

Harmony-Free Hengong Network Network Library

RogueYBJ — Tue, 24 Jun 2025 08:55:45 +0000

Hello everyone, nice to meet you all! Today, we are going to talk about the HTTP data request function of the network in HarmonyOS. During the daily development process, the interaction between the app and the server is inevitable. Network requests are also a crucial part of app development and one of the most frequently used tasks in app development.

一、HTTP network requests consist of two crucial parts: the request parameters (options) and the response data (response).

1、The request parameters options contain several important parameters such as RequestMethod, header, and body, and these parameters are encapsulated.

1.1、The RequestMethod includes OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, and CONNECT, among which the most commonly used ones are POST and GET.

options.method == http.RequestMethod.GET
options.method == http.RequestMethod.POST

1.2、The header of the request usually includes the verification signature token required by the server as well as the data type Content-Type, among other things.

HttpBase.baseHeader.set("Content-Type",this.contentType);
HttpBase.baseHeader.set("token",token);

1.3、The body of the request typically contains the data required by the server. options.extraData

options.extraData = "data"

1.4、The basic method for the request parameter options.

request(url:string,options:http.HttpRequestOptions){
    this.baseHeader.set("Content-Type",this.contentType);
    options.header = assign({},this.baseHeader,options.header??{})
    return this.httpRequest.request(url,options);
}

2、The response parameter response contains several important parameters such as responseCode, result, and resultType, and these parameters are encapsulated.

2.1、responseCode - Response data status code. A status code of 200 indicates a successful response.

2.2、Result The corresponding data will have the data transmitted by the server when the status code is 200.

2.3、The response data types of resultType are STRING, OBJECT, and ARRAY_BUFFER.

2.4 Response data acquisition

request(url:string,options:http.HttpRequestOptions){
    this.baseHeader.set("Content-Type",this.contentType);
    options.header = assign({},this.baseHeader,options.header??{})
    return this.httpRequest.request(url,options,(err,data)=>{
        if (err) {
          rej(err)
        }else{
          if (data.responseCode == 200) {
            res(data)
          }else{
            rej(JSON.stringify(data.result))
          }
        }
    });
}

二、Process the response data. While obtaining the data, it is also desired to perform some processing, and it is hoped that the data can be transformed into the form of a model for direct use.

1、Specify the type you want to obtain by passing in different T generics. The default generics are object | string | ArrayBuffer.

request<T = object | string | ArrayBuffer>

2、Process the incoming T generic type and return the corresponding model type HttpResp< T >

request<T = object | string | ArrayBuffer>(url:string,options:http.HttpRequestOptions): Promise<HttpResp<T>> {
    return new Promise((res,rej)=>{
      this.httpRequest.request(url,options,(err,data)=>{
        if (err) {
          rej(err)
        }else{
          if (data.responseCode == 200) {
            let resp:HttpResp<T> = {
              responseCode: data.responseCode,
              code: data.responseCode,
              msg: "Request successful",
              data: data.result as T,
            }
            res(resp)
          }else{
            rej(JSON.stringify(data.result))
          }
        }
        this.finish()
      })
    });
}

Note: The complete code has been submitted to the HarmonyOS Third-Party Library. Please use the following command to install it.

ohpm install @free/network

Calling method

// GET request
Http.get<object>("url",new Map());
// POST request
Http.post<object>("url",new Map());
// Download Request
Http.download<string>("url");
// Uploading image request
Http.upImage<string>("url",{image:"file"});
// Get request for uploading multiple images
Http.upImages("url",[{image:"file"}]);
// Perform multiple asynchronous requests
Http.requests({url:"url1"},{url:"url2",resp:(resp)=>{}});
// Perform synchronous execution of multiple requests
Http.requestsAsync({url:"url1"},{url:"url2",resp:(resp)=>{}});

If you like this content, please give a little heart!

Harmony-Free Hengong Loading Frame

RogueYBJ — Tue, 24 Jun 2025 08:49:09 +0000

Hello, dear students! Good morning! Today, we are going to talk about the commonly used loading box function in HONAM. It is developed based on the Overlay layer. During the development process, the loading box can be seen everywhere. Whenever there is an asynchronous operation with a delay involved, it needs to be displayed to prevent the page from being unresponsive and causing a poor user experience.

一、Understand Overlay. Overlay is a layer of covering on top of getUIContext.

let context = getContext() as common.UIAbilityContext
let overlay = context.windowStage.getMainWindowSync().getUIContext().getOverlayManager()

二、Add, delete, display, and hide overlay components

// Add overlay component
overlay.addComponentContent(content)
// Remove the overlay component
overlay.removeComponentContent(content)
// Display the overlay component
overlay.showComponentContent(content)
// Hidden Overlay Component
overlay.hideComponentContent(content)

三、Create component、Update the data

// Create component
let content = new ComponentContent(this.getUIContext(), builder, args)
// Update the data
content.update(args)

四、Custom builder component, with six states: loading, success, failure, info, warn, and progress.


export enum LoadingState {
  loading = 'sys.symbol.loading',
  success = 'sys.symbol.checkmark',
  failure = 'sys.symbol.xmark',
  info = 'sys.symbol.info_circle',
  warn = 'sys.symbol.exclamationmark_circle',
  progress = 'sys.symbol.progress'
}

export interface LoadingParamFace {
  state?: LoadingState
  msg: string
  progress?: number
  progressColor?: number | string
  total?: number
  data?: object
}

@Builder
function loadingCustom(param: LoadingParamFace) {
  Column() {
    Column() {
      if (param.state ?? LoadingState.loading == LoadingState.loading) {
        LoadingProgress().width(50).height(50).color(0xFF444444)
      } else if (param.state == LoadingState.progress) {
        Progress({ value: param.progress, total: param.total, type: ProgressType.Ring })
          .width(50)
          .padding(5)
          .style({ strokeWidth: 3, enableScanEffect: true })
      } else {
        Text() {
          SymbolSpan($r(param.state))
        }.fontSize(40)
        .padding(5).fontColor(0xFF444444)
      }
      Text(param.msg ?? "Loading...").fontSize(14).fontColor(0xFF444444)
    }.backgroundColor(Color.White).padding(20).borderRadius(10)
  }.backgroundColor(0x30000000).justifyContent(FlexAlign.Center).height('100%').width('100%')
}

Note: The complete code has been submitted to the HarmonyOS Third-Party Library. Please use the following command to install it.

ohpm install @free/loading

Calling method

// Display the loading loading box Loading.show({state:LoadingState.loading})
// Hide the loading loading box 
Loading.hide()

If you like this content, please give a little heart!

Harmony-Free Global Device Global Attributes

RogueYBJ — Tue, 24 Jun 2025 08:32:49 +0000

Hello, dear students! Good morning! Today, we are going to talk about the commonly used "global" attributes in HarmonyOS. During the development process, it is often necessary to obtain information related to the screen size (width and height), orientation (portrait or landscape), application-related information, packaging-related information, etc., which is all about app development.

一、Screen Information Display Detailed Documentation

1、The width and height of the screen

// Screen-related information
let dis = display.getDefaultDisplaySync()
// Screen width 
this.width = px2vp(dis.width)
//  Screen height
this.height = px2vp(dis.height)

2、The height occupied by the liuhai screen and the notch screen from top to bottom

// The height occupied by the top of the screen
let top = this.main.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM).topRect.height
// The height occupied at the bottom of the screen
let bottom = this.main.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR).bottomRect.height
// px Conversion vp
top = px2vp(top)
bottom = px2vp(bottom)

3、The width and height of the screen content as well as the height of the selection bar in the navigation bar

// Screen width
let contextWidth = width
// Screen height
let contextHeight = height - bottom - top
// Navigation bar height
let navBarHeight = top + 44;
// Height of the selection bar
let tabBarHeight = bottom + 49 + 10;
// Content Height
let contentHeight = height - navBarHeight - tabBarHeight
// Content height plus navigation bar height
let contentNavBar = height - tabBarHeight
// Content height plus navigation bar height
let contentTabBar = height - navBarHeight

二、Application-related information Detailed document

// Application-related Information
let appInfo = bundleManager.getBundleInfoForSelfSync(flags).appInfo
// Application package name
appInfo.name
// Application Name
appInfo.label
// Application Environment
appInfo.appProvisionType
// Packaging environment
appInfo.releaseType
// tokenId
appInfo.accessTokenId

三、Package the relevant information Detailed Document

// Packaging information
bundleInfo = bundleManager.getBundleInfoForSelfSync(flags)
// Version number
bundleInfo.versionName
// Signature information
bundleInfo.signatureInfo
// 安装时间
bundleInfo.installTime
// Author
bundleInfo.vendor

Note: The complete code has been submitted to HarmonyOS Third-Party Library,Use the following command to install.

ohpm install @free/global

Calling method

// Screen-related information, etc....
global.top
global.bottom
global.width
global.height
global.getNavBarHeight()
global.getTabBarHeight()
global.getContentHeight()
global.getContentNavBar()
global.getContentTabBar()
// Apply relevant information, etc....
global.appInfo
global.appName
global.bundleName
global.env
global.releaseType
global.release
global.debug
global.tokenId
// Package the relevant information...
global.bundleInfo
global.bundleInfo.signatureInfo
global.bundleInfo.installTime
global.bundleInfo.vendor
global.bundleInfo.name

If you like this content, please give a little heart!

Harmony-Free Navigation Container Navigation

RogueYBJ — Tue, 24 Jun 2025 08:24:40 +0000

Hello, dear students! Good morning! Today, we are going to talk about the Navigation container navigation component commonly used in HONOR. During the development process, page navigation is quite common. Generally, an application has dozens or even hundreds of pages, so controlling page navigation is of utmost importance.

一、First, it is necessary to understand the composition of the Navigation container navigation component. NavPathStack and NavDestination are the core components, along with a core attribute: navDestination(). The official documentation is quite elaborate, but the essence of it boils down to these three elements.

1、The Navigation component is the main page component. Add this component to the @Entry page.

@Entry
@Component
struct Index {
    build() {
        Navigation(){

        }
    }
}

2、NavPathStack is the key controller for managing page navigation.

let navPathStack: NavPathStack = new NavPathStack();

3、NNavDestination is the component being navigated. It is a custom component decorated with @Component and needs to be invoked through a global dispatch call decorated with @builder.

@Builder
export function testBuilder(o:object){
  NavDestination(){
    TestPage()
  }
}

@Component
export struct TestPage{
  build() {
    Text("TestPage")
  }
}

4、The "navDestination()" attribute of the Navigation component

.navDestination((builderName: string, p: object) => {
  if (builderName == "testBuilder") {
    return wrapBuilder(testBuilder).builder(p)
  }
})

5、At this point, the entire page has reached a closed loop, and all the codes are listed.

const navPathStack: NavPathStack = new NavPathStack();

@Entry
@Component
struct Index {
    build() {
        Navigation(navPathStack){
            Text("testPage").onClick(()=>{
                navPathStack.pushPathByName("testPage",new Map)
            })
        }.navDestination((builderName: string, p: object) => {
            if (builderName == "testBuilder") {
            return wrapBuilder(testBuilder).builder(p)
            }
        })
    }
}

@Builder
export function testBuilder(o:object){
  NavDestination(){
    TestPage({o:o})
  }
}

@Component
export struct TestPage{
  o: object|undefined
  build() {
    Column(){
      Text("TestPage")
      Text("Go back to the previous page").onClick(()=>{
        navPathStack.pop()
      })
    }
  }
}

Are you a little surprised? Why is it only so little, when there are so many documents? Yes! Exactly! The main core is just written like this, but to handle the daily cumbersome requirements, these codes need to be encapsulated!

Note: The complete code has been submitted to HarmonyOS Third-Party Library,Use the following command to install.

ohpm install @free/navigation

Calling method: After writing the sub-page as described above, you need to register the requestBuilder for the sub-page.

// Registration sub-page
nav.requestBuilder('path',wrapBuilder(testBuilder))
// Redirecting the page and receiving the returned parameters
nav.push("path",new Map).then((data)=>{
    if (data.data!=undefined) {
        // TODO: Handle the return parameters
    }
})
// Return to the page and pass the return parameter
nav.pop(new Map);

If you like this content, please give a little heart!

Harmony-Free: Hengong Preferences - Preferences Settings

RogueYBJ — Tue, 24 Jun 2025 01:20:11 +0000

Hello everyone, nice to meet you all! Today, we are going to talk about the preferences data storage commonly used in HarmonyOS. During the development process, we usually use some persistent data storage methods. Some user data and commonly used fixed data can all be stored using preferences.

一、Let's have a brief look at the preferences data storage. Preferences use Key-Value key-value type for data storage, and data is stored and retrieved through the Key.

1、preferences Create data storage instance instantiation

preferences = preferences.getPreferencesSync(getContext(), { name: 'base' });

2、preferences Basic method，def As the default value，value For data values

// Store data
preferences.put(key, value)
preferences.putSync(key, value)
// Obtain data
preferences.get(key, value)
preferences.getSync(key, def)
// Obtain all the data
preferences.getAll();
preferences.getAllSync();
// Delete data
preferences.delete(key)
preferences.deleteSync(key)
// Clear data
preferences.clear();
preferences.clearSync();
// Synchronize to the preferences library
preferences.flush();

3、After performing operations on the stored data, a flush synchronization is required. Therefore, it is possible to directly perform the flush operation after performing put, delete, and clear operations.

// Add or update and synchronize
putFlush(key: string, value: preferences.ValueType) {
    preferences.putSync(key, value)
    preferences.flush()
}
// Delete and synchronize
deleteFlush(key: string) {
    if (this.has(key)) {
        preferences.deleteSync(key)
        preferences.flush()
    }
}
// Clear and synchronize
clearFlush() {
    preferences.clearSync()
    preferences.flush()
}

4、Based on these, implement multi-value storage and multi-value retrieval

// Obtain multiple pieces of data
getForKeys(...keys: string[]): Map<string, preferences.ValueType> {
    let map: Map<string, preferences.ValueType> = new Map<string, preferences.ValueType>()
    keys.forEach((key) => {
        let value = preferences.getSync(key)
        map.set(key, value)
    })
    return map
}
// Store multiple pieces of data
putMap(map: Map<string, preferences.ValueType>) {
    map.forEach((v, k) => {
        preferences.putSync(k, v)
    })
}
// Store multiple pieces of data and synchronize them
putMapFlush(map: Map<string, preferences.ValueType>) {
    map.forEach((v, k) => {
        preferences.putSync(k, v)
    })
    preferences.flush()
}
// Delete multiple pieces of data
deleteForKeys(...keys: string[]){
    keys.forEach((key) => {
        this.delete(key)
    })
}
// Delete multiple pieces of data and synchronize.
deleteForKeysFlush(...keys: string[]){
    keys.forEach((key) => {
        this.delete(key)
    })
    preferences.flush()
}

Note: The complete code has been submitted toHongmeng Tripartite Library,Use the following command to install.

ohpm install @free/preferences

Calling method: It is recommended to use the one with the "Flush" method as the default option.

new PreferencesUtils().get("");
new PreferencesUtils().getForKeys("","","");
new PreferencesUtils().getAll();
new PreferencesUtils().getMap();
new PreferencesUtils().put("",0);
new PreferencesUtils().putFlush("",0);
new PreferencesUtils().putMap(new Map);
new PreferencesUtils().putMapFlush(new Map);
new PreferencesUtils().delete("");
new PreferencesUtils().deleteFlush("");
new PreferencesUtils().deleteForKeys("","","");
new PreferencesUtils().deleteForKeysFlush("","","");
new PreferencesUtils().clear()
new PreferencesUtils().clearFlush()

If you like this content, please give a little heart!

Harmony-Free Hengong Log Console Outputs Logs

RogueYBJ — Mon, 23 Jun 2025 08:57:09 +0000

Hello everyone, welcome! Today, we will talk about the commonly used log logging in HarmonyOS. During the development process, logging is basically indispensable. Logging can help us quickly locate and identify problems. However, sometimes during the development process, the testers who show the bugs on their phones cannot directly locate the problems even when the developers are present. It would be great if the console logging could be displayed on the phone, right? Today, we will discuss how to use the AOP aspect capabilities provided by the Aspect tool class to implement monitoring and logging, as well as how to open the console log output page by shaking the phone.

一、Monitor and print logs through the AOP aspect capabilities of the Aspect tool class

1、Add the "logAfter" monitoring method to the log printing method

util.Aspect.addAfter(console, 'log', true, this.logAfter)

2、The logAfter monitoring method records the log entries into the logList

logAfter: (instance: console, method: string, arg: string, ...args: object[]) => void  = (instance: console, method: string, arg: string, ...args: object[]) => {
      let msg = arg
      if (args != undefined) {
        args.forEach((a) => {
          msg += JSON.stringify(a)
        })
      }
      this.logList.push(new LogModel(msg))
    }

二、Open the console output log page by shaking the mobile phone.

1、Configure the permissions for the mobile phone sensors

2、Monitor the mobile phone sensors and open the console output log page

sensors = sensor.getSensorListSync()
// Start listening
open() {
    if (this.findSensor(sensor.SensorId.ACCELEROMETER)){
      try {
        sensor.on(sensor.SensorId.ACCELEROMETER, this.action.bind(this));
      } catch (error) {
        let e: BusinessError = error as BusinessError;
        console.error(`Failed to invoke on. Code: ${e.code}, message: ${e.message}`);
      }
    }else{
      console.error(`not find id with ${sensor.SensorId.ACCELEROMETER}`);
    }
}
// Turn off the listening function
close(){
    try {
      sensor.off(sensor.SensorId.ACCELEROMETER, this.action.bind(this));
    } catch (error) {
      let e: BusinessError = error as BusinessError;
      console.error(`Failed to invoke on. Code: ${e.code}, message: ${e.message}`);
    }
}
// Open the console log page
action(data: sensor.GyroscopeResponse){
    if ((data.x > this.num || data.y > this.num || data.z > this.num) && (this.isOn)) {
      this.isOn = false
      if (this.type === "router"){
        router.pushNamedRoute({name:"log"})
      }else {
        nav.push("log").then(() => {
          this.isOn = true
        })
      }
    }
}

Note: The complete code has been submitted toHongmeng Tripartite Library,Use the following command to install.

ohpm install @free/log

The calling method: The onCreate and onDestroy methods in the EntryAbility class respectively invoke the following two methods

// Start log monitoring
Log.open()
// Disable log monitoring
Log.close()

If you like this content, please give a little heart!