.equals() for string comparison, not ==// Basic component
@Entry
@Component
struct Index {
@State message: string = 'Hello World'
build() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
}
.alignItems(HorizontalAlign.Center)
.width('100%')
.height('100%')
}
}
// @State - Component internal state
@State count: number = 0
// @Prop - Parent component prop
@Prop message: string
// @Link - Two-way binding
@Link childCount: number
// @Observed + @ObjectLink - Deep observation
@Observed
class Person {
name: string = ''
age: number = 0
}
@ObjectLink person: Person
// Component lifecycle
aboutToAppear() {} // About to display
onDidBuild() {} // Build complete
aboutToDisappear() {} // About to destroy
// Linear layout
Column() { } // Vertical
Row() { } // Horizontal
// Flex layout
Flex() {
direction: FlexDirection.Row
}
// Grid layout
Grid() {
columnsTemplate: '1fr 1fr 1fr'
}
// Stack
Stack() { }
import router from '@ohos.router'
// Navigate
router.pushUrl('pages/Detail')
// Go back
router.back()
// With params
router.pushUrl({
url: 'pages/Detail',
params: { id: 123 }
})
// Get params
const params = router.getParams()
import http from '@ohos.net.http'
let httpRequest = http.createHttp()
httpRequest.request(
'https://api.example.com/data',
{
method: http.RequestMethod.GET,
header: { 'Content-Type': 'application/json' }
},
(err, data) => {
if (!err) {
console.log(JSON.stringify(data.result))
}
}
)
import preferences from '@ohos.data.preferences'
// Write
let preferences = await preferences.getPreferences(context, 'myPrefs')
await preferences.put('username', 'tom')
await preferences.flush()
// Read
let value = await preferences.get('username', 'default')
import abilityAccessCtrl from '@ohos.abilityAccessCtrl'
// Declare in module.json5
// "requestPermissions": [
// { "name": "ohos.permission.INTERNET" }
// ]
// Request at runtime
let atManager = abilityAccessCtrl.createAtManager()
atManager.requestPermissionsFromUser(context, ['ohos.permission.INTERNET'])
ohos.permission.INTERNET - Network accessohos.permission.GET_NETWORK_INFO - Network statusohos.permission.CAMERA - Camera accessohos.permission.WRITE_MEDIA - Media writeohos.permission.READ_MEDIA - Media readProject Structure → Signing Configs.p12 certificate and .cer public key| Need | Solution |
|---|---|
| ------ | ---------- |
| State management | @State, @Prop, @Link, @Observed |
| Lists | List + ListItem |
| Network | @ohos.net.http |
| Storage | @ohos.data.preferences |
| Routing | router.pushUrl() |
| Toast | promptAction.showToast() |
| Dialog | dialog.showDialog() |
Keep the sections above as the fast reference layer. Use the guidance below when the task involves a real repository instead of isolated code snippets.
Before changing code, inspect the real project structure:
AppScope/app.json5src/main/module.json5oh-package.json5build-profile.json5hvigorfile.ts or hvigorfile.jssrc/main/etsStart by answering:
@kit. or @ohos.?Unless the repository clearly uses an older pattern, treat it as a Stage model project.
Check these first:
UIAbilityEntryAbilityWindowStagemodule.json5White screens, startup failures, and route bugs are often caused by incorrect entry, registration, or lifecycle assumptions rather than bad UI code.
build() as pure as possible.build().Classify the task before editing:
@State, @Prop, @Link, @Observed, @ObjectLink, AppStorage, and PersistentStorage before changing UI code.UIAbility, module.json5, route paths, params shape, and launch mode before changing pages.Prefer this order:
./hvigorwohpmhdcSafe default command directions:
ohpm install
./hvigorw clean
./hvigorw assembleHap
If the repository provides a higher-level script, use the repository script first.
When debugging, use this order:
When finishing a task, report:
Preferred format:
entrysrc/main/ets/pages/Index.etsEntryAbility.etsmodule.json5./hvigorw assembleHapThe sections above remain the original fast-reference layer. The additions below extend that material with guidance aligned to current official HarmonyOS documentation.
Navigation component path for modern ArkTS page flow.@ohos.router as not recommended.router.pushUrl() and related APIs everywhere, preserve repository consistency unless the task is an intentional migration.Navigation, NavPathStack, or a wrapper built on top of them before adding new routing code.Practical extension rule:
Navigation-based patternUIAbility lifecycle from display-related window lifecycle.UIAbility lifecycle focuses on create, destroy, foreground, and background transitions.WindowStage callbacks and setup flow.UIAbility entry and the window-stage setup path instead of only reading page-level ArkUI code.Recommended inspection order:
EntryAbility.etsonWindowStageCreateaboutToAppear() and related UI logicOfficial state-management docs distinguish several storage scopes. Choose the smallest scope that fits the requirement:
LocalStorage: page-level UI state storage, suitable for state sharing within a page scope and closely related pages in the same UIAbility.AppStorage: application-global UI state storage. Official docs describe it as a special singleton LocalStorage object created by the framework at app startup.PersistentStorage: persists selected AppStorage properties so they survive application restarts.Preferences: lightweight key-value persistence for configuration and small local values.Practical extension rule:
LocalStorage or AppStoragePersistentStoragePreferences@Component and many familiar decorators belong to the V1-style custom component model.Practical extension rule:
Official ArkUI docs emphasize several reuse patterns:
@Builder: reusable UI construction blocks@BuilderParam: passing builder logic into components@Styles: reusable style blocks@Extend: extending component style capabilityUse them when:
Avoid forcing them when:
Preferences as lightweight persistence rather than a general-purpose database.Preferences into a catch-all storage layer for large structured data.Before finalizing a HarmonyOS change, ask:
Navigation or router-based flow?UIAbility and WindowStage before blaming page code?Preferences only for lightweight persisted data?If the task depends on current best practice rather than just matching an old repository, revisit official docs for:
AppStorage and PersistentStoragePreferencesmodule.json5 和构建链路。build() 里尽量不要做副作用。Navigation，@ohos.router 在新文档里已经标成不推荐。UIAbility 生命周期和 WindowStage 的显示/加载链路要分开理解。LocalStorage、AppStorage、PersistentStorage、Preferences 要按职责使用，不要混用。共 2 个版本