【1 概述】
【什么是WXS】WXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML
,可以构建出页面的结构。
【注意】
- wxs 不依赖于运行时的基础库版本,可以在所有版本的小程序中运行。
- wxs 与 javascript 是不同的语言,有自己的语法,并不和 javascript 一致。
- wxs 的运行环境和其他 javascript 代码是隔离的,wxs 中不能调用其他 javascript 文件中定义的函数,也不能调用小程序提供的API。
- wxs 函数不能作为组件的事件回调。
- 由于运行环境的差异,在 iOS 设备上小程序内的 wxs 会比 javascript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。
- 如果一个
wxs
模块在定义之后,一直没有被引用,则该模块不会被解析与运行。
【使用】:在WXML文件中定义模块,直接引用模块中的内容
1 在 WXS文件中定义变量并导出使用
1 1 <!--wxml-->
2 2 <wxs module="m1">
3 3 var msg = "hello world";
4 4
5 5 module.exports.message = msg;
6 6 </wxs>
7 7
8 8 <view> {{m1.message}} </view
2 在 WXS中定义方法,并导出使用
1 <!--wxml-->
2 <!-- 下面的 getMax 函数,接受一个数组,且返回数组中最大的元素的值 -->
3 <wxs module="m1">
4 var getMax = function(array) {
5 var max = undefined;
6 for (var i = 0; i < array.length; ++i) {
7 max = max === undefined ?
8 array[i] :
9 (max >= array[i] ? max : array[i]);
10 }
11 return max;
12 }
13
14 module.exports.getMax = getMax; <!--导出方法,和导出变量方式相同-->
15 </wxs>
16
17 <!-- 调用 wxs 里面的 getMax 函数,参数为 page.js 里面的 array -->
18 <view> {{m1.getMax(array)}} </view>
【有了JavaScript,为甚么还要用WXS?】
【2 详细展开】
【须知】WXS 代码可以编写在 wxml 文件中的 <wxs>
标签内,或以 .wxs
为后缀名的文件内。
模块里面定义的变量与函数,默认为私有的,对其他模块不可见。
【module 对象】:每个 wxs
模块均有一个内置的 module
对象。通过module.exports 属性,可以对外共享本模块的私有变量与函数
exports的值是一个字典集合,可以分别设置字典内元素的值,也可一次设置所有字典内所有元素。
// /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";
【引用--require】
1 只能引用 .wxs 文件模块,且必须使用相对路径。
2 wxs 模块均为单例,wxs 模块在第一次被引用时,会自动初始化为单例对象。多个页面,多个地方,多次引用,使用的都是同一个 wxs 模块对象。
3 如果一个 wxs 模块在定义之后,一直没有被引用,则该模块不会被解析与运行。
【引用语法】
1 var tools = require("./tools.wxs");
2
3 console.log(tools.FOO);
【WXS 标签】
属性:module-当前模块的模块名
src : 引用 .wxs 文件的相对路径。仅当本标签为单闭合标签或标签的内容为空时有效。
【3 WXS 具体语法】:变量、表达式、语句、数据类型、基本类库
【变量】:与其它语言中的变量没有本质区别,唯一要注意的就是不能使用如下保留字
1 delete
2 void
3 typeof
4
5 null
6 undefined
7 NaN
8 Infinity
9 var
10
11 if
12 else
13
14 true
15 false
16
17 require
18
19 this
20 function
21 arguments
22 return
23
24 for
25 while
26 do
27 break
28 continue
29 switch
30 case
31 default
【注释】同C、JavaScript
【符号】:注意 全等号 === 非全等号 !==
优先级 | 运算符 | 说明 | 结合性 |
---|---|---|---|
20 | ( ... ) |
括号 | n/a |
19 | ... . ... |
成员访问 | 从左到右 |
... [ ... ] |
成员访问 | 从左到右 | |
... ( ... ) |
函数调用 | 从左到右 | |
17 | ... ++ |
后置递增 | n/a |
... -- |
后置递减 | n/a | |
16 | ! ... |
逻辑非 | 从右到左 |
~ ... |
按位非 | 从右到左 | |
+ ... |
一元加法 | 从右到左 | |
- ... |
一元减法 | 从右到左 | |
++ ... |
前置递增 | 从右到左 | |
-- ... |
前置递减 | 从右到左 | |
typeof ... |
typeof | 从右到左 | |
void ... |
void | 从右到左 | |
delete ... |
delete | 从右到左 | |
14 | ... * ... |
乘法 | 从左到右 |
... / ... |
除法 | 从左到右 | |
... % ... |
取模 | 从左到右 | |
13 | ... + ... |
加法 | 从左到右 |
... - ... |
减法 | 从左到右 | |
12 | ... << ... |
按位左移 | 从左到右 |
... >> ... |
按位右移 | 从左到右 | |
... >>> ... |
无符号右移 | 从左到右 | |
11 | ... < ... |
小于 | 从左到右 |
... <= ... |
小于等于 | 从左到右 | |
... > ... |
大于 | 从左到右 | |
... >= ... |
大于等于 | 从左到右 | |
10 | ... == ... |
等号 | 从左到右 |
... != ... |
非等号 | 从左到右 | |
... === ... |
全等号 | 从左到右 | |
... !== ... |
非全等号 | 从左到右 | |
9 | ... & ... |
按位与 | 从左到右 |
8 | ... ^ ... |
按位异或 | 从左到右 |
7 | ... | ... |
按位或 | 从左到右 |
6 | ... && ... |
逻辑与 | 从左到右 |
5 | ... || ... |
逻辑或 | 从左到右 |
4 | ... ? ... : ... |
条件运算符 | 从右到左 |
3 | ... = ... |
赋值 | 从右到左 |
... += ... |
赋值 | 从右到左 | |
... -= ... |
赋值 | 从右到左 | |
... *= ... |
赋值 | 从右到左 | |
A... /= ... |
赋值 | 从右到左 | |
... %= ... |
赋值 | 从右到左 | |
... <<= ... |
赋值 | 从右到左 | |
... >>= ... |
赋值 | 从右到左 | |
... >>>= ... |
赋值 | 从右到左 | |
... &= ... |
赋值 | 从右到左 | |
... ^= ... |
赋值 | 从右到左 | |
... |= ... |
赋值 | 从右到左 | |
0 | ... , ... |
逗号 | 从左到右 |
【控制语句】
【if】
1 // if ... else if ... else ... 2 3 if (表达式) { 4 代码块; 5 } else if (表达式) { 6 代码块; 7 } else if (表达式) { 8 代码块; 9 } else { 10 代码块; 11 }
【switch】
1 var exp = 10; 2 3 switch ( exp ) { 4 case "10": 5 console.log("string 10"); 6 break; 7 case 10: 8 console.log("number 10"); 9 break; 10 case exp: 11 console.log("var exp"); 12 break; 13 default: 14 console.log("default"); 15 }
【for】
1 for (var i = 0; i < 3; ++i) { 2 console.log(i); 3 if( i >= 1) break; 4 }
【数据类型】
WXS 语言目前共有以下几种数据类型:需要注意的类型已标注蓝色加粗
number
: 数值string
:字符串boolean
:布尔值object
:对象function
:函数array
: 数组date
:日期regexp
:正则
数值
属性:constructor:返回字符串
"Number"
。
方法:
toString
toLocaleString
valueOf
toFixed
toExponential
toPrecision
字符串:
属性:
constructor
:返回字符串"String"
。length
方法:
toString
valueOf
charAt
charCodeAt
concat
indexOf
lastIndexOf
localeCompare
match
replace
search
slice
split
substring
toLowerCase
toLocaleLowerCase
toUpperCase
toLocaleUpperCase
trim
布尔值
属性:constructor
方法:
toString
valueOf
object:无序键值对--字典(处处透露着Python的影子)
function:支持匿名函数,闭包等:
【arguments 关键词】:该关键词支持以下属性
length
: 传递给函数的参数个数。[index]
: 通过index
下标可以遍历传递给函数的每个参数。
1 var a = function(){ 2 console.log(3 === arguments.length); 3 console.log(100 === arguments[0]); 4 console.log(200 === arguments[1]); 5 console.log(300 === arguments[2]); 6 }; 7 a(100,200,300);
1 var func = function (a,b,c) { } 2 3 console.log("Function" === func.constructor);#属性 4 console.log(3 === func.length); 5 console.log("[function Function]" === func.toString());#方法
array
1 var a = []; //生成一个新的空数组 2 3 a = [1,"2",{},function(){}]; //生成一个新的非空数组,数组元素可以是任何类型
方法:
toString
concat
join
pop
push
reverse
shift
slice
sort
splice
unshift
indexOf
lastIndexOf
every
some
forEach
map
filter
reduce
reduceRight
date:
1 getDate() 2 getDate(milliseconds) 3 getDate(datestring) 4 getDate(year, month[, date[, hours[, minutes[, seconds[, milliseconds]]]]])
示例代码
1 var date = getDate(); //返回当前时间对象 2 3 date = getDate(1500000000000); 4 // Fri Jul 14 2017 10:40:00 GMT+0800 (中国标准时间) 5 date = getDate('2017-7-14'); 6 // Fri Jul 14 2017 00:00:00 GMT+0800 (中国标准时间) 7 date = getDate(2017, 6, 14, 10, 40, 0, 0); 8 // Fri Jul 14 2017 10:40:00 GMT+0800 (中国标准时间)
方法:
1 toString 2 toDateString 3 toTimeString 4 toLocaleString 5 toLocaleDateString 6 toLocaleTimeString 7 valueOf 8 getTime 9 getFullYear 10 getUTCFullYear 11 getMonth 12 getUTCMonth 13 getDate 14 getUTCDate 15 getDay 16 getUTCDay 17 getHours 18 getUTCHours 19 getMinutes 20 getUTCMinutes 21 getSeconds 22 getUTCSeconds 23 getMilliseconds 24 getUTCMilliseconds 25 getTimezoneOffset 26 setTime 27 setMilliseconds 28 setUTCMilliseconds 29 setSeconds 30 setUTCSeconds 31 setMinutes 32 setUTCMinutes 33 setHours 34 setUTCHours 35 setDate 36 setUTCDate 37 setMonth 38 setUTCMonth 39 setFullYear 40 setUTCFullYear 41 toUTCString 42 toISOString 43 toJSON
regexp:正则表达式
【生成】getRegExp(pattern[, flags])
参数:
pattern
: 正则表达式的内容。flags
:修饰符。该字段只能包含以下字符:g
: globali
: ignoreCasem
: multiline。
示例代码:
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);
【数据类型判断】
1 var number = 10; 2 console.log( "Number" === number.constructor ); 3 4 var string = "str"; 5 console.log( "String" === string.constructor ); 6 7 var boolean = true; 8 console.log( "Boolean" === boolean.constructor ); 9 10 var object = {}; 11 console.log( "Object" === object.constructor ); 12 13 var func = function(){}; 14 console.log( "Function" === func.constructor ); 15 16 var array = []; 17 console.log( "Array" === array.constructor ); 18 19 var date = getDate(); 20 console.log( "Date" === date.constructor ); 21 22 var regexp = getRegExp(); 23 console.log( "RegExp" === regexp.constructor );
typeof 可以区分部分数据类型
1 var number = 10; 2 var boolean = true; 3 var object = {}; 4 var func = function(){}; 5 var array = []; 6 var date = getDate(); 7 var regexp = getRegExp(); 8 9 console.log( 'number' === typeof number ); 10 console.log( 'boolean' === typeof boolean ); 11 console.log( 'object' === typeof object ); 12 console.log( 'function' === typeof func ); 13 console.log( 'object' === typeof array ); 14 console.log( 'object' === typeof date ); 15 console.log( 'object' === typeof regexp ); 16 17 console.log( 'undefined' === typeof undefined ); 18 console.log( 'object' === typeof null );
【WXS提供的基础类库】:WXS 提供的方法
console
console.log
方法用于在 console 窗口输出信息。它可以接受多个参数,将它们的结果连接起来输出。
Math
属性
E
LN10
LN2
LOG2E
LOG10E
PI
SQRT1_2
SQRT2
以上属性的具体使用请参考
ES5
标准。
方法
abs
acos
asin
atan
atan2
ceil
cos
exp
floor
log
max
min
pow
random
round
sin
sqrt
tan
以上方法的具体使用请参考
ES5
标准。
JSON
方法
stringify(object)
: 将object
对象转换为JSON
字符串,并返回该字符串。parse(string)
: 将JSON
字符串转化成对象,并返回该对象。
示例代码:
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(){})));
Number
属性
MAX_VALUE
MIN_VALUE
NEGATIVE_INFINITY
POSITIVE_INFINITY
以上属性的具体使用请参考
ES5
标准。
Date
属性
parse
UTC
now
以上属性的具体使用请参考
ES5
标准。
Global
属性
NaN
Infinity
undefined
以上属性的具体使用请参考
ES5
标准。
方法
parseInt
parseFloat
isNaN
isFinite
decodeURI
decodeURIComponent
encodeURI
encodeURIComponent