Weex 第二天: Weex实例变量-CSDN博客

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

注意：weex实例变量只在Vue框架中暴露了，目前还不支持在Rax框架中使用。

属性和方法

Weex实例变量的类型定义如下：

declare type Weex = {
  config: WeexConfigAPI;
  document: WeexDocument;
  requireModule: (name: string) => Object | void;
  supports: (condition: string) => boolean | void;
}
复制代码

`weex.config`

该变量包含了当前 Weex 页面的所有环境信息。

declare type WeexConfigAPI = {
  bundleUrl: string;
  bundleType?: string;
  env: WeexEnvironment;
}
复制代码

bundleUrl: 当前页面 js bundle 的 URL 地址。
bundleType: v0.17+ 页面 js bundle 的类型，它表示的是当前页面是用那种框架开发的，可以是 "Vue" 或者 "Rax"。
env: Weex 环境变量。

Weex 环境变量

有时候为了兼容性或者为了增强某个端上的能力，需要编写平台特异的代码。 Weex 提供了 weex.config.env 和全局的 WXEnvironment 变量（它们是等价的）来获取当前执行环境的信息。

weex.config.env === WXEnvironment
复制代码

`weex.document`

weex.document 是当前页面的文档模型对象，可以用来创建和操作 DOM 树中元素。它是 Weex DOM API 规范的一部分，但是它和 W3C 的 DOM 规范中的 document 对象是不同的。

而且，在使用了现代化的前端框架（如 Vue 和 Rax）的情况下，直接操作 DOM 并不是最佳实践。更何况在 Weex 平台里并不一定有真实的 DOM，在 Android 和 iOS 端上都是模拟出来的。

这个接口主要是用在 Vue 和 Rax 框架内部，用于将 virtual-dom 转换成渲染执行，并且发送给 Weex 客户端的渲染引擎。不建议在开发页面时使用。

`weex.requireModule`

对于那些不依赖 UI 交互的原生功能，Weex 将其封装成模块，这是一种通过 javascript 调用原生能力的方法。除了内置模块以外，将已有的原生模块移植到 Weex 平台也很方便。你可以使用 weex.requireModule 接口引用自定义的或者内置的模块。

weex.requireModule(name: string): Object | void;
复制代码

参数：

大小写敏感的模块名。

返回值：

如果模块已经注册了，返回一个 Proxy 对象（如果环境不支持 Proxy 则返回一个普通对象），可以使用这个对象调用客户端注册的方法。
如果模块未注册，返回 undefined。

使用原生模块

你可以像使用不同 javascript 函数一样使用原生注册的接口。这里是一个简单的使用 modal 模块的例子：

<template>
  <div><text>Toast</text></div>
</template>
<script>
  const modal = weex.requireModule('modal')
  modal.toast({
    message: 'I am a toast.',
    duration: 3
  })
</script>
复制代码

weex.supports

这个接口只在 v0.15+ 或以上的版本可用。

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

weex.supports(condition: string): boolean | void;
复制代码

参数：

特定格式的字符串：@{type}/{name}。

type 必须是 "component" 和 "module" 之一。name 可以是标签名、模块名，也可以指定模块中的某个方法名（和模块名用 . 隔开）。

返回值：

支持该特性，则返回 true。
不支持该特性，则返回 false。
参数格式错误或无法确定是否支持，则返回 null。

使用范例

检测某个组件是否可用：

weex.supports('@component/slider') // true
weex.supports('@component/my-tab') // false
复制代码

检测某个模块是否可用：

weex.supports('@module/stream')  // true
weex.supports('@module/abcdef')  // false
复制代码

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

weex.supports('@module/dom.getComponentRect') // true
weex.supports('@module/navigator.jumpToPage') // false
复制代码

无效的输入：

weex.supports('div') // null
weex.supports('module/*') // null
weex.supports('@stream/fetch') // null
weex.supports('getComponentRect') // null
复制代码