WXS

WXS 模塊

WXS 代碼可以編寫在 wxml 文件中的 <wxs> 標簽內，或以 .wxs 為后綴名的文件內。

模塊

每一個 .wxs 文件和 <wxs> 標簽都是一個單獨的模塊。

每個模塊都有自己獨立的作用域。即在一個模塊里面定義的變量與函數，默認為私有的，對其他模塊不可見。

一個模塊要想對外暴露其內部的私有變量與函數，只能通過 module.exports 實現。

.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> 標簽引用。

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

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

<wxs> 標簽

屬性名|類型|默認值|說明
module|String||當前 <wxs> 標簽的模塊名。必填字段。
src|String||引用 .wxs 文件的相對路徑。僅當本標簽為單閉合標簽或標簽的內容為空時有效。

module 屬性

module 屬性是當前 <wxs> 標簽的模塊名。在單個 wxml 文件內，建議其值唯一。有重復模塊名則按照先后順序覆蓋（后者覆蓋前者）。不同文件之間的 wxs 模塊名不會相互覆蓋。

module 屬性值的命名必須符合下面兩個規則：

• 首字符必須是：字母（a-zA-Z），下劃線（_）
• 剩余字符可以是：字母（a-zA-Z），下劃線（_）， 數字（0-9）

示例代碼：
在開發者工具中預覽效果

<!--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/index/index.js Page({data: {msg: "'hello wrold' from js",} }) <!-- /pages/index/index.wxml --> <wxs src="./../comm.wxs" module="some_comms"></wxs> <!-- 也可以直接使用單標簽閉合的寫法 <wxs src="./../comm.wxs" module="some_comms" /> --><!-- 調用 some_comms 模塊里面的 bar 函數，且參數為 some_comms 模塊里面的 foo --> <view> {{some_comms.bar(some_comms.foo)}} </view> <!-- 調用 some_comms 模塊里面的 bar 函數，且參數為 page/index/index.js 里面的 msg --> <view> {{some_comms.bar(msg)}} </view>

頁面輸出：

'hello world' from comm.wxs 'hello wrold' from js

上述例子在文件 /page/index/index.wxml 中通過 <wxs> 標簽引用了 /page/comm.wxs 模塊。

注意

• <wxs> 模塊只能在定義模塊的 WXML 文件中被訪問到。使用 <include> 或 <import> 時，<wxs> 模塊不會被引入到對應的 WXML 文件中。
• <template> 標簽中，只能使用定義該 <template> 的 WXML 文件中定義的 <wxs> 模塊。

變量

概念

• 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 typeofnull undefined NaN Infinity varif elsetrue falserequirethis function arguments returnfor 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 代碼均被注釋掉了。

方法三 和 方法二 的唯一區別是，沒有 */ 結束符。

運算符

基本運算符

示例代碼：

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	… , …	逗號	從左到右

語句

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 關鍵詞。

數據類型

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

語法

生成 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 (中國標準時間)

屬性

• constructor：返回字符串 “Date”。

方法

• toString
• toDateString
• toTimeString
• toLocaleString
• toLocaleDateString
• toLocaleTimeString
• valueOf
• getTime
• getFullYear
• getUTCFullYear
• getMonth
• getUTCMonth
• getDate
• getUTCDate
• getDay
• getUTCDay
• getHours
• getUTCHours
• getMinutes
• getUTCMinutes
• getSeconds
• getUTCSeconds
• getMilliseconds
• getUTCMilliseconds
• getTimezoneOffset
• setTime
• setMilliseconds
• setUTCMilliseconds
• setSeconds
• setUTCSeconds
• setMinutes
• setUTCMinutes
• setHours
• setUTCHours
• setDate
• setUTCDate
• setMonth
• setUTCMonth
• setFullYear
• setUTCFullYear
• toUTCString
• toISOString
• toJSON

以上方法的具體使用請參考 ES5 標準。

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

屬性

• constructor：返回字符串 “RegExp”。
• source
• global
• ignoreCase
• multiline
• lastIndex

除constructor外屬性的具體含義請參考 ES5 標準。

方法

• exec
• test
• toString

以上方法的具體使用請參考 ES5 標準。

數據類型判斷

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

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

基礎類庫

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

以上方法的具體使用請參考 ES5 標準。

注：轉載自官方文檔

總結

以上是生活随笔為你收集整理的微信小程序开发2.框架-视图层-WXS的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。