Wechat small program Wxs chapter

WXS (WeiXin Script) is a set of scripting language for small programs. Combined with WXML, you can build the structure of a page.

【 note 】

1. WXS is independent of the base library version of the runtime and can run in all versions of applets.
2. WXS is a different language from JavaScript and has its own syntax, which is not consistent with JavaScript.
3. The WXS runtime environment is isolated from other JavaScript code, and functions defined in other JavaScript files cannot be called in WXS, nor can apis provided by applets be called.
4. WXS functions cannot be used as component event callbacks.

1. The WXS module

WXS code can be written in the < WXS > tag in a WXML file or in a file with a.wxs suffix.

The module

Each.wXS file and < WXS > tag is a separate module.

Each module has its own independent scope. Variables and functions defined in one module are private by default and not visible to other modules.

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

Sample code:

File name: xxx.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";
Copy the code

Reference at use

<! -- page/index/index.wxml --><wxs src=". /.. /xxx.wxs" module="tools" />
<view> {{tools.msg}} </view>
<view> {{tools.bar(tools.FOO)}} </view>
Copy the code

Page output:

some msg
'hello world' from tools.wxs
Copy the code

The require function

To reference other WXS file modules in a. WXS module, use the require function.

When quoting, note the following:

• Can only reference.wxsFile module, and must use relative path.
• wxsModules are singletons,wxsA module is automatically initialized as a singleton the first time it is referenced. Multiple pages, multiple places, multiple references, all using the samewxsModule object.
• If awxsIf a module is not referenced after it is defined, it will not be parsed and run.

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";
Copy the code

// /pages/logic.wxs

var tools = require("./tools.wxs");

console.log(tools.FOO);
console.log(tools.bar("logic.wxs"));
console.log(tools.msg);
Copy the code

<! --/page/index/index.wxml -->

<wxs src=". /.. /logic.wxs" module="logic" />

Copy the code

<wxs>The label

WXS syntax reference

2.Wxs page module

<! --wxml--><wxs module="m1">
var msg = "hello world";

module.exports.message = msg;
</wxs>

<view> {{m1.message}} </view>

// Page output
hello world
Copy the code

The data processing

// page.js
Page({
  data: {
    array: [1.2.3.4.5.1.2.3.4]}}) <! --wxml--> <! The following getMax function takes an array and returns the value of the largest element in the array.<wxs module="m1">
var getMax = function(array) {
  var max = undefined;
  for (var i = 0; i < array.length; ++i) {
    max = max === undefined ?
      array[i] :
      (max >= array[i] ? max : array[i]);
  }
  return max;
}

module.exports.getMax = getMax;
</wxs><! Call WXS getMax (array, page. Js);<view> {{m1.getMax(array)}} </view>


// page output:
5
Copy the code

other

1. Usage of regular expressions

// Match the title (1. 2. Get the numeric content of the string;)
function shortName(obj) {
  var isNumReg = getRegExp('\d'.'g');
  if(isNumReg.test(obj)){
    var reg = getRegExp('[^ 0-9]'.'g');
    return obj.replace(reg, ' ');
  } else{
    return "Conference room"; }}module.exports = {
  shortName: shortName,
}
Copy the code