Wechat applet WXS module
WXS module
wxs code can be written in tags in wxml files, or in wxs is a file with a suffix.
modular
every last. wxs files and tags are a separate module.
Each module has its own independent scope. That is, variables and functions defined in a module are private by default and invisible to other modules.
A module can only expose its internal private variables and functions through module Exports implementation.
. wxs file
In the wechat developer tool, right click to create it directly WXS file, in which WXS scripts are written 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 };
In the above example, WXS code is written in the file /pages/comm.wxs. This WXS files can be used by others A tag reference in a WXS file or WXML.
module object
Each wxs module has a built-in module object.
attribute
exports: through this attribute, private variables and functions of this module can be shared 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
require function
In Other wxs file modules are referenced in the wxs module. You can use the require function.
When quoting, pay attention to the following points:
- Reference only wxs file module, and must use a relative path.
- All wxs modules are singletons. When the wxs module is referenced for the first time, it will be automatically initialized as a singleton object. Multiple pages, multiple places, multiple references, all use the same wxs module object.
- If a wxs module has not been referenced since its definition, it will not be parsed and run.
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";
// /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
Attribute name | type | Default | explain |
---|---|---|---|
module | String | – | Module name of the current label. Required fields. |
src | String | – | quote. The relative path to the wxs file. It is valid only when the label is a single closed label or the content of the label is empty |
module attribute
The module attribute is the module name of the current tag. Within a single wxml file, it is recommended that its value be unique. If there are duplicate module names, they are overwritten in sequence (the latter overwrites the former). wxs module names between different files do not overwrite each other.
The naming of the module attribute value must comply with the following two rules:
- The first character must be: letter (a-zA-Z), underscore (_)
- The remaining characters can be letters (a-zA-Z), underscores (_), 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 above example declares a module named foo, which will_ The MSG variable is exposed for use by the current page.
src attribute
The src attribute can be used to reference other wxs file modules.
When quoting, pay attention to the following points:
- Reference only wxs file module, and must use a relative path.
- All wxs modules are singletons. When the wxs module is referenced for the first time, it will be automatically initialized as a singleton object. Multiple pages, multiple places, multiple references, all use the same wxs module object.
- If a wxs module has not been referenced since its definition, it will not be parsed and run.
Example code:
// /pages/index/index.js Page({ data: { msg: "'hello world' from js", } })
<!-- You can also directly use the writing method of single label closure --> {{some_comms.bar(some_comms.foo)}} {{some_comms.bar(msg)}}
Page output:
'hello world' from comm.wxs 'hello wrold' from js
The above example is in the file /page/index/index The /page/comm.wxs module is referenced by tags in wxml.
be careful
- A module can only be accessed in the WXML file that defines the module. When or is used, the module will not be imported into the corresponding WXML file.
- In the tag, only modules defined in the WXML file that defines the can be used.