Anti-Hotlinking, Navigation Title Color, Refresh Component Callback, Page Routing Removal, Pull-to-Load More

[Daily Harmony Learnings on HarmonyOS Next] Anti-Hotlinking, Navigation Title Color, Refresh Component Callback, Page Routing Removal, Pull-to-Load More

1. How to add anti-hotlinking to a network URL when loading an image in HarmonyOS?

For anti-hotlinking, refer to DRM capabilities. Documentation link: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-drm-V5

The DRM (Digital Rights Management) framework component supports the development of digital rights management functions for audio and video media services. Developers can call the system-provided DRM plug-in to complete the following functions:

• DRM certificate management: Generate certificate requests, set certificate responses, and implement certificate Provision (download) functions.
• DRM media key management: Generate media key requests, set media key responses, and manage offline media key functions.
• DRM program authorization: Support DRM plug-ins to authorize DRM programs based on media key permissions.
• DRM program decryption: Support decryption calls for media playback functions to decrypt DRM programs.

To compress images to within a specified target size: https://developer.huawei.com/consumer/cn/forum/topic/0203144584728486846?fid=0109140870620153026

Currently, the Image component cannot set anti-hotlinking. The third-party library imageknife can set imageKnife.addHeader('refer', "http://1.94.37.200:7070/AntiT."); Reference: https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Fimageknife

2. How to remove the light background of the back button in the HarmonyOS Navigation title?

When the Navigation title is set to mini mode, a back button appears. How to remove the background color of this back button?

You can hide the back button and customize a back button with a custom style, using a click event to return to the previous page. Reference link: https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-routing-V5#%E9%A1%B5%E9%9D%A2%E8%BF%94%E5%9B%9E

When users complete operations on a page, they often need to return to the previous page or a specified page, which requires the page return function. During the return process, data may need to be passed to the target page, requiring data passing functions.

Before using page routing Router-related functions, import the Router module in the code:

import { router } from '@kit.ArkUI';

You can return to the page in the following ways:

• Method 1: Return to the previous page.

import { router } from '@kit.ArkUI';
router.back();

This method returns to the previous page (the position of the previous page in the page stack). However, the previous page must exist in the page stack to return; otherwise, the method is invalid.

• Method 2: Return to a specified page.
  • Return to a normal page.

import { router } from '@kit.ArkUI';

router.back({
  url: 'pages/Home'
});

• Return to a named routing page.

import { router } from '@kit.ArkUI';

router.back({
  url: 'myPage' // myPage is the alias of the named routing page to return to
});

This method returns to a specified page by specifying the target page path. The target page must exist in the page stack to return.

• Method 3: Return to a specified page and pass custom parameter information.
  • Return to a normal page.

import { router } from '@kit.ArkUI';

router.back({
  url: 'pages/Home',
  params: {
    info: 'From Home page'
  }
});

• Return to a named routing page.

import { router } from '@kit.ArkUI';

router.back({
  url: 'myPage', // myPage is the alias of the named routing page to return to
  params: {
    info: 'From Home page'
  }
});

This method not only returns to the specified page but also passes custom parameter information, which can be obtained and parsed in the target page by calling router.getParams.

3. Inaccurate callback parameters for the HarmonyOS Refresh component's onStateChange?

During the unclosed pull-down process of the Refresh component, it is called multiple times, returning abnormal RefreshStatus states (no Inactive) and showing Done before closure.

.pullDownRatio(this.ratio)
.onRefreshing(() => {
  this.ratio = 0
  setTimeout(() => {
    this.isRefreshing = false;
  }, 2000)
})
.onOffsetChange((value: number) => {
  if (value == 0) {
    this.ratio = undefined
  }
})

4. How to remove pages in HarmonyOS page routing?

Move a page in the stack to the top and remove subsequent pages before it: A->B->C->D, move B to the top and remove pages C and D.

To remove pages, use router.clear() or the Single mode in RouterMode. In single-instance mode, clearing pages C and D will move B to the top by default. In multi-instance mode, adjust based on specific requirements. Reference: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-router-V5

5. How to implement pull-to-load more in HarmonyOS?

Reference the following link: https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-layout-development-create-list-V5

A list is a complex container that automatically provides scrolling when the number of list items reaches a certain quantity and the content exceeds the screen size. It is suitable for presenting similar data types or data type sets, such as images and text. Displaying data collections in lists is a common requirement in many applications (e.g., address books, music lists, shopping lists, etc.).

Lists enable efficient display of structured, scrollable information. By linearly arranging child components ListItemGroup or ListItem in the List component vertically or horizontally, you can provide single views for rows or columns in the list, use loop rendering to iterate over a group of rows or columns, or mix any number of single views and ForEach structures to build a list. The List component supports rendering control methods such as conditional rendering, loop rendering, and lazy loading to generate child components.