# WXS module

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

# Modular

Each.wxsfile and tag is a separate module.

Each module has its own separate sphere of action. That is, variables and functions defined within a module are private by default and not visible to other modules.

A module can only expose its internal private variables and functions by usingmodule.exports.

# . Wxs file

In the WeChat developer tool right-click can directly create the.wxsfile where you can write a WXS script directly.

Example 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 is written in the WXS code in the/ pages / comm.wxsfile.The.wxsfile can be referenced by other, wxsfiles or by the `` tag in WXML.

# ModuleObject

Eachwxsmodule has a built-inmoduleobject.

# attribute

• Exports: This attribute allows you to share private variables and functions of this module.

Example 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 function

In the.wxsmodule, reference to otherwxsfile modules can be used by therequirefunction.

When quoting, be aware of the following:

• Only.wxsfile modules can be referenced, and relative paths must be used.
• The wxsmodule is a singleton,wxsmodule automatically initializes as a singleton the first time it is referenced.Multiple pages, multiple places, multiple references, all using the samewxsmodule object.
• If awxsmodule has not been referenced since its definition, the module will not be parsed and run.

Example 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

# "'Label

# module attribute

The module attribute is the module name of the current tag. Within a single wxml file, it is recommended that its values be unique. Repeated module names are covered in a sequential order (the latter covers the former). WXS module names between different files do not overwrite each other.

The module attribute value must be named according to the following two rules:

• First character must be: letter (a-zA-Z), underscore (_)
• The remaining characters can be: letters (a-zA-Z), underscores (_), numbers (0-9)

Example 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 with the namefoothat exposes thesome_msgvariable for use in the current page.

# Src attribute

The src attribute can be used to reference otherwxsfile modules.

When quoting, be aware of the following:

• Only.wxsfile modules can be referenced, and relative paths must be used.
• The wxsmodule is a singleton,wxsmodule automatically initializes as a singleton the first time it is referenced.Multiple pages, multiple places, multiple references, all using the samewxsmodule object.
• If awxsmodule has not been referenced since its definition, the module will not be parsed and run.

Example 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>
<!-- 也可以直接使用单标签闭合的写法
<wxs src="./../comm.wxs" module="some_comms" />
-->

<!-- 调用 some_comms 模块里面的 bar 函数，且参数为 some_comms 模块里面的 foo -->
<view> {{some_comms.bar(some_comms.foo)}} </view>
<!-- 调用 some_comms 模块里面的 bar 函数，且参数为 page/index/index.js 里面的 msg -->
<view> {{some_comms.bar(msg)}} </view>

Page output:

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

The above example is found in the file/ page / index / index.wxmlThe/ page / comm.wxs' module is referenced by the tag '.

# Note

• '[ modules can only be accessed in the WXML file that defines the module.When you use``or``, the'module is not introduced into the corresponding WXML file.
• In the 'tag, use only the' modules defined in the WXML file that defines the``.