DEV Community

ι™ˆζ¨
ι™ˆζ¨

Posted on

Hong Mong 5 Development Treasure Case Share More Development Examples (Convenient Living)

🌟 HarmonyOS Multi-Device Development Ultimate Guide | From Beginner to Pro + 20 High-Frequency Scenarios Explained 🌟

Hey HarmonyOS warriors! Last time you said the examples were "too short, not satisfying enough"? This time, here comes the real deal! After 3 days of hard work, this guide includes 8 major vertical scenarios + 20 core tips + 50+ code snippets to help you master the "multi-device" magic of HarmonyOS! πŸš€

🎯 Table of Contents (Highly Recommended to Bookmark)

  1. Why does your multi-device adaptation always fail?
  2. Four Principles of Multi-Device Development (with Pitfall Checklist)
  3. Dissecting 8 High-Frequency Scenarios (Code-Level Details)
  4. Must-Have Developer Toolchain (Efficiency Boosting Secrets)
  5. Q&A: Most Asked Questions from the Comments

πŸ”₯ Part 1: Real-World Multi-Device Fails & Rescue Guide

πŸ‘‰** Classic Failure Cases:**

  • Foldable screen layout breaks after unfolding? Problem code: width: 100% hardcoded β†’ Large screen has too much blank space Solution: Use a grid breakpoint system for dynamic calculation: 
// Get current device breakpoint
@StorageLink('currentBreakpoint') currentBreakpoint: string = 'md';

// Dynamic width calculation
getColumnWidth(): number {
  switch(this.currentBreakpoint) {
    case 'sm': return 100%;
    case 'md': return '50%';
    case 'lg': return '33.3%';
  }
}
Enter fullscreen mode Exit fullscreen mode
  • PC mouse hover effects go crazy on mobile? Trap: Directly using CSS :hover β†’ Long press on mobile triggers by mistake Solution: Device type detection + interaction branching 
if (deviceType === 'phone') {
  // Use click to expand
  .onClick(() => this.showDetails())
} else {
  // Keep hover for PC
  .onHover(() => this.showTooltip())
}
Enter fullscreen mode Exit fullscreen mode

πŸ›  Part 2: 8 Scenario Code Breakdowns (with GIF Demos)

Scenario 1: Product Detail Page (Phone vs Tablet vs PC)

  • Phone pain point: Portrait space is tight β†’ Thumbnails need sliding/stretching
  • Tablet trick: Left-right split + drag interaction 
// Gesture drag to change sidebar width
@State sidebarWidth: number = 300;

Column()
  .width(this.sidebarWidth)
  .gesture(
    PanGesture({ fingers: 1 })
      .onActionUpdate((event: GestureEvent) => {
        this.sidebarWidth += event.offsetX;
      })
  )
Enter fullscreen mode Exit fullscreen mode
  • PC exclusive: Three-column layout (main image + specs + recommended products)

Scenario 2: Live Streaming Page Multi-Device Adaptation (Immersive vs Split-Screen)

  • Phone solution:
    • Background blur + floating comments β†’ **Stack layout**+**BlurEffect** 
Stack() {
  VideoPlayer()
  DanmuList()
    .position({ x: 20, y: '80%' })
}
.backgroundBlurStyle(BlurStyle.Thin)
Enter fullscreen mode Exit fullscreen mode
  • Tablet/PC solution:
    • Picture-in-picture + real-time data dashboard β†’ **Grid layout**+WebSocket data stream

Scenario 3: Image & Text Detail Page (E-commerce/News Killer Feature)

  • Core requirements:
    • Images support pinch-to-zoom + immersive browsing 
Image($r('app.media.product'))
  .gesture(
    PinchGesture()
      .onActionUpdate((event: GestureEvent) => {
        this.scale = event.scale;
      })
  )
  .scale({ x: this.scale, y: this.scale })
Enter fullscreen mode Exit fullscreen mode
  • Multi-device strategy:
    • Phone: Image above, text below + collapsible bottom action bar
    • Tablet: Image left, text right + floating directory navigation
    • PC: Three-column linkage (directory/main content/recommendations)

Scenario 4: Movie Ticketing Page (Cross-Device Seat Selection Logic)

  • Phone:
    • Vertical seat map + pinch-to-zoom 
SeatMap()
  .gesture(
    PinchGesture()
      .onActionUpdate((e) => this.zoomLevel = e.scale)
  )
Enter fullscreen mode Exit fullscreen mode
  • Tablet:
    • Landscape split-screen (seat selection + session info + payment QR code on the same screen)
  • Pitfall focus: Seat status sync β†’ Use AppStorage to sync selected state across pages

Scenario 5: Community Waterfall Flow (Performance Optimization Special)

  • Fatal trap: Rendering 1000+ posts directly β†’ Memory explosion
  • Savior solution: **LazyForEach**+ dynamic pagination loading 
LazyForEach(this.dataSource, (item) => {
  DynamicCard(item)
}, (item) => item.id)
Enter fullscreen mode Exit fullscreen mode
  • Multi-device layout:
    • Phone: Single column
    • Tablet: Double column + smart blank fill (Blank component)
    • PC: Three columns + floating sidebar

⚑ Part 3: Developer Efficiency Toolbox

1. Layout Debugging Tool

  • Real-time preview: Previewer multi-device synchronous rendering
  • Hot reload tip: Instant refresh after code changes (no need to recompile!) 
# Start hot reload
npm run dev -- --watch
Enter fullscreen mode Exit fullscreen mode

2. Multi-Device Logic Branching Secrets

  • Conditional compilation: One codebase for different device logic 
// #ifdef PHONE
Phone-specific code
// #endif

// #ifdef TABLET
Tablet-specific code
// #endif
Enter fullscreen mode Exit fullscreen mode

3. Performance Monitoring Trio

  • Memory leak detection: 
// Release resources in aboutToDisappear
aboutToDisappear() {
  this.timer?.destroy()
}
Enter fullscreen mode Exit fullscreen mode
  • FPS monitoring: Built-in performance analyzer in DevEco Studio

❓ Part 4: Selected Q&A

Q: How to make components automatically wrap on different devices?

A: Use FlexWrap.Wrap + breakpoint control:

Flex({ wrap: this.currentBreakpoint === 'sm' ? FlexWrap.Wrap : FlexWrap.NoWrap })
Enter fullscreen mode Exit fullscreen mode

Q: Layout messes up when tablet switches between portrait and landscape?

A: Listen to screen orientation change event:

window.on('orientationchange', (newOrientation) => {
  this.orientation = newOrientation;
});
Enter fullscreen mode Exit fullscreen mode

Q: How to handle multi-language adaptation?

A: Separate resource files + automatic device language matching:

// Chinese resource file
{
  "appName": "My App"
}

// English resource
{
  "appName": "My App"
}

// Usage
Text($r('app.string.appName'))
Enter fullscreen mode Exit fullscreen mode

🚨 Ultimate Pitfall Warnings

  1. Don't use absolute positioning: position: absolute is poison for cross-device adaptation!
  2. Avoid fixed sizes: width: 300px β†’ Use vp or % instead
  3. Be careful with platform APIs: Always check if the device supports the hardware feature before calling: 
if (system.geolocation) {
  // Only execute if the device supports geolocation
}
Enter fullscreen mode Exit fullscreen mode

🌈 Conclusion

After reading this 20,000-word guide, does "multi-device development" suddenly seem more appealing? Actually, there are even more treasure cases hidden in the official docs (Path: Developer Docs β†’ Sample Center β†’ Search "multi-device").

Next time you encounter a problem, remember these three steps:

  1. Ctrl+F to search official cases
  2. Breakpoint debugging magic
  3. Ask the community

Top comments (0)