What is a WXS?

WXS (WeiXin Script) is a scripting language for small programs. Combined with WXML, a page structure can be constructed.

WXS label

<wxs module="utils" src=".. /.. /wxs/test.wxs"></wxs>Copy the code
  1. The module properties:

It is recommended that the value be unique. If there is a module name with the same name, the module name is overwritten in sequence (the latter overwrites the former).

  1. The SRC attribute:

A. Reference only. WXS files, which must be relative paths. B. All WXS modules are singletons. When WXS modules are referenced for the first time, they will be automatically initialized as singletons, and the same WXS module object is used for multiple pages, places and times. C. If a WXS module is not referenced after it is defined, the module will not be parsed and run;

WXS module

WXS codes can be written in tags in WXML files, or files with a suffix of. WXS (in wechat developer tools, right click to create a. WXS file, and directly write WXS scripts in it) as follows:

// WXML < WXS module="utils"> module.exports = {MSG: 'hello world'}</ WXS > <view> {{utils. hello worldCopy the code

Write 2 as follows:

// text.wxml <wxs module="utils" src=".. /.. /common/ WXS /test. WXS "></ WXS > /.. /common/wxs/test.wxs" /> <view> {{utils.msg}}</view> // test.wxs module.exports = { msg: 'hello world' }Copy the code

WXS codes are generally recommended to be written in. WXS files.

The module specification

  1. Each. WXS file and WXS tag is a separate module;
  2. Each module has its own scope, that is, variables and functions defined in one module are private by default and not visible to other modules.
  3. A module that wants to expose its internal private variables and functions can only do this through module.exports.

Q1: If multiple WXS are introduced into the same WXML and there is a variable or function with the same name, what will be the performance?

// test.wxml <wxs module="utils" src=".. /.. /wxs/test.wxs"></wxs> <wxs module="utils1" src=".. /.. /wxs/test1.wxs"></wxs> <view> {{utils.msg}} + {{utils.say()}}</view> <view> {{utils1.msg}} +{{utils1.say()}}</view> // test.wxs module.exports = { msg: 'hello test.wxs', say: Function (){return 'test.wxs say()'}} // export.wxs module. Exports = {MSG: 'hello test1.wxs', say: Function (){return 'test1.wxs say()'}} // hello test1.wxs say() // Hello test1.wxs + Test1. WXS say ()Copy the code

After verification, it is found that each module has its own scope. Q2: If you want to introduce other WXS file modules into the. WXS module, how do you do that? Through the require function

// test.wxs var test1 = require('./test1.wxs') module.exports = { msg: 'hello test.wxs', say: Function (){console.log(test1.msg) return 'test.wxs say()'}} // [WXS Runtime info] hello test1.wxsCopy the code

WXS annotation

/ / WXML file < WXS module = "utils" > / /. WXS single-line comments / * * *. WXS - multiline comment * / var / * a = 1 < / WXS >Copy the code

In the above example, all WXS codes are annotated. The third writing method is relatively rare, so it can be easily recorded when I see it in learning. For. WXS files, there are only two annotation modes: single line and multi-line.

WXS basics

  • The addition operator (+) is used to concatenate strings;
<wxs module="utils">
module.exports = {
  getnum: function () {
    var a = 10
    var b = 20
    var str = a + '+' + b + '=' + (a+b) 
    return str
  }
}
</wxs>
<view>{{utils.getnum()}}</view>
Copy the code

The concatenation operator cannot be used, otherwise an error will be reported.

  • WXS currently supports the following data types:

Number, string, Boolean, array, object, function, date, regexp

There is no NULL /undefined in WXS data types.

  • To generate a date object, use getDate(), which returns an object of the current time.
<wxs module="utils"> module.exports = { getNowTime: Function () {return getDate()}}</ WXS > <view>{{utils.getnowTime ()}}</view> Sat May 01 2021 14:42:57 GMT+0800 (China Standard Time)Copy the code

Cannot use new Date(), an error is reported.

  • Es6 syntax is not supported, like deconstruction, arrow functions are not supported.
  • Let /const cannot be used to declare variables. Var is used instead. Variable promotion exists.
<wxs module="utils">
module.exports = {
  getnum: function () {
    let a = 10
    return a
  }
}
</wxs>
<view>{{utils.getnum()}}</view>
Copy the code

Application scenarios

  • Usually the back end returns the timestamp format to the front end, but we want to process the desired time format, such as YYYY-MM-DD, in which case we can call the time conversion function using WXS.

Isn’t it possible to wrap data in JS with a function and then print it to a page? The answer is yes, it’s just pursuing what you think is a better solution.

<wxs module="utils"> module.exports = { formatTime: function (timeStamp) { var now = getDate(parseInt(timeStamp)) var year = now.getFullYear() var month = now.getMonth()+1 month = month < 10 ? '0' + month: month var day = now.getDate() day = day < 10 ? '0' + day :day return year + '-' + month + '-' + day}}</ WXS > <view>{{utils. FormatTime (1619852841428)}}</view> // screen output / / 2021-05-01Copy the code
  • Sometimes the network image address returned by the background is a relative path, sometimes it is a complete image path, to display the image, you need to add the configured domain name prefix.
<wxs module="utils"> module.exports = { getImg: function (url = '') { var origin = 'https://xxx.com' if (url.indexOf('https') ! == -1 || url.indexOf('http') ! == -1) {return URL} else {return origin + url}}} </ WXS >< image SRC ="{{utils.getimg ('/a.png')}}"></image> // SRC output // https://xxx.com/a.pngCopy the code

Record on pit

  • Expected LineFeed occurs when compilation is used when invoked in WXML

Solution: Replace everything in ES6 with ES5 and declare with var.

Write in the last

If there is a mistake, please leave a message, will be corrected in time! If feel helpful to you, please click a like or collect it!