DEV Community

陈杨
陈杨

Posted on

Hong Mong 5 development treasure case share more development examples (short video)

🌟【Dry Goods Alert】I found a treasure in the HarmonyOS developer documentation today! It turns out the official docs have long hidden so many practical "one-to-many development" cases. No wonder I always struggled with cross-device adaptation before... Here are the latest short video development secrets I discovered, teaching you step by step how to use one set of code for phones/tablets/foldables!

1. Opening Chat

Recently, I've been fascinated by HarmonyOS's "develop once, deploy everywhere" concept, but always felt the docs were too abstract. Until I found this "Short Video Full Process Case" in the official docs—wow! Turns out those tricky responsive layouts and device adaptations already have ready-made templates! Today, let's break down this treasure case. After reading, you'll definitely say: cross-device development can be this easy!

2. Core Case Playbook

📱 Three Key Device Adaptation Tricks

  1. Grid Layout: Use GridRow+GridCol for magical auto-adaptation 
GridRow({ columns: { sm: 4, md: 8, lg: 12 } }) { // Define different grids for different devices
  GridCol({ span: { sm:4, md:2, lg:3 } }) { // Element span auto-adjusts
    VideoPlayer()
  }
}
Enter fullscreen mode Exit fullscreen mode
  1. Breakpoint Listening: Automatically trigger layout regrouping when device size changes 
const breakpoint = BreakpointSystem.getBreakpoint() // Get device type in real time
if(breakpoint === 'sm') { 
  Show bottom navigation bar 
} else {
  Switch to sidebar mode
}
Enter fullscreen mode Exit fullscreen mode
  1. Component Morphing: The same component transforms on different devices
  2. Phone: Comment popup rises from the bottom
  3. Tablet: Comment area expands directly on the right
  4. Foldable: Automatically splits screen when unfolded

🎬 Short Video Scenario Practice

Browsing Page Layout Secrets (Phone vs Tablet):

  • Phone portrait: Fullscreen video + floating bottom action bar
  • Tablet landscape: Left navigation tree + right video waterfall flow
  • Foldable unfolded: Automatically switches to left-right split mode

Comment Module Black Tech:

// One component, two forms
@BuilderCommentPanel(){
  if(deviceType === 'phone'){
    Semi-modal popup()
  } else {
    Fixed side panel()
  }
}
Enter fullscreen mode Exit fullscreen mode

3. Hidden Tips

Official docs don't explicitly mention these tricks:

  1. Adaptive Animations: Parallax scrolling on tablets, auto-switch to lightweight fade-in on phones
  2. Smart Hot Zone Scaling: Large clickable areas on tablets, auto-split into multi-gesture zones on unfolded foldables
  3. On-Demand Resource Loading: Default to SD covers on phones, preload HD resources when WiFi is detected

4. Other Treasure Cases

Here are a few more awesome cases:

  1. Smart Home Control Panel: One codebase for phone/watch/smart screen
  2. In-car App Adaptation: Layout persistence when switching between landscape and portrait
  3. Sports & Health App: Detailed data charts on phone, auto-condensed to ring progress bar on watch

5. Pitfalls Summary

Three days of hard-earned lessons:

  1. Don't hardcode sizes in .ets files! Use vp/vf units instead
  2. For foldable adaptation, be sure to handle cache sync for both "unfolded/folded" states
  3. When debugging on multiple devices, use the previewer to quickly switch breakpoints first—don't waste time on real device testing

6. Conclusion

One last heartfelt word: mastering HarmonyOS's "one-to-many" development system early is a huge advantage! After all, full-stack developers who can work across phone/car/smart home are getting 30% higher offers from recruiters... That's all for now, back to coding! Any questions, see you in the comments~ 💪

Top comments (0)