WeChat widget WXS module

WXS module

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

Module

Each .wxs file and the label are a separate module.

Each module has its own unique scope. That is, variables and functions defined in one module are private by default and are not visible to other modules.

A module can only be implemented by module.exports if it wants to expose its internal private variables and functions.

The .wxs file

In the WeChat developer tool, right-click to create a .wxs file directly, where you can write WXS scripts 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 examples are written in the /pages/comm.wxs file. The .wxs file can be referenced by other .wxs files or by tags in WXML.

The module object

Each wxs module has a built-in module object.

Property

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

Example 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";

 {{tools.msg}} 
 {{tools.bar(tools.FOO)}} 

Page output:

some msg
'hello world' from tools.wxs

The require function

References to other wxs file modules in the .wxs module, you can use the require function.

When referring, pay attention to the following points:

• Only .wxs file modules can be referenced, and relative paths must be used.
• The wxs modules are singletons, and the wxs modules are automatically initialized as singleton objects the first time they are referenced. Multiple pages, multiple places, multiple references, all using the same wxs module object.
• If a WXS module is defined, it has not been referenced, and the module will not be parsed and running.

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);

Console output:

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

Label

The property name	Type	The default	Description
module	String		The name of the module for the current label. R equired fields.
Src	String		Refers to the relative path of the .wxs file. Valid only if the label is a single closed label or if the contents of the label are empty.

The module property

The module property is the module name of the current label. W ithin a single wxml file, it is recommended that its value be unique. R epeated module names are overwritten in order (the latter overrides the former). The wxs module names between the different files are not overwritten on top of each other.

The module property value must be named in accordance with two rules:

• The first character must be: letter (a-zA-Z), underscore ( . .
• The remaining characters can be: letter (a-zA-Z), underscore (-), number (0-9)

Example 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 example above declares a module named foo that exposes some_msg variable for use by the current page.

The src property

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

When referring, pay attention to the following points:

• Only .wxs file modules can be referenced, and relative paths must be used.
• The wxs modules are singletons, and the wxs modules are automatically initialized as singleton objects the first time they are referenced. Multiple pages, multiple places, multiple references, all using the same wxs module object.
• If a wxs module has not been referenced since it was defined, it will not be resolved and run.

Example code:

// /pages/index/index.js
Page({
  data: {
    msg: "'hello world' from js",
  }
})

<!-- 也可以直接使用单标签闭合的写法

-->

 {{some_comms.bar(some_comms.foo)}} 

 {{some_comms.bar(msg)}} 

Page output:

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

The above example refers to the /page/comm.wxs module in file /page/index/index.wxml via the tab.

Attention

• The module can only be accessed in the WXML file that defines the module. W hen you use the .lt;include> or the .lt;import> module will not be introduced into the corresponding WXML file.
  
• In the label, you can only use the modules defined in the WXML file that define the .