Hongmeng 3.0 application development issues and summary

1. How to remove the default title bar and realize full-screen display?

Add attributes to the ability configuration information in config.json:

"abilities": [
{
    
    
     ...
    "metaData": {
    
    
        "customizeData": [
          {
    
    
            "name": "hwc-theme",
            "value": "androidhwext:style/Theme.Emui.Translucent.NoTitleBar",
            "extra": ""
          }
        ]
      }
      ...
}]

2. Application cold start white screen?

This problem is similar to the white screen when the Android app is cold-started. The solution for the Hongmeng app is the same as problem 1. Set the theme to:

androidhwext:style/Theme.Emui.Translucent.NoTitleBar

Note that it is Translucent.

3. How to get the screen size?

import display from '@ohos.display';

display.getDefaultDisplay((err, data) => {
    
    
  if (err) return;
  console.error("屏幕宽高：" + data.width + "," + data.height);
});

4. How to get the height of the status bar and set the background color of the status bar?

import window from '@ohos.window';

window.getTopWindow((err, mainWindowClass) => {
    
    
  if (err) return;
  mainWindowClass.setSystemBarEnable(['status']);
  mainWindowClass.setLayoutFullScreen(true);
  mainWindowClass.setSystemBarProperties({
    
    
    statusBarColor: '#00ff0000', // 状态栏背景色透明
    isStatusBarLightIcon: false,//状态栏图标是否为亮色
    statusBarContentColor: '#000000',//状态栏字体颜色
  });
  mainWindowClass.getAvoidArea(window.AvoidAreaType.TYPE_SYSTEM, (err, data) => {
    
    
    if (err) return;
    console.error("状态栏高度：" + data.topRect.height);
  });
});

5. How to display the Toast prompt?

import prompt from '@ohos.prompt';

prompt.showToast({
    
    
  message: "提示信息",
  bottom: "1000px"//距离屏幕底部高度
})

Effect:

6. Network request

http:

import http from '@ohos.net.http';

let httpRequest = http.createHttp()
httpRequest.request(url, {
    
    
    method: method,
    header: header,
    extraData: paramsStr,
    connectTimeout: 30000, // 可选，默认为60s
    readTimeout: 30000, // 可选，默认为60s
  }, (err, data) => {
    
    

})

fetch:

import fetch from '@system.fetch';

fetch.fetch({
    
    
  url: url,
  method: method,
  header: header,
  success: res => {
    
    

  },
  fail: error => {
    
    
    
  }
})

7. Custom LoadingDialog

@CustomDialog
export struct LoadingDialog {
    
    
  controller: CustomDialogController
  @State angle: number = 0
  interval: number

  aboutToAppear() {
    
    
    this.angleChange()
  }

  aboutToDisappear() {
    
    
    clearInterval(this.interval)
  }

  angleChange() {
    
    
    this.angle = 0
    this.interval = setInterval(() => {
    
    
      this.angle += -30
      if (this.angle == -360) this.angle = 0
    }, 50)
  }

  build() {
    
    
    Stack() {
    
    
      Column() {
    
    
        Image($r('app.media.ic_loading'))
          .width(20)
          .height(20)
          .rotate({
    
     x: 0, y: 0, z: 1, angle: this.angle })
      }
    }
    .width(50)
    .height(50)
    .backgroundColor(0x88000000)
    .borderRadius(10)
    .shadow({
    
     radius: 10, color: Color.Gray, offsetX: 3, offsetY: 3 })
  }
}

How to use, in the page:

Declare CustomDialogController:

  dialogController: CustomDialogController = new CustomDialogController({
    
    
    builder: LoadingDialog(),
    autoCancel: false,
    customStyle: true
  });

显示：this.dialogController.open()
隐藏：this.dialogController.close()

Slot: At present, dialog can only be used in pages decorated with @Entry, and cannot be encapsulated. That is to say, when you want to use loading pages, you must make the above declaration and call related methods to use it!

Effect:

8. How to carry out real machine debugging?

First of all, the system version of your real device must be consistent with the api version of your project, or the system version of the real device is higher than the api version of the project. For example, if the project api is 8, the real device must be Hongmeng 3.0 or above, and 2.0 cannot be installed and debugged;

9. How to set up official signing and release application?

File->Project Structure:

Check Automatically generate signature, the signature of the debug version will be automatically generated, and it can be run directly to the real device or emulator during debugging.

When you publish the application, you need to formally sign it. At this time, you need to manually set the signature. Manual signing requires three files:

• .p12: create by yourself;
• .cer: Obtained through the .csr created by yourself from Huawei's background application;
• .p7b: The .cer obtained in the previous step is obtained through the Huawei background application;

Step 1: Create .p12 and .csr:

Build->Generate Key and CSR:

First, you need to create a p12 certificate, fill in the certificate name, password, etc.;

After the creation is successful, go to the step of generating CSR, fill in the alias, password, and the file name and storage location of the csr:

Generate after clicking Finish:

Step 2: Upload the .csr application .cer obtained in the first step

Select User and Access:

Select the right menu certificate management:

Click the Add Certificate button on the right:

The certificate name can be customized, the certificate type can be selected as a release certificate, and csr is the csr file generated in the first step. After submission, a formal release certificate will be generated in the background, downloaded and saved:

Step 3: Upload the .cer obtained in the second step, and apply for .p7b:

Select My Project, select your Hongmeng version application, and then select HAP Provision Profile management in the right menu:

Click the Add button on the right:

The name is customized, the type is selected to publish, and the .cer created in the second step will automatically pop up when the certificate is selected. Just select it. First, the permission is selected according to the project situation. After the submission is successful:

Download the .p7b certificate and save it!

Go back to the interface for setting the signature in the development tool:

Select the .p12, .cer and .p7b you generated and downloaded in turn and OK! Then select Build->BuildAPP(s) for the development tool. Note that the upload market can only be a package in .app format:

after the compilation is completed, the app package is under the build folder of the project root directory:

10. Review problems that may be encountered when uploading the market

• Application icon problem: it is better to have a solid color background + logo, the HMOS logo is obvious in the lower right corner, and the size is 216 right angles
• There is a bug in the project, which affects the next step
• Imperfect function
• No Privacy Policy
• If there is a personalized recommendation function, the shutdown function must be provided
• It is better to add account logout function

If your Hongmeng version of the app has an Android version on the Huawei Market, the review will be much easier

11. Operations allowed in Hongmeng apps currently uploaded to the market

For example, when some internal functions cannot be implemented through the Hongmeng version of the app, the user can be prompted to jump to the corresponding page of the Android version for operation. If the user has not installed it, it will jump to the details page of the Android version of the application market (the above needs to be implemented by yourself)

12. Live broadcast support issues in arkui

The video component of arkui currently only supports local video and network video, and does not support live push-pull streaming. The official reply is that there is currently no support plan, and there is no solution. There is no solution. We can only wait for the ark technology stack to gradually improve!

13. [Bug] methods or events such as setTimeOut and router cannot be executed in arkui+api8 network request callback

The official reply confirms that this is a bug, waiting for a fix...

14. How does the service card developed by arkts display or update network pictures?

The "memory picture" provided in the document is only supported by the service card developed by java. The official reply is that the service card developed by ets currently does not provide a method to display or update the network picture on the card!
After researching and groping, I have realized a method to display or display network pictures on cards:
1. Use request.download to download pictures and save them locally;
2. Use let fd=fileio.openSync(path) to synchronously open local pictures to get resource signs ( Note that file:// must be removed from the path, otherwise the opening will fail);
3. Update the card in form.ts:

 let fd = fileio.openSync(path)
 let obj = {
    
             
	  'jsonImage': 'memory://image',
      'formImages': {
    
    
        image: fd
      }
 }
 let formData = formBindingData.createFormBindingData(obj);
 formProvider.updateForm("" + formId, formData)

jsonImage is the src path displayed by the image tag in the card (initially configured in index.json, and local resources are displayed first by default):

<image id="image" src="{
    
    { jsonImage }}"></image>

The only disadvantage of this method is that when downloading pictures, there will be a download prompt in the notification bar. It should be to let the user know what is downloaded and prevent the app from silently downloading. Therefore, because of the prompt problem in the notification bar, this implementation method is a bit tasteless...

15. How to exit the app completely?

import process from '@ohos.process';
import app from '@system.app';

app.terminate();//非完全退出
process.kill(0, process.pid)//杀掉进程，完全退出
process.exit(0)

to be continued…