小程序wxs语法的使用「建议收藏」

大家好，欢迎来到IT知识分享网。

一、WXS介绍

• WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。
• WXS 与 JavaScript 是不同的语言，有自己的语法，并不和 JavaScript 一致。
• WXS 的运行环境和其他 JavaScript 代码是隔离的，WXS 中不能调用其他 JavaScript 文件中定义的函数，也不能调用小程序提供的API。

二、WXS模块

WXS 代码可以编写在 wxml 文件中的 <wxs> 标签内，或以 .wxs 为后缀名的文件内。每一个 .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 函数。引用的时候，要注意如下几点：

• 只能引用 .wxs 文件模块，且必须使用相对路径。
• wxs 模块均为单例，wxs 模块在第一次被引用时，会自动初始化为单例对象。多个页面，多个地方，多次引用，使用的都是同一个 wxs 模块对象。
• 如果一个 wxs 模块在定义之后，一直没有被引用，则该模块不会被解析与运行。

// /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

3、<wxs> 标签

module 属性是当前 <wxs> 标签的模块名。在单个 wxml 文件内，建议其值唯一。有重复模块名则按照先后顺序覆盖（后者覆盖前者）。不同文件之间的 wxs 模块名不会相互覆盖。其命名必须符合下面两个规则：

• 首字符必须是：字母（a-zA-Z），下划线（_）
• 剩余字符可以是：字母（a-zA-Z），下划线（_）， 数字（0-9）

src 属性可以用来引用其他的 wxs 文件模块。引用的时候，要注意如下几点：

• 只能引用 .wxs 文件模块，且必须使用相对路径。
• wxs 模块均为单例，wxs 模块在第一次被引用时，会自动初始化为单例对象。多个页面，多个地方，多次引用，使用的都是同一个 wxs 模块对象。
• 如果一个 wxs 模块在定义之后，一直没有被引用，则该模块不会被解析与运行。

<!-- page/index/index.wxml -->
<wxs src="./../tools.wxs" module="tools" />
<view> {
  
  {tools.msg}} </view>  <!-- some msg -->
<view> {
  
  {tools.bar(tools.FOO)}} </view>  <!-- 'hello world' from tools.wxs -->

注：

• 模块只能在定义模块的 WXML 文件中被访问到。使用 <include> 或 <import> 时，<wxs>
  模块不会被引入到对应的 WXML 文件中。
• 标签中，只能使用定义该 <template> 的 WXML 文件中定义的 <wxs> 模块。

三、变量

WXS 中的变量均为值的引用。没有声明的变量直接赋值使用，会被定义为全局变量。如果只声明变量而不赋值，则默认值为 undefined。声明变量用var，其表现与javascript一致，会有变量提升，不支持let、const。变量命名必须符合下面两个规则：

• 首字符必须是：字母（a-zA-Z），下划线（_）
• 剩余字符可以是：字母（a-zA-Z），下划线（_）， 数字（0-9）

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 种注释的方法。如下：

<!-- wxml -->
<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:
    语句;
}

• default 分支可以省略不写。
• case 关键词后面只能使用：变量，数字，字符串。

3、for 语句

for (语句; 语句; 语句)
  语句;
for (语句; 语句; 语句) { 
   
  代码块;
}

• 支持使用 break，continue 关键词。

4、while 语句

while (表达式)
  语句;
while (表达式){ 
   
  代码块;
}
do { 
   
  代码块;
} while (表达式)

• 当表达式为 true 时，循环执行语句或代码块。
• 支持使用 break，continue 关键词。

七、数据类型

1、number： 数值
number 包括两种数值：整数，小数。
属性

• constructor：返回字符串 “Number”

方法（仅取常用方法）

• toString：将数值类型转换成字符串
• valueOf：指定对象的原始值
• toFixed：获取数值指定小数位数的数值

2、string：字符串
属性

• constructor：返回字符串 “String”
• length：返回该字符串的长度

方法（仅取常用方法）

• toString：转换成字符串
• valueOf：指定对象的原始值
• charAt：获取[String]指定位置的字符
• concat：连接两个或多个字符串，并返回连接后的结果
• indexOf：获取某个指定的字符串值在[String]中首次出现的位置
• lastIndexOf：指定的字符串值在[String]内最后出现的位置
• replace：在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串
• slice：返回指定起始位置与结束位置的字符，[String]位置序号从0开始
• split：把一个字符串分割成字符串数组

3、object：对象
object 是一种无序的键值对。
属性

• constructor：返回字符串 “Object”

方法

• toString：返回字符串 “[object Object]”。

4、function：函数
function 里面可以使用 arguments 关键词。该关键词目前只支持以下的属性：

• length: 传递给函数的参数个数。
• [index]: 通过 index 下标可以遍历传递给函数的每个参数。

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：返回字符串 “Function”
• length：返回函数的形参个数。

方法

• toString：返回字符串 “[object Object]”。

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。
属性

• constructor：返回字符串 “Boolean”

方法

• toString：转换成字符串
• valueOf：返回指定对象的原始值

6、array: 数组
属性

• constructor：返回字符串 “Array”
• length：返回数组长度

方法（仅取常用方法）

• toString：转换成字符串
• concat：连接多个数组，返回连接后的数组副本
• join：把数组中的所有元素以指定的分隔符组成一个字符串
• pop：函数返回数组[array]的最后一个元素，同时会将[array]的最后一个元素删除
• push：数组的末尾添加一个或多个元素，并返回新的长度
• shift：函数返回数组[array]的第一个元素，同时会将[array]的第一个元素删除
• slice：返回数组[Array]指定起始位置与结束位置的元素，并组合成新的数组
• splice：删除数组指定位置后的指定个数的元素，同时也可以用新的元素值替换被删除元素的位置
• unshift：向数组的开头添加一个或更多元素，并返回新的长度
• indexOf：返回数组中某个指定的元素位置
• every：用于检测数组所有元素是否都符合指定条件
• some：检测数组内是否含有满足条件的元素
• forEach：检测数组内是否含有满足条件的元素
• map：返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。它不会更改原数组的值
• filter：返回数组内符合条件的元素

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);

属性

• constructor：返回字符串 “Date”

方法（仅取常用方法）

• toString：把 Date 对象转换为字符串
• valueOf：返回 Date 对象的原始值
• getTime：返回距 1970 年 1 月 1 日之间的毫秒数
• getFullYear：从 Date 对象以四位数字返回年份
• getMonth：返回表示月份的数字。返回值是 0（一月） 到 11（十二月） 之间的一个整数
• getDate：返回月份的某一天。返回值是 1 ~ 31 之间的一个整数
• getDay：返回一周（0~6）的某一天的数字。星期天为 0, 星期一为 1, 以此类推
• getHours：返回时间的小时字段
• getMinutes：返回 Date 对象的分钟 (0 ~ 59)
• getSeconds：返回 Date 对象的秒数 (0 ~ 59)
• getMilliSeconds：返回 Date 对象的毫秒(0 ~ 999)
• setTime：以毫秒设置 Date 对象
• setFullYear：设置 Date 对象中的年份（四位数字）
• setMonth：设置 Date 对象中月份 (0 ~ 11)
• setDate：设置 Date 对象中月的某一天 (1 ~ 31)
• setHours：设置 Date 对象中的小时 (0 ~ 23)
• setMinutes：设置 Date 对象的分钟 (0 ~ 59)
• setSeconds：设置 Date 对象的秒数 (0 ~ 59)
• getMilliSeconds：设置 Date 对象的毫秒(0 ~ 999)

8、regexp：正则
生成 regexp 对象需要使用 getRegExp函数。getRegExp(pattern, flags)参数：

• pattern: [必需] 字符串或正则表达式
• flags：[可选] 可选值如下:
  • g: global表示是否是全局检索，默认false
  • i: ignoreCase表示是否忽略大小写，默认false
  • m: multiline表示是否多选，默认false

属性

• constructor：返回字符串 “RegExp”
• source：返回正则表达式的匹配模式，即参数：pattern
• global：返回是否设置了 “g” 修饰符
• ignoreCase：返回是否设置了 “i” 修饰符
• multiline：返回是否设置了 “m” 修饰符
• lastIndex：规定下次匹配的起始位置(该属性只有设置标志 g 才能使用)，可读可写，默认值0

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);

方法

• exec：根据正则表达式的条件，检索字符串中匹配的字符
• test：检测一个字符串是否匹配某个模式
• toString：返回正则表达式的字符串值

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对象用于执行数学任务。
属性

方法

3、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(){ 
   })));

4、Number
属性

5、Date
属性

6、Global
属性

• NaN
• Infinity
• undefined

方法：调用时，无需使用 Global.parseInt(…)，而是直接使用 parseInt(…)

九、参考资料

• WXS语法参考