DEV Community

CoderFeri
CoderFeri

Posted on

Mastering HarmonyOS NEXT Third-Party Libraries: lithe_refresh

#webdev #programming #harmonyos

Mastering HarmonyOS NEXT Third-Party Libraries: A Comprehensive Guide from Basics to Practice, Effortlessly Conquering lithe_refresh

Hello, fellow developers! I'm Feri, a programmer with over 12 years of experience. Today, I'm going to introduce you to the "efficiency booster" in OpenHarmony development — the OHPM third-party library. We'll also dive into hands-on practice with the incredibly smooth refresh component lithe_refresh! 👇

Demonstrating the application of the lithe_refresh third-party library in HarmonyOS NEXT projects

I. OHPM Third-Party Library: The "App Store" of OpenHarmony

Imagine being able to call ready-made high-quality components with just one click, eliminating the need to reinvent the wheel and skyrocketing your development efficiency. That's the magic of OHPM!

It consists of three "golden partners":

  • Website: A search powerhouse similar to the Google Play Store, enabling seamless library searching, documentation viewing, and configuration management.
  • Command-Line Interface (CLI): A programmer's "shortcut key," streamlining package management with a single command.
  • Registry: A treasure trove of numerous third-party libraries, storing code and data for easy access.

🌟 Direct Link to the Official Website: https://ohpm.openharmony.cn/

(Psst... Bookmark this URL and boost your development efficiency by 10086!)

II. OHPM Usage Guide: Unlock "Lazy Development" in 3 Steps

🔍 Step 1: Searching for Libraries is Like Shopping on Taobao

  1. Open the official website, type in keywords (such as "refresh" or "charts") in the search bar, and hit Enter!

Search Interface

  1. Results are sorted by "relevance" and "popularity." Opt for libraries with high star ratings and download counts — they're usually a safe bet!

Sorting Interface

🚀 Step 2: Installation in One Click

Open the terminal in DevEco Studio and enter the command:

ohpm install library_name # For example: ohpm install @abner/lithe_refresh
Enter fullscreen mode Exit fullscreen mode

✨ Bonus: After installation, oh-package.json5 automatically records your dependencies, ensuring you never miss a package again!

Installation Command

✍️ Step 3: Just Copy and Paste the Code

Follow the library's documentation, copy and paste the sample code, and tweak the parameters to finish up!

Code Example

III. Practical Case: Creating a Smooth Refresh Experience with lithe_refresh

🧊 What is lithe_refresh?

It's a "feather-light" refresh component that supports pull-to-refresh and load-more-on-scroll. It's compatible with various layouts like List and Grid and can even refresh any custom component!

Core Advantages:

  • Zero dependencies! It doesn't couple with any framework, offering ultimate flexibility.
  • Stunning appearance! It comes with multiple built-in animation effects and supports custom styling.
  • Extremely flexible! The refresh logic is separated from the UI, resulting in crystal-clear code structure.

📝 Three-Step Practice: From Installation to Takeoff

1️⃣ Installation: Introduce the "Magic Tool" with One Command 

ohpm install @abner/lithe_refresh
Enter fullscreen mode Exit fullscreen mode

Installation Successful

2️⃣ Code: Achieve Refresh Freedom 

// Import the component
import { RefreshController, LitheRefresh } from '@abner/lithe_refresh';

@Component
struct RefreshDemo {
  @State dataList: string[] = [];
  @State page: number = 1;
  scroller = new Scroller();
  controller = new RefreshController();

  // Pull-to-refresh logic: Simulate loading new data
  async loadNewData() {
    await new Promise(resolve => setTimeout(resolve, 2000));
    this.dataList = [`New Data 1`, `New Data 2`, `New Data 3`]; // Clear old data and load the latest
    this.controller.finishRefresh(); // Notify the component that refresh is complete
  }

  // Load-more-on-scroll logic: Simulate loading additional data
  async loadMoreData() {
    await new Promise(resolve => setTimeout(resolve, 2000));
    this.page++;
    this.dataList.push(`Data 1 on Page ${this.page}`, `Data 2 on Page ${this.page}`); // Append data
    this.controller.finishLoadMore(); // Notify the component that loading is complete
  }

  @Builder
  build() {
    LitheRefresh({
      scroller: this.scroller,
      controller: this.controller,
      itemLayout: () => {
        // List layout to display data
        List({ scroller: this.scroller }) {
          ForEach(this.dataList, (item) => {
            ListItem() {
              Text(item)
                .padding(15)
                .border({ width: 1, color: "#E0E0E0" })
            }
          })
        }
      },
      onRefresh: this.loadNewData.bind(this), // Bind the pull-to-refresh event
      onLoadMore: this.loadMoreData.bind(this) // Bind the load-more-on-scroll event
    })
    .margin(10)
    .statusBar({ backgroundColor: "#F5F5F5" })
  }
}
Enter fullscreen mode Exit fullscreen mode

3️⃣ Effect: Smooth Animations for an Ultimate Experience

  • When pulling down: The loading animation spins, and new data refreshes after 2 seconds!

    Pull-to-Refresh

  • When scrolling to load more: A "Load More" prompt appears at the bottom, with seamless data integration!

    Load-More-on-Scroll

IV. Developer Extras: Hidden Tips for Mastering OHPM

🔍 Tip 1: Use Keyword Combinations for Precise Library Searching

For example, search for "charts high-performance" or "lists animation" to find hidden gems more easily than with single keywords!

🛠️ Tip 2: Customize Component Styles

Take lithe_refresh as an example. To modify the refresh header style:

LitheRefresh({
  // ...other configurations
  refreshHeader: () => { // Customize the pull-to-refresh header
    Text("Pull to Refresh")
      .fontSize(14)
      .color("#666")
  }
})
Enter fullscreen mode Exit fullscreen mode

🚦 Tip 3: Avoid Dependency Conflicts

Check the library's "dependency instructions" before installation and use ohpm list to check for version conflicts, ensuring smooth operation!

V. Feri's Insights: Why Recommend OHPM?

As someone with extensive experience, I understand how time-consuming it is to "reinvent the wheel." OHPM is like a "developer convenience store," allowing you to call mature components at any time and focus on the core business logic.

Tools like lithe_refresh, in particular, help you quickly achieve "highly interactive experiences," making users perceive your app as "professional" and "smooth" — all with just a few lines of code!

💡 Pro Tip: Beginners can start with "UI component" libraries (such as buttons and pop-ups) and gradually move on to libraries for network requests and data processing as they become more proficient.

🌟 Interactive Time!

Feeling inspired? Open DevEco Studio now, enter ohpm install @abner/lithe_refresh, follow the tutorial, and experience the joy of smooth refreshing for yourself!

Encounter any issues? Leave a comment, and I'll help you debug!

👉 Follow me for more OpenHarmony development tips and programmer growth strategies. Let's level up together!

Where there is a will, there is a way! See you next time~ 🚀

Top comments (0)