This post is a note for 9 hours of learning to complete the development of WeChat applets .
Documentation: WXS Applets
WXS (WeiXin Script) is a scripting language for applets. Combined with WXML, the structure and content of the page view can be constructed. Generally, WXS is used for filtering or calculation processing. WXS actually encapsulates and restricts the upper layer of the JavaScript scripting language.
Note: The running environment of WXS is isolated from other javascript codes. Functions defined in other javascript files cannot be called in WXS, nor can APIs provided by applets be called. WXS functions cannot be used as component event callbacks.
WXS has the following features:
modules, variables, comments, operators, statements, data types, and basic class libraries
WXS Features
module module
Documentation: Module · Applet A
module can be declared by a tag or by a file. The variables of the WXS module are all scoped, and each module defaults to its own variables are private and invisible to the outside world
- Declare via tags:
<!--index.wxml-->
<wxs module="m1">
module.exports = {
message: 'Hello,world!'
}
</wxs>
<view>{
{
m1.message}}</view>m1The variables of the module are exposed for external use through the module.exports function .
- To declare in the form of a file, you need to name the target file
.wxsas the suffix:
<!--index.wxml-->
<wxs src="./m2.wxs" module="m2"></wxs>
<view>{
{
m2.message}}</view>//m2.wxs
module.exports = require('./m1.wxs')//m1.wxs
module.exports = {
message: "hello world!"
}Other WXS files can also be referenced within a WXS file require.
variablevariate
Documentation: Variables · Applets
The usage of variables in applets is consistent with that of ES5.
- Variables in WXS are references to values.
- Variables that are not declared are directly assigned and used, and will be defined as global variables.
- If you declare a variable without assigning a value, the default value is undefined.
- The performance of var is consistent with javascript, and there will be variable promotion.
- The first character of the variable name must be: letters (a-zA-Z), underscore ( ), and the remaining characters can be: letters (a-zA-Z), underscore ( ), numbers (0-9)
annotation
<!-- wxml -->
<wxs module="sample">
// 方法一：单行注释
/*
方法二：多行注释
*/
/*
方法三：结尾注释。即从 /* 开始往后的所有 WXS 代码均被注释，不会被执行
var a = 1;
var b = 2;
var c = "fake";
</wxs>operator operator
Documentation: Operators· The operators of Mini Program WXS include basic operators, unary operators, bitwise operators, comparison operators, equality operators, assignment operators and binary logic operators.
- Basic operators:
var a = 10, b = 20;
// 加法运算
console.log(30 === a + b);
// 减法运算
console.log(-10 === a - b);
// 乘法运算
console.log(200 === a * b);
// 除法运算
console.log(0.5 === a / b);
// 取余运算
console.log(10 === a % b);
var a = '.w' , b = 'xs';
// 加法运算（+）也可以用作字符串的拼接
console.log('.wxs' === a + b);- Unary operators:
var a = 10, b = 20;
// 自增运算
console.log(10 === a++);
console.log(12 === ++a);
// 自减运算
console.log(12 === a--);
console.log(10 === --a);
// 正值运算
console.log(10 === +a);
// 负值运算
console.log(0-10 === -a);
// 否运算
console.log(-11 === ~a);
// 取反运算
console.log(false === !a);
// delete 运算
console.log(true === delete a.fake);
// void 运算
console.log(undefined === void a);
// typeof 运算
console.log("number" === typeof a);where typeofoperator is the data type of the return variable.
- Bitwise operators:
var a = 10, b = 20;
// 左移运算
console.log(80 === (a << 3));
// 无符号右移运算
console.log(2 === (a >> 2));
// 带符号右移运算
console.log(2 === (a >>> 2));
// 与运算
console.log(2 === (a & 3));
// 异或运算
console.log(9 === (a ^ 3));
// 或运算
console.log(11 === (a | 3));- comparison operator
var a = 10, b = 20;
// 小于
console.log(true === (a < b));
// 大于
console.log(false === (a > b));
// 小于等于
console.log(true === (a <= b));
// 大于等于
console.log(false === (a >= b));- equality operator
var a = 10, b = 20;
// 等号
console.log(false === (a == b));
// 非等号
console.log(true === (a != b));
// 全等号
console.log(false === (a === b));
// 非全等号
console.log(true === (a !== b));- assignment operator
var a = 10;
a = 10; a *= 10;
console.log(100 === a);
a = 10; a /= 5;
console.log(2 === a);
a = 10; a %= 7;
console.log(3 === a);
a = 10; a += 5;
console.log(15 === a);
a = 10; a -= 11;
console.log(-1 === a);
a = 10; a <<= 10;
console.log(10240 === a);
a = 10; a >>= 2;
console.log(2 === a);
a = 10; a >>>= 2;
console.log(2 === a);
a = 10; a &= 3;
console.log(2 === a);
a = 10; a ^= 3;
console.log(9 === a);
a = 10; a |= 3;
console.log(11 === a);- Binary Logical Operators
var a = 10, b = 20;
// 逻辑与
console.log(20 === (a && b));
// 逻辑或
console.log(10 === (a || b));- conditional operator
var a = 10, b = 20;
//条件运算符
console.log(20 === (a >= 10 ? a + 10 : b + 10));
//逗号运算符
console.log(20 === (a, b));Operator precedence reference documentation .
The statements of WXS are basically the same as those commonly used in JavaScript, including if...else, do...while, switchetc. The difference is that try...catchstatements are not supported in WXS.
Data type data type
number : Numeric value. number includes two kinds of values: integer and decimal.
string : string. There are two usages of string, single quotes and double quotes.
boolean: Boolean value. Boolean values have only two specific values: true and false.
object: object. object is an unordered key-value pair.
function: function
array: array
date: date. To generate a date object, you need to use getDatethe function , which returns an object of the current time.
regexp: Regular. Generating a regexp object requires the use getRegExpof the function .
For the specific attributes and methods of the data type, refer to the documents: Data Type · Applet and ES5 Standard.
basic class library basic library
Documentation: Basic class library · Mini program
WXS has 6 basic class libraries: Math, JSON, Number, Date, console, Global. It is basically consistent with the ES5 standard.
The difference is that the console class library of WXS only provides console.logthis method. The Date class library only provides three methods of the Date constructor in ES5, namely Date.parse(parse the date and time in the form of a string, and return the Unix timestamp of the date and time), Date.now(return the Unix timestamp of the current date and time), Date.UTC(return the specified time Unix timestamp).