3-3 官方文档整理-视图层-WXS

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

【数据类型判断】

 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

posted @ 2018-09-13 09:41 chd_ailex 阅读(562) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部