WXML
, can be utilized to construct the structural framework of a page.<!-- wxml --><wxs module="m1">var msg = "hello world";module.exports.message = msg;</wxs><view>{{m1.message}}</view>
hello world
// page.jsPage({data: {array: [1, 2, 3, 4, 5, 1, 2, 3, 4],},})
<!-- wxml --><!-- The following getMax function accepts 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><!-- Invoke the getMax function within WXS, with the parameter being the array in page.js --><view>{{m1.getMax(array)}}</view>
5
// /pages/comm.wxsvar foo = "'hello world' from comm.wxs"var bar = function(d) {return d}module.exports = {foo: foo,bar: bar,}
wxs
module possesses an inherent module
object.Exports
: This attribute allows the sharing of private variables and functions from this module to the outside.// /pages/tools.wxsvar foo = "'hello world' from tools.wxs"var bar = function(d) {return d}module.exports = {FOO: foo,bar: bar,}module.exports.msg = 'some msg'
<!-- page/index/index.wxml --><wxs src="./../tools.wxs" module="tools" /><view>{{tools.msg}}</view><view>{{tools.bar(tools.FOO)}}</view>
some msg'hello world' from tools.wxs
.wxs
module, to reference other wxs
file modules, the require
function can be utilized..wxs
file modules can be referenced, and it is imperative to use a relative path.wxs
modules operate on a singleton pattern, meaning they are automatically initialized as singleton objects upon the first reference. Regardless of multiple pages, multiple locations, or multiple references, the same wxs
module object is utilized.wxs
module is not referenced after its definition, the module will not be parsed or executed.// /pages/tools.wxsvar 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.wxsvar tools = require('./tools.wxs')console.log(tools.FOO)console.log(tools.bar('logic.wxs'))console.log(tools.msg)
<!-- /page/index/index.wxml --><wxs src="./../logic.wxs" module="logic" />
'hello world' from tools.wxslogic.wxssome msg
Attribute | Types | Default value |
module | string | The module name of the current <wxs> tag. This is a mandatory field. |
src | string | The relative path to the .wxs file. This is only applicable when the tag is either a self-closing tag or a tag with no content. |
<wxs>
tag. Within a single wxml file, it is recommended that its value be unique. If there are duplicate module names, they will be overwritten in the order they appear (the latter overwrites the former). WXS module names from different files will not overwrite each other.<!-- wxml --><wxs module="foo">var some_msg = "hello world";module.exports = { msg : some_msg, }</wxs><view>{{foo.msg}}</view>
hello world
wxs
files..wxs
file modules can be referenced, and it is imperative to use a relative path.wxs
modules operate on a singleton pattern, meaning they are automatically initialized as singleton objects upon the first reference. Regardless of multiple pages, multiple locations, or multiple references, the same wxs
module object is utilized.wxs
module is not referenced after its definition, the module will not be parsed or executed.// /pages/index/index.jsPage({data: {msg: "'hello wrold' from js",},})
<!-- /pages/index/index.wxml --><wxs src="./../comm.wxs" module="some_comms"></wxs><!-- The self-closing tag syntax can also be used directly: <wxs src="./../comm.wxs" module="some_comms" /> --><!-- Invoke the bar function within the some_comms module, with the argument being foo from the some_comms module --><view>{{some_comms.bar(some_comms.foo)}}</view><!-- Invoke the bar function within the some_comms module, with the argument being msg from page/index/index.js --><view>{{some_comms.bar(msg)}}</view>
'hello world' from comm.wxs'hello wrold' from js
/page/comm.wxs
module in the /page/index/index.wxml
file via the <wxs>
tag.undefined
.var foo = 1var bar = 'hello world'var i // i === undefined
foo
, bar
, and i
, are declared. Subsequently, foo
is assigned the numeric value 1
, and bar
is assigned the string "hello world"
.deletevoidtypeofnullundefinedNaNInfinityvarifelsetruefalserequirethisfunctionargumentsreturnforwhiledobreakcontinueswitchcasedefault
<!-- wxml --><wxs module="sample">// Method One: Single-line Comments/* Method Two: Multi-line Comments *//* Method Three: End Comments. That is, all WXS code following /* is commented out. var a = 1; var b = 2; var c = "fake";</wxs>
*/
termination symbol.var a = 10, b = 20// Addition Operationconsole.log(30 === a + b)// Subtraction Operationconsole.log(-10 === a - b)// Multiplication Operationconsole.log(200 === a * b)// Division Operationconsole.log(0.5 === a / b)// Modulus Operationconsole.log(10 === a % b)
var a = '.q', b = 's'// String Concatenationconsole.log('.wxs' === a + b)
var a = 10, b = 20// Increment Operationconsole.log(10 === a++)console.log(12 === ++a)// Decrement Operationconsole.log(12 === a--)console.log(10 === --a)// Positive Value Operationconsole.log(10 === +a)// Negative Value Operationconsole.log(0 - 10 === -a)// Negation Operationconsole.log(-11 === ~a)// Inversion Operationconsole.log(false === !a)// Delete Operationconsole.log(true === delete a.fake)// Void Operationconsole.log(undefined === void a)// Typeof Operationconsole.log('number' === typeof a)
var a = 10, b = 20// Left Shift Operationconsole.log(80 === a << 3)// Unsigned Right Shift Operationconsole.log(2 === a >> 2)// Signed Right Shift Operationconsole.log(2 === a >>> 2)// AND Operationconsole.log(2 === (a & 3))// XOR Operationconsole.log(9 === (a ^ 3))// OR Operationconsole.log(11 === (a | 3))
var a = 10, b = 20// Less Thanconsole.log(true === a < b)// Greater Thanconsole.log(false === a > b)// Less Than or Equal Toconsole.log(true === a <= b)// Greater Than or Equal Toconsole.log(false === a >= b)
var a = 10, b = 20// Equal Signconsole.log(false === (a == b))// Not Equal Signconsole.log(true === (a != b))// Identical Signconsole.log(false === (a === b))// Not Identical Signconsole.log(true === (a !== b))
var a = 10a = 10a *= 10console.log(100 === a)a = 10a /= 5console.log(2 === a)a = 10a %= 7console.log(3 === a)a = 10a += 5console.log(15 === a)a = 10a -= 11console.log(-1 === a)a = 10a <<= 10console.log(10240 === a)a = 10a >>= 2console.log(2 === a)a = 10a >>>= 2console.log(2 === a)a = 10a &= 3console.log(2 === a)a = 10a ^= 3console.log(9 === a)a = 10a |= 3console.log(11 === a)
var a = 10, b = 20// Logical ANDconsole.log(20 === (a && b))// Logical ORconsole.log(10 === (a || b))
var a = 10, b = 20// Conditional Operatorconsole.log(20 === (a >= 10 ? a + 10 : b + 10))// Comma Operatorconsole.log(20 === (a, b))
Priority | Operators | Note | Associativity |
20 | ( ... ) | Parentheses | n/a |
19 | ... . ... | Member Access | Left-to-right |
| ... [ ... ] | Member Access | Left-to-right |
| ... ( ... ) | Function invocation | Left-to-right |
17 | ... ++ | Postfix Increment | n/a |
| ... -- | Postfix Decrement | n/a |
16 | ! ... | Logical NOT | Right-to-left |
| ~ ... | Bitwise NOT | Right-to-left |
| + ... | Unary Addition | Right-to-left |
| - ... | Unary subtraction | Right-to-left |
| ++ ... | Prefix Increment | Right-to-left |
| -- ... | Prefix Decrement | Right-to-left |
| typeof ... | typeof | Right-to-left |
| void ... | void | Right-to-left |
| delete ... | delete | Right-to-left |
14 | ... * ... | Multiplication | Left-to-right |
| ... / ... | Division | Left-to-right |
| ... % ... | Modulus | Left-to-right |
13 | ... + ... | Addition | Left-to-right |
| ... - ... | Subtraction | Left-to-right |
12 | ... << ... | Bitwise Left Shift | Left-to-right |
| ... >> ... | Bitwise Right Shift | Left-to-right |
| ... >>> ... | Unsigned Right Shift | Left-to-right |
11 | ... < ... | < | Left-to-right |
| ... <= ... | < or = | Left-to-right |
| ... > ... | > | Left-to-right |
10 | ... == ... | Greater or equal to | Left-to-right |
| ... != ... | Equal to | Left-to-right |
| ... === ... | Not equal to | Left-to-right |
| ... !== ... | Identically equal to | Left-to-right |
9 | ... & ... | Bitwise AND | Left-to-right |
8 | ... ^ ... | Bitwise XOR | Left-to-right |
7 | ... | ... | Bitwise OR | Left-to-right |
6 | ... && ... | Logical OR | Left-to-right |
5 | ... || ... | Logical AND | Left-to-right |
4 | ... ? ... : ... | Conditional Operators | Right-to-left |
3 | ... = ... | Assignment | Right-to-left |
| ... += ... | Assignment | Right-to-left |
| ... -= ... | Assignment | Right-to-left |
| ... *= ... | Assignment | Right-to-left |
| ... /= ... | Assignment | Right-to-left |
| ... %= ... | Assignment | Right-to-left |
| ... <<= ... | Assignment | Right-to-left |
| ... >>= ... | Assignment | Right-to-left |
| ... >>>= ... | Assignment | Right-to-left |
| ... &= ... | Assignment | Right-to-left |
| ... ^= ... | Assignment | Right-to-left |
| ... |= ... | Assignment | Right-to-left |
0 | ... , ... | Comma | Left-to-right |
If (expression) statement
: Execute statement
when expression
is truthy.If (expression) statement1 else statement2:
Execute statement1
when expression
is truthy. Otherwise, execute statement2
.If ... else if ... else statementN
: This construct allows for the selection and execution of one among statement1 ~ statementN
.// if ...if (expression) statementif (expression) statementif (expression) {Code Block}// if ... elseif (expression) statementelse statementif (expression) statementelse statementif (expression) {Code Block} else {Code Block}// if ... else if ... else ...if (expression) {Code Block} else if (expression) {Code Block} else if (expression) {Code Block} else {Code Block}
switch (expression) {case variable:Statementcase number:Statementbreakcase string:Statementdefault:Statement}
var exp = 10switch (exp) {case '10':console.log('string 10')breakcase 10:console.log('number 10')breakcase exp:console.log('var exp')breakdefault:console.log('default')}
number 10
for (statement; statement; statement) statementfor (statement; statement; statement) {Code Block}
break
,continue
keywords.for (statement; statement; statement) statementfor (statement; statement; statement) {Code Block}
01
while (expression) statementwhile (expression) {Code Block}do {Code Block} while (expression)
Types | Note |
number | Numerical value |
string | String |
boolean | Boolean Value |
object | Object |
function | Function |
array | Array |
date | Date |
regexp | Regex |
var a = 10var PI = 3.141592653589793
constructor
: Returns the string "Number".'hello world'
true
and false
.constructor
: Returns the string "Boolean"
.var o = {} // Generates a new empty object// Generates a new non-empty objecto = {string: 1, // The key of an object can be a stringconst_var: 2, // The key of an object can also be an identifier that complies with variable definition rulesfunc: {}, // The value of an object can be of any type}// Read operation of object propertiesconsole.log(1 === o['string'])console.log(2 === o.const_var)// Write operation of object propertieso['string']++o['string'] += 10o.const_var++o.const_var += 10// Read operation of object propertiesconsole.log(12 === o['string'])console.log(13 === o.const_var)
constructor
: Returns the string "Object"
console.log('Object' === { k: '1', v: '2' }.constructor)
toString
: Returns the string "[object Object]"
// Method 1function a(x) {return x}// Method 2var b = function(x) {return x}
var a = function(x) {return function() {return x}}var b = a(100)console.log(100 === b())
arguments
keyword can be used. Currently, this keyword only supports the following properties:length
: The number of arguments passed to the function.[index]
: Each argument passed to the function can be iterated through using the index
subscript.var a = function() {console.log(3 === arguments.length)console.log(100 === arguments[0])console.log(200 === arguments[1])console.log(300 === arguments[2])}a(100, 200, 300)
constructor
: Returns the string "Function"
length
: Returns the number of formal parameters of the function.toString
: Returns the string "[function Function]"
var func = function(a, b, c) {}console.log('Function' === func.constructor)console.log(3 === func.length)console.log('[function Function]' === func.toString())
var a = [] // Generates a new empty arraya = [1, '2', {}, function() {}] // Generates a new non-empty array, the elements of which can be of any type.
constructor
: Returns the string "Array"
length
getDate()getDate(milliseconds)getDate(datestring)getDate(year, month[, date[, hours[, minutes[, seconds[, milliseconds]]]]])
milliseconds
: The number of milliseconds calculated from 00:00:00 UTC on January 1, 1970.datestring
: A date string in the format: "month day, year hours:minutes:seconds".constructor
: Returns the string "Date"
.regexp
object, the getRegExp function must be utilized.getRegExp(pattern[, flags])
var a = getRegExp('x', 'img')console.log('x' === a.source)console.log(true === a.global)console.log(true === a.ignoreCase)console.log(true === a.multiline)
constructor
attribute.var number = 10console.log('Number' === number.constructor)var string = 'str'console.log('String' === string.constructor)var boolean = trueconsole.log('Boolean' === boolean.constructor)var object = {}console.log('Object' === object.constructor)var func = function() {}console.log('Function' === func.constructor)var array = []console.log('Array' === array.constructor)var date = getDate()console.log('Date' === date.constructor)var regexp = getRegExp()console.log('RegExp' === regexp.constructor)
typeof
can also be used to distinguish certain data types.var number = 10var boolean = truevar object = {}var func = function() {}var array = []var date = getDate()var regexp = getRegExp()console.log('number' === typeof number)console.log('boolean' === typeof boolean)console.log('object' === typeof object)console.log('function' === typeof func)console.log('object' === typeof array)console.log('object' === typeof date)console.log('object' === typeof regexp)console.log('undefined' === typeof undefined)console.log('object' === typeof null)
stringify(object)
: Transforms the object
into a JSON
string, returning the resultant string.parse(string)
: Converts a JSON
string into an object, returning the resultant object.console.log(undefined === JSON.stringify())console.log(undefined === JSON.stringify(undefined))console.log('null' === JSON.stringify(null))console.log('111' === JSON.stringify(111))console.log('"111"' === JSON.stringify('111'))console.log('true' === JSON.stringify(true))console.log(undefined === JSON.stringify(function() {}))console.log(undefined === JSON.parse(JSON.stringify()))console.log(undefined === JSON.parse(JSON.stringify(undefined)))console.log(null === JSON.parse(JSON.stringify(null)))console.log(111 === JSON.parse(JSON.stringify(111)))console.log('111' === JSON.parse(JSON.stringify('111')))console.log(true === JSON.parse(JSON.stringify(true)))console.log(undefined === JSON.parse(JSON.stringify(function() {})))
Was this page helpful?