[Daily HarmonyOS Next Knowledge] Obtaining App Configuration Information, Map Type, Global Popup, Dynamic Import Reflection

[Daily HarmonyOS Next Knowledge] Obtaining App Configuration Information, Map Type, Global Popup, Dynamic Import Reflection, Default Keyboard Popup

1. How to obtain data from app.json5 in HarmonyOS, such as bundleName and versionName?

To obtain data from app.json5 (e.g., bundleName, versionName), retrieve information via BundleInfo:

Reference: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-bundlemanager-bundleinfo-V5

2. What is the Map type in HarmonyOS?

When making network requests, how to declare and assign parameters externally.

Sample declaration:

interface ob {
  "phone": string;
  "code": string;
}
let p: ob = {
  "phone": "123142",
  "code": "123",
}

3. Error when opening a global popup in HarmonyOS?

Opening a global popup in a normal class throws an error:

Reason: TypeError  
Error name: TypeError  
Error message: is not callable  
SourceCode:  
  (parent ? parent : this).observeComponentCreation2((elmtId, isInitialRender) => {  
    ^  

Reference demo:

OpenDialogDemo.ets

import { TestDialog } from './DialogHelper';

@Entry
@Component
struct OpenDialogDemo {
  build() {
    Column() {
      Text('Click to Popup')
        .margin({ top: 25 })
        .fontSize(25)
        .onClick(() => {
          TestDialog();
        })
    }
  }
}

TestDialog.ets

import { ComponentContent, window } from '@kit.ArkUI';
import { BusinessError } from '@kit.BasicServicesKit';
import { openOcrBottomDialog } from './OpenOcrBottomDialog';

export function TestDialog() {
  let windowClass = AppStorage.get("windowStage") as window.WindowStage;
  let uiContext = windowClass.getMainWindowSync().getUIContext();
  let promptAction = uiContext.getPromptAction();
  let contentNode = new ComponentContent(uiContext, wrapBuilder(openOcrBottomDialog));
  try {
    AppStorage.setOrCreate("contentNode", contentNode);
    promptAction.openCustomDialog(contentNode);
  } catch (error) {
    let message = (error as BusinessError).message;
    let code = (error as BusinessError).code;
    console.error(`OpenCustomDialog args error code is ${code}, message is ${message}`);
  }
}

openOcrBottomDialog.ets

import { BusinessError } from '@kit.BasicServicesKit';
import { window } from '@kit.ArkUI';

@Builder
export function openOcrBottomDialog() {
  Column() {
    Text('Content').fontSize(20).margin({ top: 10, bottom: 10 });

    Image("")
      .height(1)
      .width('100%')
      .margin({ left: 10, right: 10 })
      .backgroundColor(0xDFDFDF);

    Text('Take Photo')
      .fontSize(20)
      .margin({ top: 10, bottom: 10 })
      .onClick(() => {
        let sasasa: ComponentContent = AppStorage.get("contentNode") as ComponentContent;
        console.log("Test contentNode= " + sasasa);
        try {
          let windowClass = AppStorage.get("windowStage") as window.WindowStage;
          let uiContext = windowClass.getMainWindowSync().getUIContext();
          let promptAction = uiContext.getPromptAction();
          promptAction.closeCustomDialog(sasasa);
        } catch (error) {
          let message = (error as BusinessError).message;
          let code = (error as BusinessError).code;
          console.error(`:::OpenCustomDialog args error code is ${code}, message is ${message}`);
        }
      });

    Image("")
      .height(1)
      .width('100%')
      .margin({ left: 10, right: 10 })
      .backgroundColor(0xDFDFDF);

    // Text('Get from Album')
    // .fontSize(20)
    // .margin({ top: 10, bottom: 10 })
    // .onClick(() => {
    //   promptAction.closeCustomDialog(contentNode);
    // })

    Image("")
      .height(1)
      .width('100%')
      .margin({ left: 10, right: 10 })
      .backgroundColor(0xDFDFDF);

    // Text('Cancel')
    // .fontSize(20)
    // .margin({ top: 10, bottom: 10 })
    // .onClick(() => {
    //   promptAction.closeCustomDialog(contentNode);
    // })
  }
}

4. How to dynamically insert method names in reflected classes using dynamic import reflection in HarmonyOS?

Problem description: When using dynamic import reflection, how to insert method names dynamically (e.g., via variables)?

let filePath = '../plugins/DialogPlugin';
let method = 'showConfirmDialog';
import(filePath).then((ns: ESObject) => {
  new ns.default().$(method)() // Not effective  
  new ns.default().showConfirmDialog() // Effective  
});

Solutions:

• ArkTS does not support dynamic method calls; use a TS file for dynamic invocation.
• Alternatively, use template strings to create dynamic method references: variable${}.

5. How to make the keyboard pop up by default on a SMS verification code interface in HarmonyOS?

To enable the keyboard by default:

• Set .enableKeyboardOnFocus(false) to prevent the keyboard from popping up initially.
• Use a click event on a blank area to dynamically modify the focus property.
• For multiple TextInputs, set defaultFocus on the target TextInput to make it the default focus on the page.