There is an independent Weex variable in the JS context of each Weex page, which can be used like a global variable, but is isolated and read-only across different pages.

Note: WeeX instance variables are only exposed in the Vue framework and are not currently supported in the Rax framework.

Properties and methods

The Weex instance variable types are defined as follows:

declare type Weex = {
  config: WeexConfigAPI;
  document: WeexDocument;
  requireModule: (name: string) => Object | void;
  supports: (condition: string) => boolean | void;
}
Copy the code

weex.config

This variable contains all environment information about the current Weex page.

declare type WeexConfigAPI = { bundleUrl: string; bundleType? : string; env: WeexEnvironment; }Copy the code
  • bundleUrl: URL of the current page js bundle.
  • bundleTypeV0.17 + the type of the page js bundle, which indicates which framework the page is being developed with"Vue"or"Rax".
  • env: Weex environment variable.

Weex environment variables

Sometimes you need to write platform-specific code for compatibility or to enhance capabilities on one end. Weex provides weex.config.env and the global WXEnvironment variable (which are equivalent) to get information about the current execution environment.

weex.config.env === WXEnvironment
Copy the code

weex.document

Weex.document is a document model object for the current page that can be used to create and manipulate elements in the DOM tree. It is part of the Weex DOM API specification, but it is different from the DOCUMENT object in the W3C DOM specification.

Furthermore, in the case of modern front-end frameworks such as Vue and Rax, direct manipulation of the DOM is not a best practice. Not to mention the Weex doesn’t necessarily have a real DOM, it is simulated on both Android and iOS.

This interface is mainly used within the Vue and Rax frameworks to convert virtual-DOM into rendering execution and send it to the Weex client rendering engine. It is not recommended when developing pages.

weex.requireModule

For native functionality that does not rely on UI interaction, Weex encapsulates it as a module, which is a way to invoke native capabilities through javascript. In addition to built-in modules, it is also easy to port existing native modules to Weex platforms. You can reference custom or built-in modules using the weex.Requiremodule interface.

weex.requireModule(name: string): Object | void;
Copy the code

Parameters:

  • Case sensitive module name.

The return value:

  • If the module is registered, it returns a Proxy object (or a normal object if the environment does not support Proxy) that you can use to invoke the client-registered methods.
  • Return undefined if the module is not registered.

Using native modules

You can use the native registered interface just as you would any other javascript function. Here is a simple example of using the Modal module:

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

weex.supports

This interface is only available in v0.15+ or later.

You should be aware that Weex components and modules can be registered and configured. As a result, components and modules are supported differently in different environments. You can use the WEEx. supports interface to check at run time whether a feature is available in the current environment.

weex.supports(condition: string): boolean | void;
Copy the code

Parameters:

  • A string of a specific format:@{type}/{name}.

Type must be either “Component” or “module”. The name can be the tag name, the module name, or the name of a method in the module. Separated).

The return value:

  • If this feature is supported, thetrue.
  • Returns if the feature is not supportedfalse.
  • Parameter format is incorrect or support cannot be determinednull.

Use examples

Check whether a component is available:

weex.supports('@component/slider') // true
weex.supports('@component/my-tab') // false
Copy the code

Check whether a module is available:

weex.supports('@module/stream')  // true
weex.supports('@module/abcdef')  // false
Copy the code

Check whether a module contains a method:

weex.supports('@module/dom.getComponentRect') // true
weex.supports('@module/navigator.jumpToPage') // false
Copy the code

Invalid input:

weex.supports('div') // null
weex.supports('module/*') // null
weex.supports('@stream/fetch') // null
weex.supports('getComponentRect') // null
Copy the code