# WXS Modules

WXS code can be written in <wxs> tags in a wxml file or in files with the extension .wxs.

# Modules

Each .wxs file or <wxs> tag is an independent module.

Each module has an independent scope. This means the variables and functions in a module are private by default and not visible to other modules.

A module can only externally expose its private variables and functions through the module.exports implementation.

# .wxs Files

In Weixin DevTools, right-click to create a .wxs file. You can write WXS scripts directly in the file.

Sample code:

// /pages/comm.wxs

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

In the above example, WXS code is written in the /pages/comm.wxs file. This .wxs file can be referenced by other .wxs files or <wxs> tags in WXML.

# module Objects

Each wxs module contains one built-in module object.

# Properties

• exports: This property is used to share the module’s private variables and functions externally.

Sample code:

Preview with Developer Tool

// /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 Functions

You can use a require function to reference another wxs file module in a .wxs module.

When referencing another wxs file module, you must note the following:

• You can only reference .wxs files modules and must use relative paths.
• All wxs modules are single instances. The first time a wxs module is referenced, it is automatically initialized as a single-instance object. Multiple pages, multiple regions, and multiple references all use the same wxs module object.
• If a wxs module is never referenced after it is defined, the module is not parsed or run.

Sample code:

Preview with Developer Tool

// /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> Tags

# module Property

The module property is the module name of the current <wxs> tag. In a single wxml file, we recommend that this value be unique. In the case of duplicate module names, the value is overwritten based on the order (the latter overwrites the former). The names of wxs modules are not overwritten across different files.

The name specified by the module property value must comply with the following rules:

• The first character must be an English letter (a-z, A-Z) or underscore (_).
• The remaining characters can be English letters (a-z, A-Z), underscores (_), or numbers (0-9).

Sample code:

Preview with Developer Tool

<!-- 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 and exposes the some_msg variable to be used on the current page.

# src Property

The src property is used to reference another wxs file module.

When referencing another wxs file module, you must note the following:

• You can only reference .wxs files modules and must use relative paths.
• All wxs modules are single instances. The first time a wxs module is referenced, it is automatically initialized as a single-instance object. Multiple pages, multiple regions, and multiple references all use the same wxs module object.
• If a wxs module is never referenced after it is defined, the module is not parsed or run.

Sample code:

Preview with Developer Tool

// /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

In the above example, the <wxs> tag is used to reference /page/comm.wxs in the file /page/index/index.wxml.

# Note

• A <wxs> module can only be accessed in the WXML file that defines the module. If you use <include> or <import>, <wxs> modules are not introduced into the corresponding WXML files.
• In a <template> tag, you can only use the <wxs> module defined in the WXML file that defines the <template>.