欢迎您的光临,本博所发布之文章皆为作者亲测通过,如有错误,欢迎通过各种方式指正。由于本站位于香港虚拟主机,故速度比较慢。

文摘  微信小程序之脚本语言WXS详解

工具应用 网络 238 0评论

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> 标签的模块名。必填字段。

srcString引用 .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详解

最后更新:2019-01-17 19:15:19

赞 (2) or 分享 ()
游客 发表我的评论   换个身份
取消评论

表情
(0)个小伙伴在吐槽