# 环境变量 - 《eeui 开发文档帮助手册教程》

EEUI.APP 首页 - 指南 - 组件 - 模块 - 插件市场 - 开发文档热更新控制台 Editor 例子社区

首页 - 指南 - 组件 - 模块 - 插件市场 - 开发文档热更新控制台 Editor 例子社区

- 起步 - 框架介绍 - 搭建环境 - 创建项目 - 配置相关 - 开发调试 - 上手 - 使用 Vue.js - 平台差异 - 环境变量 - WXEnvironment - document - requireModule - supports - isRegisteredModule - isRegisteredComponent - 生命周期 - 跨页面通信 - appboard - 应用图标 - 启动图片 - 应用设置 - 升级程序 - 样式 - 通用样式 - 文本样式 - CSS 单位 - 颜色值 - 事件 - 通用事件 - 事件冒泡 - 手势

# # 环境变量 ## # WXEnvironment 每个 eeui 页面的 JS 上下文中都有一个相互独立的 eeui 变量，它可以像全局变量一样使用，不过它在不同页面中是隔离而且只读的。 eeui 环境变量中的字段:

字段名	类型	描述
`WXEnvironment.platform`	String	运行平台，Android 或者 iOS。
`WXEnvironment.appName`	String	应用的名称
`WXEnvironment.appVersion`	String	应用的版本。
`WXEnvironment.osName`	String	系统的名称，Android 或者 iOS。
`WXEnvironment.osVersion`	String	系统版本。
`WXEnvironment.deviceModel`	String	手机设备型号。
`WXEnvironment.deviceWidth`	Number	设备宽度。
`WXEnvironment.deviceHeight`	Number	设备高度。

### # 例子：

<template>
  <div>
    <text class="text">当前手机型号为：{{model}}</text>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        model: WXEnvironment.deviceModel
      }
    }
  }
</script>
<style scoped>
  .text {
    font-size: 38px;
    color: #00B4FF;
  }
</style>

## # document app.document 是当前页面的文档模型对象，可以用来创建和操作 DOM 树中元素。它是 eeui DOM API 规范的一部分，但是它和 W3C 的 DOM 规范中的 document 对象是不同的。而且，在使用了现代化的前端框架（如 Vue 和 Rax）的情况下，直接操作 DOM 并不是最佳实践。更何况在 eeui 平台里并不一定有真实的 DOM，在 Android 和 iOS 端上都是模拟出来的。这个接口主要是用在 Vue 和 Rax 框架内部，用于将 virtual-dom 转换成渲染执行，并且发送给 eeui 客户端的渲染引擎。不建议在开发页面时使用。 ## # requireModule 对于那些不依赖 UI 交互的原生功能，eeui 将其封装成模块，这是一种通过 javascript 调用原生能力的方法。除了内置模块以外，将已有的原生模块移植到 eeui 平台也很方便。你可以使用 app.requireModule 接口引用自定义的或者内置的模块。

app.requireModule(name: string): Object | void;

参数： - 大小写敏感的模块名。 返回值： - 如果模块已经注册了，返回一个 Proxy 对象（如果环境不支持 Proxy 则返回一个普通对象），可以使用这个对象调用客户端注册的方法。 - 如果模块未注册，返回 undefined。 ### # 使用原生模块你可以像使用不同 javascript 函数一样使用原生注册的接口。这里是一个简单的使用eeui 模块的例子：

<template>
  <div><text>Toast</text></div>
</template>
<script>
  const eeui = app.requireModule('eeui');
  eeui.toast({
      message: 'I am a toast.',
      gravity: 'middle'
  });
</script>

## # supports 你应该了解 eeui 的组件和模块都是可以注册和配置的，这样导致了在不同环境中组件和模块的支持情况不一样。你可以使用 app.supports 接口在运行期检测某个功能在当前环境中是否可用。

app.supports(condition: string): boolean | void;

参数： - 特定格式的字符串：@{type}/{name}。 type 必须是 "component" 和 "module" 之一。name 可以是标签名、模块名，也可以指定模块中的某个方法名（和模块名用 . 隔开）。 返回值： - 支持该特性，则返回 true。 - 不支持该特性，则返回 false。 - 参数格式错误或无法确定是否支持，则返回 null。 ### # 使用范例检测某个组件是否可用：

app.supports('@component/slider') // true
app.supports('@component/my-tab') // false

检测某个模块是否可用：

app.supports('@module/stream')  // true
app.supports('@module/abcdef')  // false

检测某个模块是否包含某个方法：

app.supports('@module/dom.getComponentRect') // true
app.supports('@module/navigator.jumpToPage') // false

无效的输入：

app.supports('div') // null
app.supports('module/*') // null
app.supports('@stream/fetch') // null
app.supports('getComponentRect') // null

## # isRegisteredModule 检测某个特定的模块或者接口是否可用。

app.isRegisteredModule(moduleName: string, methodName: string): boolean

这个接口只能用于检测特定模块和方法的兼容性，不支持检测组件。

app.isRegisteredModule('stream') // true
app.isRegisteredModule('stream', 'fetch') // true
app.isRegisteredModule('whatever', '- unknown -') // false
app.isRegisteredModule('div') // false, not support components

## # isRegisteredComponent 检测某个特定的组件是否可用。

app.isRegisteredComponent(componentName: string): boolean

这个接口只能用于检测组件的兼容性，不支持检测模块。

app.isRegisteredComponent('div') // true
app.isRegisteredComponent('- unknown -') // false
app.isRegisteredComponent('navigator') // false, not support modules

在 GitHub 上编辑此页

最后一次更新: 6/7/2019, 8:03:58 AM

← 平台差异生命周期 →