DEV Community

陈杨
陈杨

Posted on

Treasure Case Sharing of HarmonyOS 5 Development — One-to-Many Development Example (Shopping Price Comparison)

[HarmonyOS Development Treasure Case Revealed!] Step-by-Step Guide to Building a Cross-Platform Shopping Price Comparison App with "One-to-Many" Capability

Hello friends! Today, I'm excited to share a hidden gem in HarmonyOS development—the official shopping price comparison app case! This hands-on tutorial, tucked away in the developer docs, is truly the ultimate guide to mastering multi-device development!

👉 1. These Features Are So Cool!
This case perfectly demonstrates HarmonyOS's superpower of "develop once, deploy everywhere." Check out these awesome features you need to know:

  1. Smart Split-Screen Price Comparison (Exclusive for Foldable Devices) When you open a product detail page on a foldable device, it magically displays two products side by side:
  2. Effortlessly swipe to compare parameters
  3. Launch split-screen mode via UIAbility
  4. 1:1 golden ratio layout for left and right screens 
// Start split-screen magic
let want = {
  bundleName: 'com.huawei.multishopping',
  abilityName: 'SecondAbility'
};
startAbility(want, { windowMode: WINDOW_MODE_SPLIT_PRIMARY });
Enter fullscreen mode Exit fullscreen mode
  1. Live Picture-in-Picture (Ultimate Multitasking Tool) When you close the live stream, it automatically shrinks into a floating window:
  2. Use PiPWindow controller
  3. Supports play/pause operations
  4. Smart floating window positioning 
// Create picture-in-picture
PiPWindow.create({
  componentController: videoController,
  templateType: PiPTemplateType.VIDEO_LIVE
}).then(controller => {
  controller.startPiP(); // Start mini player
});
Enter fullscreen mode Exit fullscreen mode

  1. Smart Layout Transformation
    The homepage adapts to different devices:
    | Device Type | Layout Features |
    |-------------|----------------|
    | Phone | Two-row tabs + waterfall flow |
    | Tablet | Side navigation + split view |
    | PC | Three-column professional mode |

  2. Adaptive Payment Popup

  3. Phone: Bottom half-screen popup

  4. Tablet: Centered floating window

  5. Code sharing rate up to 90%!

// Adaptive popup
if(breakpoint == 'sm'){
  bindBottomSheet(); // Bottom popup for phones
}else{
  showCenterDialog(); // Centered dialog for large screens
}
Enter fullscreen mode Exit fullscreen mode

👉 2. Development Pitfalls Guide (Lessons Learned)
When replicating the official case, keep these key points in mind:

  1. Three Layout Principles
  2. Grid system: Use % instead of fixed px
  3. Breakpoint monitoring: @ohos.mediaquery is your best friend

  4. Weighted layout: Use layoutWeight for proportional distribution

  5. State Management Secrets

  6. Use AppStorage for cross-device state sync

  7. Use LocalStorage for page parameter passing

  8. For complex interactions, use @Observed objects

  9. Resource Adaptation Tips

resources/
   ├─base/        # Common resources
   ├─phone/       # Phone-specific icons
   ├─tablet/      # Tablet stylesheets
   └─pc/          # PC high-res assets
Enter fullscreen mode Exit fullscreen mode
  1. Performance Optimization Focus
  2. Always use cachedCount for list item reuse
  3. Use PixelMap for image loading
  4. Run complex animations on GPU for acceleration

👉 3. More Awesome Cases
Besides the shopping app, these official cases are also worth checking out:

  1. Short Video App: Gesture switching + preloading
  2. News Reader: Smart split view + night mode
  3. Smart Home Panel: 3D rotation control
  4. Health Assistant: Adaptive charts + data sync

🎉 Conclusion:
Feeling inspired to try it out? This case is like a Lego set for multi-device development—break down each module and reassemble them to build all kinds of amazing apps. I recommend reading the docs while coding, and if you hit a snag, join the developer community for help (psst, the official PMs often answer questions there!).

Here's a final tip: The HarmonyOS ecosystem is booming—now is the best time to get on board! Which case do you want me to break down next? Let me know in the comments~ ✨

Top comments (0)