arkts-environment.md 2.9 KB
Newer Older
E
ester.zhou 已提交
1 2 3 4 5 6 7 8 9 10 11 12 13 14
# Environment: Device Environment Query


You may want your application to behave differently based on the device environment where the application is running, for example, switching to dark mode or a specific language. In this case, you need Environment for device environment query.


Environment is a singleton object created by the ArkUI framework at application start. It provides a range of application state attributes to AppStorage that describe the device environment in which the application is running. Environment and its attributes are immutable. All property values are of simple type only.


## Application Scenarios


### Accessing Environment Parameters from UI

E
ester.zhou 已提交
15
- Use **Environment.envProp** to save the environment variables of the device to AppStorage.
E
ester.zhou 已提交
16 17

  ```ts
E
ester.zhou 已提交
18
  // Save languageCode to AppStorage. The default value is en.
E
ester.zhou 已提交
19
  Environment.envProp('languageCode', 'en');
E
ester.zhou 已提交
20 21
  ```

E
ester.zhou 已提交
22
- Decorate the variables with \@StorageProp to link them with components.
E
ester.zhou 已提交
23 24 25 26 27 28 29 30

  ```ts
  @StorageProp('languageCode') lang : string = 'en';
  ```

The chain of updates is as follows: Environment > AppStorage > Component.

> **NOTE**
E
ester.zhou 已提交
31
>
E
ester.zhou 已提交
32 33 34 35 36
> An \@StorageProp decorated variable can be locally modified, but the change will not be updated to AppStorage. This is because the environment variable parameters are read-only to the application.


```ts
// Save the device language code to AppStorage.
E
ester.zhou 已提交
37 38
Environment.envProp('languageCode', 'en');
let enable: undefined = AppStorage.get<undefined>('languageCode');
E
ester.zhou 已提交
39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61

@Entry
@Component
struct Index {
  @StorageProp('languageCode') languageCode: string = 'en';

  build() {
    Row() {
      Column() {
        // Output the current device language code.
        Text(this.languageCode)
      }
    }
  }
}
```


### Using Environment in Application Logic


```ts
// Use Environment.EnvProp to save the device language code to AppStorage.
E
ester.zhou 已提交
62
Environment.envProp('languageCode', 'en');
E
ester.zhou 已提交
63
// Obtain the one-way bound languageCode variable from AppStorage.
E
ester.zhou 已提交
64
const lang: SubscribedAbstractProperty<string> = AppStorage.prop('languageCode');
E
ester.zhou 已提交
65 66 67 68 69 70 71

if (lang.get() === 'en') {
  console.info('Hi');
} else {
  console.info('Hello!');
}
```
E
ester.zhou 已提交
72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91


## Restrictions


Environment can be called only when the [UIContext](../reference/apis/js-apis-arkui-UIContext.md#uicontext), which can be obtained through [runScopedTask](../reference/apis/js-apis-arkui-UIContext.md#runscopedtask), is specified. If Environment is called otherwise, no device environment data can be obtained.


```ts
// EntryAbility.ts
import UIAbility from '@ohos.app.ability.UIAbility';
import window from '@ohos.window';

export default class EntryAbility extends UIAbility {
  onWindowStageCreate(windowStage: window.WindowStage) {
    windowStage.loadContent('pages/Index');
    let window = windowStage.getMainWindow()
    window.then(window => {
      let uicontext = window.getUIContext()
      uicontext.runScopedTask(() => {
E
ester.zhou 已提交
92
        Environment.envProp('languageCode', 'en');
E
ester.zhou 已提交
93 94 95 96 97
      })
    })
  }
}
```