DEV Community

陈杨
陈杨

Posted on

Treasure Case Sharing of HarmonyOS 5 Development — One-to-Many Development Example (Mobile Payment)

[Share] The Hidden Gems of HarmonyOS Development! A Hands-on Guide to "Develop Once, Deploy Everywhere" Practical Skills!

Hello everyone~ Today, while browsing the HarmonyOS developer documentation, I discovered a super practical collection of "One-for-Many" development cases! It turns out that the official team has already prepared various cross-device adaptation solutions—like discovering a new continent! I quickly organized and am sharing several highly practical mobile payment development cases to help you avoid detours~

  1. The Magic of Interface Layout: Grid System

  2. King Kong Area Transformation

  3. Mobile: Circular icon + vertical text

  4. Large screen: Rounded rectangle + horizontal layout

    Key code:

GridRow({gutter: {x: {sm:30, md:41, lg:58}}}) {
  ForEach(this.quickFunctions, (item) => {
    GridCol({span:3}) {
      // Switch component shape based on screen size
      this.curBp === 'sm' ? 
        <CircularComponent> : <RectangularComponent>
    }
  })
}
Enter fullscreen mode Exit fullscreen mode

Practical tip: Use the span property of GridCol to control element proportions, and combine with breakpoint listeners to achieve "smart layout."

  1. The Seventy-Two Changes of Function Entry
  2. Mobile shows 4 columns → Tablet 6 columns → PC 8 columns Secret weapon: Dynamic configuration of the columns property 
GridRow({
  columns: {sm:4, md:6, lg:8}, // The magic numbers are here!
  gutter: {x:{sm:45, md:50, lg:55}}
})
Enter fullscreen mode Exit fullscreen mode

  1. The Cross-Device Secrets of Payment and Collection

    (with pop-up and full-screen page switch diagrams)

  2. Intelligent Device Size Detection:

private receivePayment() {
  if (this.curBp === 'sm') {
    // On mobile, navigate to a new page
    router.pushUrl({url:'ReceivePaymentPage'})
  } else {
    // On large screens, show a dialog
    this.isDialogOpen = true
  }
}
Enter fullscreen mode Exit fullscreen mode
  1. The Pitfalls and Solutions of Dynamic QR Codes: 
// Timed refresh logic
aboutToAppear() {
  this.timer = setInterval(() => {
    this.getNewQRCode() // Call API to update
  }, 60000)
}

// Must remember to clear!
aboutToDisappear() {
  clearInterval(this.timer)
}
Enter fullscreen mode Exit fullscreen mode

Pitfall tip: Remember to listen for breakpoint changes when folding large screens, or layout issues may occur!

  1. Cross-Device Adaptation for Scan Feature

  2. Adaptive Camera Area:

// Responsive design using percentages
Scanner({
  width: '70%', 
  height: '70%',
  aspectRatio: 1 // Force 1:1 ratio
})
Enter fullscreen mode Exit fullscreen mode
  1. Third-Party Payment Page Adaptation:
  2. Mobile: Full-screen Web component
  3. PC: Embedded iframe + independent operation area 
if (breakpoint === 'lg') {
  this.useIframeMode = true
}
Enter fullscreen mode Exit fullscreen mode

  1. Card Pack Module Layout Secrets

  2. Card Waterfall Layout:

GridCol({
  span: {sm:12, md:6, lg:4} // Show 1/2/3 columns on three devices respectively
}) {
  BankCardComponent()
}
Enter fullscreen mode Exit fullscreen mode
  1. Interaction Differences for Adding Bank Cards:
  2. Mobile: Bottom pop-up
  3. Tablet: Slide out from the right
  4. PC: Centered dialog 
promptAction.showModal({
  alignment: deviceType === 'phone' ? 
    Alignment.Bottom : Alignment.Center
})
Enter fullscreen mode Exit fullscreen mode

  1. Development Tips

  2. Breakpoint listeners should be written in the aboutToAppear lifecycle

  3. Use the Blank component to fill blank areas more flexibly

  4. Make good use of the @Extend decorator to reuse styles

  5. Multi-device preview shortcut: Ctrl+Shift+M

Conclusion:

These official cases are like martial arts secrets—once mastered, you can truly "write code once and automatically adapt to all devices!" I recommend creating a new project in your IDE and trying out these code snippets yourself. You'll definitely feel like you've unlocked a new level of skill~

If you want to see analysis for other vertical scenarios (such as e-commerce, social apps), feel free to leave a comment! More HarmonyOS development tips will be shared in the future, so remember to follow~ ✨

Top comments (0)