应用配置

接口声明

在manifest.json文件的 features属性中增加如下配置。

{"name": "system.configuration"}

导入模块

在调用接口页面的<script>部分增加如下配置。

import configuration from '@system.configuration'

或

const configuration = require("@system.configuration")

使用限制

接口定义

[h2]configuration.getLocale()（1060+）

描述

获取应用当前的语言环境。默认使用系统的语言环境，会随着设置或系统语言环境改变而发生变化。

返回值

示例代码

const locale = configuration.getLocale()
console.log(locale.language)

[h2]configuration.getLayoutDirection()（1070+）

描述

获取当前系统的语言方向。

返回值

示例代码

const dir = configuration.getLayoutDirection()
console.log("direction="+dir)

[h2]configuration.setScreenOrientation(OBJECT)（1070+）

描述

设置屏幕方向。

横竖屏切换后，屏幕宽度会发生变化，导致开发者即使设置相同的尺寸，实际展示会不一致。所以如果使用横竖屏切换，建议使用“响应式布局”进行开发。

参数

示例代码

configuration.setScreenOrientation({
    orientation:"portrait",
    success:function (data) {
        console.log('result:' + data); // success
    },
    fail:function () {
    }
})

[h2]configuration.formatDateAndTime(OBJECT)（1070+，非联盟规范）

描述

基于当前语言环境和设置的格式选项，返回时间戳格式化后的时间字符串。

OBJECT参数

success返回值：

示例代码

var date = Date.now()
configuration.formatDateAndTime({
    timeStamp: date,
    flag: 0x00001 | 0x00002 ,
    success: function(ret){
        console.log(`dateStr= ${ret.dateStr }`)
    }
})

[h2]configuration.simpleFormatDate(OBJECT)（1070+，非联盟规范）

描述

基于当前语言环境和设置的格式选项，返回时间戳格式化后的时间字符串。

OBJECT参数

success返回值：

示例代码

var date = Date.now()
configuration.simpleFormatDate({
    timeStamp: date,
    format:"yyyy年MM月dd日  HH时mm分ss秒",
    success: function(ret){
        console.log(`dateStr= ${ret.dateStr }`)
    }
})

[h2]configuration.getThemeMode()（1083+）

描述

获取应用当前的主题模式。

返回值

返回当前主题模式值，类型为 number，返回值是下表的其中之一：

获取主题模式值有两种情况：

• 如果manifest.json的display属性下的themeMode值为-1（跟随系统主题模式），则此时快应用主题模式会跟随系统主题模式，返回值也跟随系统主题模式，返回0（浅色模式）或1（深色模式）。
• 如果manifest.json的display属性下的themeMode值为0（浅色模式）、1（深色模式）或没有设置（此时主题模式为默认值0（浅色模式）），则此时快应用主题模式会设置为固定模式，返回值会与themeMode值保持一致（没有设置themeMode值则返回 0 ）。

示例代码

const themeMode = configuration.getThemeMode()
console.log(`Theme mode is ${themeMode} now~`)

[h2]configuration.getFoldableState()（1083+）

描述

获取折叠屏的状态。

返回值

示例代码

const foldableState = configuration.getFoldableState();
console.log('foldableState ', foldableState);

[h2]configuration.getScreenOrientation()（1083+）

描述

获取屏幕当前的横竖屏状态。

返回值

示例代码

const orientation = configuration.getScreenOrientation();
console.log('orientation ', orientation);

[h2]configuration.setGrayMode(OBJECT)（1100+）

描述

设置灰色模式相关配置。通过该接口设置的配置项会覆盖manifest中的相应配置。

setGrayMode方法需要在页面渲染前调用。

OBJECT参数

duration参数

返回值

无

示例代码

configuration.setGrayMode({
    enable: true,
    duration:
    {
        regular: ["06/22"],
        temporary: ["2022/06/22"]
    },
    excludedPages: ["Hello/configuration"]
});

configuration.getWideScreenFitMode()（1109+）

描述

获取折叠屏展开时应用页面的满屏或居中状态。

返回值

示例代码

const foldableScreenState = configuration.getWideScreenFitMode();
console.log('foldableScreenState ', foldableScreenState);

Demo

<template>
  <div class="doc-page">
    <div class="item-container">
      <text>getlocallanguage：{{ localeObject.language }}</text>
      <text>getlocalcountryOrRegion：{{ localeObject.countryOrRegion }}</text>
       <text>getLayoutDirection：{{ layoutDirection}}</text>
    </div>

    <div class="item-container">
      <text>{{ messageTip }}</text>
    </div>

    <div class="item-container">
      <input class="btn" type="button" value="Chinese/English switch" onclick="changeLocaleConfiguration" />
    </div>
    <div class="item-container">
      <input class="btn" type="button" value="getLayoutDirection" onclick="getLayoutDirection" />
    </div>
    <div class="item-container">
      <input class="btn" type="button" value="setScreenOrientation" onclick="setScreenOrientation" />
    </div>
    <div class="item-container">
      <input class="btn" type="button" value="formatDateAndTime" onclick="formatDateAndTime" />
    </div>
     <div class="item-container">
      <input class="btn" type="button" value="simpleFormatDate" onclick="simpleFormatDate" />
    </div>
  </div>
</template>

<style lang="less">
 .doc-page{
  flex: 1;
  flex-direction: column;
}

.item-container {
  margin-bottom: 50px;
  margin-right: 60px;
  margin-left: 60px;
  flex-direction: column;
}

.btn {
  height: 80px;
  text-align: center;
  border-radius: 5px;
  margin-right: 60px;
  margin-left: 60px;
  margin-bottom: 50px;
  color: #ffffff;
  font-size: 30px;
  background-color: #0faeff;
}

</style>
<script>
  import configuration from '@system.configuration'
  import prompt from '@system.prompt';
  export default {
    private: {
      localeObject: {},
      messageTip: '',
      layoutDirection:''
    },
    onInit () {
      this.$page.setTitleBar({ text: 'app configuration' })
    },
    onReady () {
      this.localeObject = configuration.getLocale()
      this.layoutDirection = configuration.getLayoutDirection()
    },
    onConfigurationChanged (evt) {
      console.info(`onConfigurationChanged：${evt.type}`)

      this.messageTip = `onConfigurationChange：${(new Date()).toTimeString().split(' ')[0]}`
      this.localeObject = configuration.getLocale()
      this.layoutDirection = configuration.getLayoutDirection()
    },
    changeLocaleConfiguration () {
      if (this.localeObject.language === 'zh') {
        console.info('Updated to English Locale')

        configuration.setLocale({
          language: 'en',
          countryOrRegion: 'US'
        })
      }
      else {
        console.info('Updated to Chinese Locale')

        configuration.setLocale({
          language: 'zh',
          countryOrRegion: 'CN'
        })
      }
    },
    getLocaleConfiguration() {
      const locale = configuration.getLocale()
    },
    getLayoutDirection(){
      this.layoutDirection = configuration.getLayoutDirection()
       prompt.showToast({
            message: this.layoutDirection,
            duration: 2000,
            gravity: 'bottom'
          });
    },
    setScreenOrientation() {
          configuration.setScreenOrientation({
            orientation: "portrait",
            success: function (data) {
              console.log('result:' + data); // success
              prompt.showToast({
                   message: data,
                   duration: 2000,
                   gravity: 'bottom'
          });
            },
            fail: function () {
            }
          })
        },
        formatDateAndTime() {
              var date = Date.now()
              configuration.formatDateAndTime({
                timeStamp: date,
                flag: 0x00001 | 0x00002,
                success: function (ret) {
                  console.log(`dateStr= ${ret.dateStr}`)
                  prompt.showToast({
                   message: ret.dateStr,
                   duration: 2000,
                   gravity: 'bottom'
          });
                }
              })
        },
        simpleFormatDate() {
              var date = Date.now()
              configuration.simpleFormatDate({
                timeStamp: date,
                format: "yyyy年MM月dd日  HH时mm分ss秒",
                success: function (ret) {
                  console.log(`dateStr= ${ret.dateStr}`)
                  prompt.showToast({
                   message: ret.dateStr,
                   duration: 2000,
                   gravity: 'bottom'
          });
                }
              })
            }
  }
</script>

效果图如下：

版本更新说明

相关链接

[h2]案例

初始化页面时，调用configuration.setLocale()不生效