Wechat applet WXS module

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 nametypeDefaultexplain
moduleStringModule name of the current label. Required fields.
srcStringquote. 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.

Tags: Mini Program Front-end

Posted by filmixt on Fri, 03 Jun 2022 21:08:16 +0530