WXS

WXS（WeiXin Script）是小程序的一套腳本語言，結合 WXML，可以構建出頁面的結構。

注意

1. wxs 不依賴於運行時的基礎庫版本，可以在所有版本的小程序中運行。
2. wxs 與 javascript 是不同的語言，有自己的語法，並不和 javascript 一致。
3. wxs 的運行環境和其他 javascript 代碼是隔離的，wxs 中不能調用其他 javascript 文件中定義的函數，也不能調用小程序提供的API。
4. wxs 函數不能作為組件的事件回調。
5. 由於運行環境的差異，在 iOS 設備上小程序內的 wxs 會比 javascript 代碼快 2 ~ 20 倍。在 android 設備上二者運行效率無差異。

以下是一些使用 WXS 的簡單示例：

頁面渲染

<!--wxml-->
<wxs module="m1">
var msg = "hello world";

module.exports.message = msg;
</wxs>

<view> {{m1.message}} </view>

頁面輸出：

hello world

數據處理

// 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

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 
typeof

null 
undefined 
NaN 
Infinity 
var

if 
else 

true 
false

require

this 
function 
arguments
return

for
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 標准。

WXSS

WXSS(WeiXin Style Sheets)是一套樣式語言，用於描述 WXML 的組件樣式。

WXSS 用來決定 WXML 的組件應該怎么顯示。

為了適應廣大的前端開發者，WXSS 具有 CSS 大部分特性。同時為了更適合開發微信小程序，WXSS 對 CSS 進行了擴充以及修改。

與 CSS 相比，WXSS 擴展的特性有：

• 尺寸單位
• 樣式導入

尺寸單位

• rpx（responsive pixel）: 可以根據屏幕寬度進行自適應。規定屏幕寬為750rpx。如在 iPhone6 上，屏幕寬度為375px，共有750個物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

設備	rpx換算px (屏幕寬度/750)	px換算rpx (750/屏幕寬度)
iPhone5	1rpx = 0.42px	1px = 2.34rpx
iPhone6	1rpx = 0.5px	1px = 2rpx
iPhone6 Plus	1rpx = 0.552px	1px = 1.81rpx

建議： 開發微信小程序時設計師可以用 iPhone6 作為視覺稿的標准。

注意： 在較小的屏幕上不可避免的會有一些毛刺，請在開發時盡量避免這種情況。

樣式導入

使用@import語句可以導入外聯樣式表，@import后跟需要導入的外聯樣式表的相對路徑，用;表示語句結束。

示例代碼：

/** common.wxss **/
.small-p {
  padding:5px;
}

/** app.wxss **/
@import "common.wxss";
.middle-p {
  padding:15px;
}

內聯樣式

框架組件上支持使用 style、class 屬性來控制組件的樣式。

• style：靜態的樣式統一寫到 class 中。style 接收動態的樣式，在運行時會進行解析，請盡量避免將靜態的樣式寫進 style 中，以免影響渲染速度。

<view style="color:{{color}};" />

• class：用於指定樣式規則，其屬性值是樣式規則中類選擇器名(樣式類名)的集合，樣式類名不需要帶上.，樣式類名之間用空格分隔。

<view class="normal_view" />

選擇器

目前支持的選擇器有：

選擇器	樣例	樣例描述
.class	.intro	選擇所有擁有 class="intro" 的組件
#id	#firstname	選擇擁有 id="firstname" 的組件
element	view	選擇所有 view 組件
element, element	view, checkbox	選擇所有文檔的 view 組件和所有的 checkbox 組件
::after	view::after	在 view 組件后邊插入內容
::before	view::before	在 view 組件前邊插入內容

全局樣式與局部樣式

定義在 app.wxss 中的樣式為全局樣式，作用於每一個頁面。在 page 的 wxss 文件中定義的樣式為局部樣式，只作用在對應的頁面，並會覆蓋 app.wxss 中相同的選擇器。

未完待續,下一章節,つづく