Wxs Module

WXS code can be written in the <wxs> tag in the wxml file, or in a file with the suffix .wxs.

Wxs Module

Each .wxs file and <wxs> tag is a separate module.

Each module has its own independent scope. That is, the variables and functions defined in a module are private by default and invisible to other modules.

If a module wants to expose its internal private variables and functions to the outside world, it can only be achieved through module.exports.

.wxs File

In the developer tool, you can directly create a .wxs file by right-clicking and write a WXS script directly in it.

Sample code:

// /pages/comm.wxs

var foo = "'hello world' from comm.wxs";
var bar = function(d) {
  return d;
}
module.exports = {
  foo: foo,
  bar: bar
};

The above example writes WXS code in the file /pages/comm.wxs. This .wxs file can be referenced by other .wxs files or the <wxs> tag in WXML.

module Object

Each wxs module has a built-in module object.

Properties

exports:Through this property, private variables and functions of this module can be shared externally.

Sample code:

// /pages/tools.wxs

var foo = "'hello world' from tools.wxs";
var bar = function (d) {
  return d;
}
module.exports = {
  FOO: foo,
  bar: bar,
};
module.exports.msg = "some msg";

<!-- page/index/index.wxml -->

<wxs src="./../tools.wxs" module="tools" />
<view> {{tools.msg}} </view>
<view> {{tools.bar(tools.FOO)}} </view>

Page output:

some msg
'hello world' from tools.wxs

require function

To reference other wxs file modules in a .wxs module, you can use the require function.

When referencing, pay attention to the following points:

• You can only reference .wxs file modules, and you must use relative paths;

• wxs modules are all singletons. When a wxs module is referenced for the first time, it will automatically initialize to a singleton object. Multiple pages, multiple places, and multiple references all use the same wxs module object;

If a wxs module has not been referenced after its definition, the module will not be parsed and run.

Sample code:

// /pages/tools.wxs

var foo = "'hello world' from tools.wxs";
var bar = function (d) {
  return d;
}
module.exports = {
  FOO: foo,
  bar: bar,
};
module.exports.msg = "some msg";

// /pages/logic.wxs

var tools = require("./tools.wxs");

console.log(tools.FOO);
console.log(tools.bar("logic.wxs"));
console.log(tools.msg);

<!-- /page/index/index.wxml -->

<wxs src="./../logic.wxs" module="logic" />

Console output:

'hello world' from tools.wxs
logic.wxs
some msg

<wxs> tag

Property name	Type	Default value	Description
module	string	-	The module name of the current <wxs> tag, a required field
src	string	-	The relative path of the referenced .wxs file is valid only when this tag is a single closed tag or the content of the tag is empty

module attribute

The module attribute is the module name of the current <wxs> tag. In a single wxml file, it is recommended that its value is unique. If there are repeated module names, they will be overwritten in order (the latter overwrites the former). The wxs module names between different files will not overwrite each other.

The naming of the module attribute value must comply with the following two rules:

• The first character must be: letters (a-zA-Z), underscore (_);
• The remaining characters can be: letters (a-zA-Z), underscore (_), numbers (0-9).

Sample code:

<!--wxml-->

<wxs module="foo">
var some_msg = "hello world";
module.exports = {
  msg : some_msg,
}
</wxs>
<view> {{foo.msg}} </view>

Page output:

hello world

The above example declares a module named foo, which exposes the some_msg variable for use on the current page.

src attribute

The src attribute can be used to reference other wxs file modules.

When referencing, pay attention to the following points:

• You can only reference .wxs file modules, and you must use relative paths;

• wxs modules are all singletons. When a wxs module is referenced for the first time, it will automatically initialize to a singleton object. Multiple pages, multiple places, and multiple references all use the same wxs module object;

• If a wxs module has not been referenced after its definition, the module will not be parsed and run.

Sample code:

// /pages/index/index.js

Page({
  data: {
    msg: "'hello wrold' from js",
  }
})

<!-- /pages/index/index.wxml -->

<wxs src="./../comm.wxs" module="some_comms"></wxs>
<!-- You can also directly use single tag closed syntax.
<wxs src="./../comm.wxs" module="some_comms" />
-->

<!-- Calls the bar function in the some_comms module, and the parameter is foo in the some_comms module. -->
<view> {{some_comms.bar(some_comms.foo)}} </view>
<!-- Calls the bar function in the some_comms module, and the parameter is msg in page/index/index.js. -->
<view> {{some_comms.bar(msg)}} </view>

Page output:

'hello world' from comm.wxs
'hello wrold' from js

The above example references the /page/comm.wxs module through the <wxs> tag in the file /page/index/index.wxml.

Notes

• The <wxs> module can only be accessed in the WXML file where the module is defined. When using <include> or <import>, the <wxs> module will not be introduced into the corresponding WXML file;

• In the <template> tag, only the <wxs> module defined in the WXML file that defines the <template> can be used.