当前位置 博文首页 > java1234的博客：WXS:微信小程序版JavaScript

最大化 缩小

    java1234的博客：WXS:微信小程序版JavaScript

    作者：[db:作者] 时间：2021-06-06 17:25

    完整微信小程序(Java后端) 技术贴目录清单页面（必看）
    WXS（WeiXin S## 标题cript）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。

    WXS 与 JavaScript 是不同的语言，有自己的语法，并不和 JavaScript 一致。

    3.9.1 模块

    WXS模块

    WXS 代码可以编写在 wxml 文件中的 <wxs> 标签内，或以 .wxs 为后缀名的文件内。

    模块

    每一个 .wxs 文件和 <wxs> 标签都是一个单独的模块。

    每个模块都有自己独立的作用域。即在一个模块里面定义的变量与函数，默认为私有的，对其他模块不可见。

    一个模块要想对外暴露其内部的私有变量与函数，只能通过 module.exports 实现。

    <wxs> 标签

    属性名类型默认值说明
    moduleString当前 <wxs> 标签的模块名。必填字段。
    srcString引用 .wxs 文件的相对路径。仅当本标签为单闭合标签或标签的内容为空时有效。

    module 属性

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

    module 属性值的命名必须符合下面两个规则：

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

    每个 wxs 模块均有一个内置的 module 对象。

    属性

    • exports: 通过该属性，可以对外共享本模块的私有变量与函数。

    实例：

    <!--wxml-->

<wxs module="foo">
var some_msg = "hello world";
    module.exports = {
  msg : some_msg,
}
</wxs>
<view> {{foo.msg}} </view>

    页面输出：

    hello world

    上面例子声明了一个名字为 foo 的模块，将 some_msg 变量暴露出来，供当前页面使用。

    src 属性

    src 属性可以用来引用其他的 wxs 文件模块。

    引用的时候，要注意如下几点：

    • 只能引用 .wxs 文件模块，且必须使用相对路径。
    • wxs 模块均为单例，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
};
module.exports.msg = "some msg";

    上述例子在 /pages/comm.wxs 的文件里面编写了 WXS 代码。该 .wxs 文件可以被其他的 .wxs 文件 或 WXML 中的 <wxs> 标签引用。

    wxs标签通过src引入；

    <wxs src="../../pages/comm.wxs" module="comm"/>
<view>{{comm.msg}}</view>
<view>{{comm.bar(comm.foo)}}</view>

    运行结果：

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LLW2lEK9-1621058415883)(image-20210513204454832.png)]

    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="../../pages/logic.wxs" module="logic" />

    控制台输出：

    'hello world' from tools.wxs
logic.wxs
some msg

    3.9.2 变量

    概念

    • 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）

    保留标识符

    以下标识符不能作为变量名：

    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

    3.9.3 注释

    WXS 主要有 3 种注释的方法。

    示例代码：

    <!-- wxml -->
<wxs module="sample">
// 方法一：单行注释

/*
方法二：多行注释
*/

/*
方法三：结尾注释。即从 /* 开始往后的所有 WXS 代码均被注释

var a = 1;
var b = 2;
var c = "fake";

</wxs>

    上述例子中，所有 WXS 代码均被注释掉了。

    方法三 和 方法二 的唯一区别是，没有 */ 结束符。

    3.9.4 运算符

    基本运算符

    示例代码：

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

    一元运算符

    示例代码：

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

    位运算符

    示例代码：

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

    比较运算符

    示例代码：

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

    等值运算符

    示例代码：

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

    赋值运算符

    示例代码：

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

    二元逻辑运算符

    示例代码：

    var a = 10, b = 20;

// 逻辑与
console.log(20 === (a && b));
// 逻辑或
console.log(10 === (a || b));

    其他运算符

    示例代码：

    var a = 10, b = 20;

//条件运算符
console.log(20 === (a >= 10 ? a + 10 : b + 10));
//逗号运算符
console.log(20 === (a, b));

    运算符优先级

    优先级运算符说明结合性
    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… = …赋值从右到左
    … += …赋值从右到左
    … -= …赋值从右到左
    … *= …赋值从右到左
    … /= …赋值从右到左
    … %= …赋值从右到左
    … <<= …赋值从右到左
    … >>= …赋值从右到左
    … >>>= …赋值从右到左
    … &= …赋值从右到左
    … ^= …赋值从右到左
    … ｜= …赋值从右到左
    0… , …逗号从左到右

    3.9.5 语句

    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 (表达式) {
  代码块;
}


// if ... else

if (表达式) 语句;
else 语句;

if (表达式)
  语句;
else
  语句;

if (表达式) {
  代码块;
} else {
  代码块;
}

// if ... else if ... else ...

if (表达式) {
  代码块;
} else if (表达式) {
  代码块;
} else if (表达式) {
  代码块;
} else {
  代码块;
}

    switch 语句

    示例语法：

    switch (表达式) {
  case 变量:
    语句;
  case 数字:
    语句;
    break;
  case 字符串:
    语句;
  default:
    语句;
}
    • default 分支可以省略不写。
    • case 关键词后面只能使用：变量，数字，字符串。

    示例代码：

    var exp = 10;

switch ( exp ) {
case "10":
  console.log("string 10");
  break;
case 10:
  console.log("number 10");
  break;
case exp:
  console.log("var exp");
  break;
default:
  console.log("default");
}

    输出：

    number 10

    for 语句

    示例语法：

    for (语句; 语句; 语句)
  语句;

for (语句; 语句; 语句) {
  代码块;
}
    • 支持使用 break，continue 关键词。

    示例代码：

    for (var i = 0; i < 3; ++i) {
  console.log(i);
  if( i >= 1) break;
}

    输出：

    0
1

    while 语句

    示例语法：

    while (表达式)
  语句;

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

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

    3.9.6 数据类型

    WXS 语言目前共有以下几种数据类型：

    • number ： 数值
    • string ：字符串
    • boolean：布尔值
    • object：对象
    • function：函数
    • array : 数组
    • date：日期
    • regexp：正则

    number

    语法

    number 包括两种数值：整数，小数。

    var a = 10;
var PI = 3.141592653589793;

    属性

    • constructor：返回字符串 "Number"。

    方法

    • toString
    • toLocaleString
    • valueOf
    • toFixed
    • toExponential
    • toPrecision

    以上方法的具体使用请参考 ES5 标准。

    string

    语法

    string 有两种写法：

    'hello world';
"hello world";

    属性

    • constructor：返回字符串 "String"。
    • length

    除constructor外属性的具体含义请参考 ES5 标准。

    方法

    • toString
    • valueOf
    • charAt
    • charCodeAt
    • concat
    • indexOf
    • lastIndexOf
    • localeCompare
    • match
    • replace
    • search
    • slice
    • split
    • substring
    • toLowerCase
    • toLocaleLowerCase
    • toUpperCase
    • toLocaleUpperCase
    • trim

    以上方法的具体使用请参考 ES5 标准。

    boolean

    语法

    布尔值只有两个特定的值：true 和 false。

    属性

    • constructor：返回字符串 "Boolean"。

    方法

    • toString
    • valueOf

    以上方法的具体使用请参考 ES5 标准。

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

    属性

    • constructor：返回字符串 "Object"。
    console.log("Object" === {k:"1",v:"2"}.constructor)

    方法

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

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

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

    属性

    • constructor：返回字符串 "Function"。
    • length：返回函数的形参个数。

    方法

    • toString：返回字符串 "[function Function]"。

    示例代码：

    var func = function (a,b,c) { }

console.log("Function" === func.constructor);
console.log(3 === func.length);
console.log("[function Function]" === func.toString());

    array

    语法

    array 支持以下的定义方式：

    var a = [];      //生成一个新的空数组

a = [1,"2",{},function(){}];  //生成一个新的非空数组，数组元素可以是任何类型

    属性

    • constructor：返回字符串 "Array"。
    • length

    除constructor外属性的具体含义请参考 ES5 标准。

    方法

    • toString
    • concat
    • join
    • pop
    • push
    • reverse
    • shift
    • slice
    • sort
    • splice
    • unshift
    • indexOf
    • lastIndexOf
    • every
    • some
    • forEach
    • map
    • filter
    • reduce
    • reduceRight

    以上方法的具体使用请参考 ES5 标准。

    date

    语法

    上一篇：java1234的博客：Sentinel返回布尔值方式定义资源
    下一篇：没有了