• WXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构。
• WXS 与 JavaScript 是不同的语言,有自己的语法,并不和 JavaScript 一致。
• WXS 的运行环境和其他 JavaScript 代码是隔离的,WXS 中不能调用其他 JavaScript 文件中定义的函数,也不能调用小程序提供的API。
WXS 代码可以编写在 wxml 文件中的
标签内,或以 .wxs 为后缀名的文件内。每一个 .wxs 文件和
标签都是一个单独的模块。每个模块都有自己独立的作用域,即在一个模块里面定义的变量与函数,默认为私有的,对其他模块不可见。
1、module对象
每个 wxs 模块均有一个内置的 module 对象,通过exports属性,可以对外共享本模块的私有变量与函数。即一个模块要想对外暴露其内部的私有变量与函数,只能通过 module.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";
2、require函数
在.wxs模块中引用其他 wxs 文件模块,可以使用 require 函数。引用的时候,要注意如下几点:
// /pages/logic.wxs
var tools = require("./tools.wxs");
console.log(tools.FOO); // 'hello world' from tools.wxs
console.log(tools.bar("logic.wxs")); // logic.wxs
console.log(tools.msg); // some msg
module 属性是当前
标签的模块名。在单个 wxml 文件内,建议其值唯一。有重复模块名则按照先后顺序覆盖(后者覆盖前者)。不同文件之间的 wxs 模块名不会相互覆盖。其命名必须符合下面两个规则:
src 属性可以用来引用其他的 wxs 文件模块。引用的时候,要注意如下几点:
<wxs src="./../tools.wxs" module="tools" />
<view> {{tools.msg}} view>
<view> {{tools.bar(tools.FOO)}} view>
注:
或
时,
的 WXML 文件中定义的
模块。WXS 中的变量均为值的引用。没有声明的变量直接赋值使用,会被定义为全局变量。如果只声明变量而不赋值,则默认值为 undefined。声明变量用var,其表现与javascript一致,会有变量提升,不支持let、const。变量命名必须符合下面两个规则:
var foo = 1;
var bar = "hello world";
var i; // i === undefined
// 上面代码,分别声明了 foo、 bar、 i 三个变量
// 然后,foo 赋值为数值 1 ,bar 赋值为字符串 "hello world"
<!-- 以下标识符不能作为变量名 -->
delete void typeof
null undefined NaN Infinity var
if else
true false
require
this function arguments return
for while do break continue switch case default
WXS 主要有 3 种注释的方法。如下:
<wxs module="sample">
// 方法一:单行注释
/*
方法二:多行注释
*/
/*
方法三:结尾注释。即从 /* 开始往后的所有 WXS 代码均被注释
var a = 1;
var b = 2;
var c = "fake";
wxs>
上述例子中,所有 WXS 代码均被注释掉了。方法三 和 方法二 的唯一区别是,没有 */ 结束符。
1、基本运算符
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 c = '.w' , d = 'xs';
console.log('.wxs' === c + d);
2、一元运算符
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(false === !a);
// delete 运算
console.log(true === delete a.fake);
// void 运算
console.log(undefined === void a);
// typeof 运算
console.log("number" === typeof a);
3、比较运算符
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));
4、等值运算符
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));
5、赋值运算符
var a = 10, b = 20;
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);
6、其他运算符
var a = 10, b = 20;
// 逻辑与
console.log(20 === (a && b));
// 逻辑或
console.log(10 === (a || b));
//条件运算符
console.log(20 === (a >= 10 ? a + 10 : b + 10));
//逗号运算符
console.log(20 === (a, b));
注:以上只取了经常用到的运算,详见:链接
1、if 语句
// if ...
if (表达式) 语句;
if (表达式)
语句;
if (表达式) {
代码块;
}
// if ... else
if (表达式) 语句;
else 语句;
if (表达式)
语句;
else
语句;
if (表达式) {
代码块;
} else {
代码块;
}
// if ... else if ... else ...
if (表达式) {
代码块;
} else if (表达式) {
代码块;
} else if (表达式) {
代码块;
} else {
代码块;
}
2、switch 语句
switch (表达式) {
case 变量:
语句;
case 数字:
语句;
break;
case 字符串:
语句;
default:
语句;
}
3、for 语句
for (语句; 语句; 语句)
语句;
for (语句; 语句; 语句) {
代码块;
}
4、while 语句
while (表达式)
语句;
while (表达式){
代码块;
}
do {
代码块;
} while (表达式)
1、number: 数值
number 包括两种数值:整数,小数。
属性
方法(仅取常用方法)
2、string:字符串
属性
方法(仅取常用方法)
3、object:对象
object 是一种无序的键值对。
属性
方法
4、function:函数
function 里面可以使用 arguments 关键词。该关键词目前只支持以下的属性:
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);
属性
方法
var func = function (a,b,c) { }
console.log("Function" === func.constructor);
console.log(3 === func.length);
console.log("[function Function]" === func.toString());
5、boolean:布尔值
布尔值只有两个特定的值:true 和 false。
属性
方法
6、array: 数组
属性
方法(仅取常用方法)
7、date:日期
生成 date 对象需要使用 getDate函数, 返回一个当前时间的对象。
var date = getDate(); //返回当前时间对象
// 从1970年1月1日00:00:00 UTC开始计算的毫秒数
// Fri Jul 14 2017 10:40:00 GMT+0800 (中国标准时间)
date = getDate(1500000000000);
// 日期字符串
// Fri Jul 14 2017 00:00:00 GMT+0800 (中国标准时间)
date = getDate('2017-7-14');
// 日期字符串,其格式为:"month day, year hours:minutes:seconds"
// Fri Jul 14 2017 10:40:00 GMT+0800 (中国标准时间)
date = getDate(2017, 6, 14, 10, 40, 0, 0);
属性
方法(仅取常用方法)
8、regexp:正则
生成 regexp 对象需要使用 getRegExp函数。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);
方法
var regexp = getRegExp('\d+', 'img'); // 匹配数字
regexp.lastIndex = 3; // 设置起始检索位置为3
var k = regexp.exec('af4edw2dfe'); // 从位置3开始找出 "af4edw2dfe"中第一个数字
9、数据类型判断
constructor 属性,示例代码:
var number = 10;
console.log( "Number" === number.constructor );
var string = "str";
console.log( "String" === string.constructor );
var boolean = true;
console.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 ,示例代码:
var number = 10;
var boolean = true;
var 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 );
1、console
console.log 方法用于在 console 窗口输出信息。它可以接受多个参数,将它们的结果连接起来输出。
2、Math
Math对象用于执行数学任务。
属性
名称 | 说明 |
---|---|
Math.E | 代表算术常量 e,即自然对数的底数,其值近似于 2.71828 |
Math.LN10 | 就是 loge10,即 10 的自然对数,其值近似于 2.3025850929940459011 |
Math.LN2 | 就是 loge2,即 2 的自然对数,其值近似于 0.69314718055994528623 |
Math.LOG2E | 就是 log2e,即以 2 为底 e 的对数,其值近似于 1.442695040888963387 |
Math.LOG10E | 就是 log10e,即以 10 为底 e 的对数,其值近似于 0.43429448190325181667 |
Math.PI | 返回圆的周长和它的直径之比,即圆周率 |
Math.SQRT1_2 | 返回 2 的平方根的倒数。这个值近似为 0.7071067811865476 |
Math.SQRT2 | 返回 2 的平方根。这个值近似为 1.4142135623730951 |
方法
名称 | 说明 |
---|---|
Math.abs(x) | 返回数的绝对值 |
Math.acos(x) | 返回数的反余弦值 |
Math.asin(x) | 返回数的反正弦值 |
Math.atan(x) | 以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值 |
Math.atan2(y,x) | 返回从 x 轴到点 (x,y) 的角度(介于 -PI/2 与 PI/2 弧度之间) |
Math.ceil(x) | 执行的是向上取整计算,它返回的是大于或等于函数参数,并且与之最接近的整数 |
Math.exp(x) | 返回 e 的指数 |
Math.floor(x) | 执行的是向下取整计算,它返回的是小于或等于函数参数,并且与之最接近的整数 |
Math.log(x) | 返回数的自然对数(底为e) |
Math.max(x,y,z…) | 返回参数中的最高值 |
Math.min(x,y,z…) | 返回参数中的最低值 |
Math.pow(x,y) | 返回 x 的 y 次幂 |
Math.random() | 返回 0 ~ 1 之间的随机数 |
Math.round(x) | 把一个数字舍入为最接近的整数 |
Math.sin(x) | 返回数的正弦 |
Math.sqrt(x) | 返回数的平方根 |
Math.tan(x) | 返回角的正切 |
3、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(){})));
4、Number
属性
名称 | 说明 |
---|---|
Number.MAX_VALUE | 返回JS中可表示的最大的数 |
Number.MIN_VALUE | 返回JS中可表示的最小的数。(接近 0,但不是负数) |
Number.NEGATIVE_INFINITY | 负无穷大,溢出时返回该值 |
Number.POSITIVE_INFINITY | 正无穷大,溢出时返回该值 |
5、Date
属性
名称 | 说明 |
---|---|
Date.parse( [dateString] ) | 解析一个日期时间字符串,并返回 1970/1/1 午夜距离该日期时间的毫秒数 |
Date.UTC(year,month,day,hours,minutes,seconds,ms) | 根据世界时返回 1970 年 1 月 1 日 到指定日期的毫秒数。参数:year/month/day 必须 |
Date.now() | 返回自1970年1月1日 00:00:00 UTC到当前时间的毫秒数 |
6、Global
属性
方法:调用时,无需使用 Global.parseInt(…),而是直接使用 parseInt(…)
名称 | 说明 |
---|---|
parseInt(string, radix) | 解析一个字符串,并返回一个整数。string 必需,要被解析的字符串;radix 可选,表示要解析的数字的基数,该值介于 2 ~ 36 之间,即十进制解析,还是十六进制解析。 |
parseFloat(string) | 解析一个字符串,并返回一个浮点数。如果非数值,则返回为 NaN |
isNaN(x) | 返回true表示x不是数值,否则是数值 |
isFinite(number) | 检查其参数是否是无穷大。有限数字返回true,正、负无穷大的数或非数字返回false |
decodeURI(URIstring) | 对 encodeURI() 函数编码过的 URI 进行解码 |
decodeURIComponent(URIstring) | 对 encodeURIComponent() 函数编码过的 URI 进行解码 |
encodeURI(URIstring) | 把字符串作为 URI 进行编码。它保持 http://中的特殊字符 |
encodeURIComponent(URIstring) | 把字符串作为 URI 组件进行编码。它会连http:// 中的 / 都编码 |
• WXS语法参考