1.WXS简介
WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。
是JS、JSON、WXML、WXSS之后又一大小程序内部文件类型。截至到目前小程序已经提供了5种文件类型。
注意
· wxs 不依赖于运行时的基础库版本，可以在所有版本的小程序中运行。
· wxs 与 javascript 是不同的语言，有自己的语法，并不和 javascript 一致。
· wxs 的运行环境和其他 javascript 代码是隔离的，wxs 中不能调用其他 javascript 文件中定义的函数，也不能调用小程序提供的API。
· wxs 函数不能作为组件的事件回调。
· 由于运行环境的差异，在 iOS 设备上小程序内的 wxs 会比 javascript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。
以下是一些使用 WXS 的简单示例：
1）页面渲染
<!--wxml-->
<wxs module="m1">var msg = "hello world"; module.exports.message = msg;</wxs>
<view>{{m1.message}}</view>页面输出：
hello world
2）数据处理
// page.js
Page({
data: {
array: [1, 2, 3, 4, 5, 1, 2, 3, 4]
}
})<!--wxml-->
<!-- 下面的 getMax 函数，接受一个数组，且返回数组中最大的元素的值 -->
<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><!-- 调用 wxs 里面的 getMax 函数，参数为 page.js 里面的 array -->
<view>{{m1.getMax(array)}}</view>页面输出：
5
2.WXS 模块
WXS 代码可以编写在 wxml 文件中的 <wxs> 标签内，或以 .wxs 为后缀名的文件内。
· 每一个 .wxs 文件和 <wxs> 标签都是一个单独的模块。
· 每个模块都有自己独立的作用域。即在一个模块里面定义的变量与函数，默认为私有的，对其他模块不可见。
· 一个模块要想对外暴露其内部的私有变量与函数，只能通过 module.exports 实现。
1）.wxs 文件
在微信开发者工具里面，右键可以直接创建 .wxs 文件，在其中直接编写 WXS 脚本。
示例代码：
// /pages/comm.wxs
var foo = "'hello world' from comm.wxs";
var bar = function(d) {
return d;
}
module.exports = {
foo: foo,
bar: bar
};上述例子在 /pages/comm.wxs 的文件里面编写了 WXS 代码。该 .wxs 文件可以被其他的 .wxs 文件 或 WXML 中的 <wxs> 标签引用。
2）module 对象
每个 wxs 模块均有一个内置的 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";<!-- 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
3）require函数
在.wxs模块中引用其他 wxs 文件模块，可以使用 require 函数。
引用的时候，要注意如下几点：
· 只能引用 .wxs 文件模块，且必须使用相对路径。
· wxs 模块均为单例，wxs 模块在第一次被引用时，会自动初始化为单例对象。多个页面，多个地方，多次引用，使用的都是同一个 wxs 模块对象。
· 如果一个 wxs 模块在定义之后，一直没有被引用，则该模块不会被解析与运行。
示例代码：
// /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";// /pages/logic.wxs
var 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.wxs
logic.wxs
some msg
4）<wxs> 标签
module：String当前 <wxs> 标签的模块名。必填字段。
src：String引用 .wxs 文件的相对路径。仅当本标签为单闭合标签或标签的内容为空时有效。
module 属性
module 属性是当前 <wxs> 标签的模块名。在单个 wxml 文件内，建议其值唯一。有重复模块名则按照先后顺序覆盖（后者覆盖前者）。不同文件之间的 wxs 模块名不会相互覆盖。
module 属性值的命名必须符合下面两个规则：
· 首字符必须是：字母（a-zA-Z），下划线（_）
· 剩余字符可以是：字母（a-zA-Z），下划线（_）， 数字（0-9）
src 属性
src 属性可以用来引用其他的 wxs 文件模块。
引用的时候，要注意如下几点：
· 只能引用 .wxs 文件模块，且必须使用相对路径。
· wxs 模块均为单例，wxs 模块在第一次被引用时，会自动初始化为单例对象。多个页面，多个地方，多次引用，使· 用的都是同一个 wxs 模块对象。
· 如果一个 wxs 模块在定义之后，一直没有被引用，则该模块不会被解析与运行。
注意
<wxs> 模块只能在定义模块的 WXML 文件中被访问到。使用 <include> 或 <import> 时，<wxs> 模块不会被引入到对应的 WXML 文件中。
<template> 标签中，只能使用定义该 <template> 的 WXML 文件中定义的 <wxs> 模块。
3.变量
· WXS 中的变量均为值的引用。
· 没有声明的变量直接赋值使用，会被定义为全局变量。
· 如果只声明变量而不赋值，则默认值为 undefined。
· var表现与javascript一致，会有变量提升。
var foo = 1; var bar = "hello world"; var i; // i === undefined
上面代码，分别声明了 foo、 bar、 i 三个变量。然后，foo 赋值为数值 1 ，bar 赋值为字符串 "hello world"。
变量名
变量命名必须符合下面两个规则：
· 首字符必须是：字母（a-zA-Z），下划线（_）
· 剩余字符可以是：字母（a-zA-Z），下划线（_）， 数字（0-9）
4.运算符
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 a = '.w' , b = 'xs';
// 字符串拼接
console.log('.wxs' === a + b);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(-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);3）位运算符
示例代码：
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));
4）比较运算符
示例代码：
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));
5）等值运算符
示例代码：
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));
6）赋值运算符
示例代码：
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);
7）二元逻辑运算符
示例代码：
var a = 10, b = 20; // 逻辑与 console.log(20 === (a && b)); // 逻辑或 console.log(10 === (a || b));
8）其他运算符
示例代码：
var a = 10, b = 20; //条件运算符 console.log(20 === (a >= 10 ? a + 10 : b + 10)); //逗号运算符 console.log(20 === (a, b));
5.数据类型
WXS 语言目前共有以下几种数据类型：
number ： 数值
string ：字符串
boolean：布尔值
object：对象
function：函数
array : 数组
date：日期
regexp：正则
1）number
语法
number 包括两种数值：整数，小数。
var a = 10;
var PI = 3.141592653589793;
2）string
语法
string 有两种写法：
'hello world';
"hello world";
3）boolean
语法
布尔值只有两个特定的值：true 和 false。
4）object
语法
object 是一种无序的键值对。使用方法如下所示：
var o = {} //生成一个新的空对象
//生成一个新的非空对象
o = {
'string' : 1, //object 的 key 可以是字符串
const_var : 2, //object 的 key 也可以是符合变量定义规则的标识符
func : {}, //object 的 value 可以是任何类型
};
//对象属性的读操作
console.log(1 === o['string']);
console.log(2 === o.const_var);
//对象属性的写操作
o['string']++;
o['string'] += 10;
o.const_var++;
o.const_var += 10;
//对象属性的读操作
console.log(12 === o['string']);
console.log(13 === o.const_var);5）function
语法
function 支持以下的定义方式：
//方法 1
function a (x) {
return x;
}
//方法 2
var b = function (x) {
return x;
}
function 同时也支持以下的语法（匿名函数，闭包等）：
var a = function (x) {
return function () { return x;}
}
var b = a(100);
console.log( 100 === b() );6）arguments
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);7）array
语法
array 支持以下的定义方式：
var a = []; //生成一个新的空数组
a = [1,"2",{},function(){}]; //生成一个新的非空数组，数组元素可以是任何类型
8）date
语法
生成 date 对象需要使用 getDate函数, 返回一个当前时间的对象。
getDate()
getDate(milliseconds)
getDate(datestring)
getDate(year, month[, date[, hours[, minutes[, seconds[, milliseconds]]]]])
参数
milliseconds: 从1970年1月1日00:00:00 UTC开始计算的毫秒数
datestring: 日期字符串，其格式为："month day, year hours:minutes:seconds"
示例代码：
var date = getDate(); //返回当前时间对象
date = getDate(1500000000000);
// Fri Jul 14 2017 10:40:00 GMT+0800 (中国标准时间)
date = getDate('2017-7-14');
// Fri Jul 14 2017 00:00:00 GMT+0800 (中国标准时间)
date = getDate(2017, 6, 14, 10, 40, 0, 0);
// Fri Jul 14 2017 10:40:00 GMT+0800 (中国标准时间)9）regexp
语法
生成 regexp 对象需要使用 getRegExp函数。
getRegExp(pattern[, flags])
参数：
pattern: 正则表达式的内容。
flags：修饰符。该字段只能包含以下字符:
g: global
i: ignoreCase
m: 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);6.数据类型判断
1）constructor 属性
数据类型的判断可以使用 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 );2）typeof
使用 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 );7.语句
1）if 语句
在 WXS 中，可以使用以下格式的 if 语句 ：
if (expression) statement ： 当 expression 为 truthy 时，执行 statement。
if (expression) statement1 else statement2 : 当 expression 为 truthy 时，执行 statement1。 否则，执行 statement2
if ... else if ... else statementN 通过该句型，可以在 statement1 ~ statementN 之间选其中一个执行。
示例语法：
// if ...
if (表达式) 语句;
if (表达式)
语句;
if (表达式) {
代码块;
}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 关键词。
基础类库：
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxs/07basiclibrary.html
原文地址：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxs/
转载请注明： ITTXX.CN--分享互联网 » 微信小程序之脚本语言WXS详解
最后更新：2020-04-18 00:24:28