WXS

WXS（WeiXin Script）是小程序的一套腳本語言，結(jié)合?WXML，可以構(gòu)建出頁面的結(jié)構(gòu)。

注意

wxs 不依賴于運(yùn)行時的基礎(chǔ)庫版本，可以在所有版本的小程序中運(yùn)行。

wxs 與 javascript 是不同的語言，有自己的語法，并不和 javascript 一致。

wxs 的運(yùn)行環(huán)境和其他 javascript 代碼是隔離的，wxs 中不能調(diào)用其他 javascript 文件中定義的函數(shù)，也不能調(diào)用小程序提供的API。

wxs 函數(shù)不能作為組件的事件回調(diào)。

由于運(yùn)行環(huán)境的差異，在 iOS 設(shè)備上小程序內(nèi)的 wxs 會比 javascript 代碼快 2 ~ 20 倍。在 android 設(shè)備上二者運(yùn)行效率無差異。

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

頁面渲染

<!--wxml--> <wxs module="m1"> var msg = "hello world";module.exports.message = msg; </wxs><view> {{m1.message}} </view>

頁面輸出：

hello world

數(shù)據(jù)處理

// page.js Page({data: {array: [1, 2, 3, 4, 5, 1, 2, 3, 4]} }) <!--wxml--> <!-- 下面的 getMax 函數(shù)，接受一個數(shù)組，且返回數(shù)組中最大的元素的值 --> <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><!-- 調(diào)用 wxs 里面的 getMax 函數(shù)，參數(shù)為 page.js 里面的 array --> <view> {{m1.getMax(array)}} </view>

頁面輸出：

5

WXS 模塊

WXS 代碼可以編寫在 wxml 文件中的?<wxs>?標(biāo)簽內(nèi)，或以?.wxs?為后綴名的文件內(nèi)。

模塊

每一個?.wxs?文件和?<wxs>?標(biāo)簽都是一個單獨(dú)的模塊。

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

一個模塊要想對外暴露其內(nèi)部的私有變量與函數(shù)，只能通過?module.exports?實(shí)現(xiàn)。

.wxs 文件

在微信開發(fā)者工具里面，右鍵可以直接創(chuàng)建?.wxs?文件，在其中直接編寫 WXS 腳本。

示例代碼：

// /pages/comm.wxsvar 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>?標(biāo)簽引用。

module 對象

每個?wxs?模塊均有一個內(nèi)置的?module?對象。

屬性

• exports: 通過該屬性，可以對外共享本模塊的私有變量與函數(shù)。

示例代碼：

在開發(fā)者工具中預(yù)覽效果

// /pages/tools.wxsvar 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函數(shù)

在.wxs模塊中引用其他?wxs?文件模塊，可以使用?require?函數(shù)。

引用的時候，要注意如下幾點(diǎn)：

• 只能引用?.wxs?文件模塊，且必須使用相對路徑。
• wxs?模塊均為單例，wxs?模塊在第一次被引用時，會自動初始化為單例對象。多個頁面，多個地方，多次引用，使用的都是同一個?wxs?模塊對象。
• 如果一個?wxs?模塊在定義之后，一直沒有被引用，則該模塊不會被解析與運(yùn)行。

示例代碼：

在開發(fā)者工具中預(yù)覽效果

// /pages/tools.wxsvar 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.wxsvar 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>?標(biāo)簽

屬性名類型默認(rèn)值說明

module	String	?	當(dāng)前?<wxs>?標(biāo)簽的模塊名。必填字段。
src	String	?	引用 .wxs 文件的相對路徑。僅當(dāng)本標(biāo)簽為單閉合標(biāo)簽或標(biāo)簽的內(nèi)容為空時有效。

module 屬性

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

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

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

示例代碼：

在開發(fā)者工具中預(yù)覽效果

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

頁面輸出：

hello world

上面例子聲明了一個名字為?foo?的模塊，將?some_msg?變量暴露出來，供當(dāng)前頁面使用。

src 屬性

src 屬性可以用來引用其他的?wxs?文件模塊。

引用的時候，要注意如下幾點(diǎn)：

• 只能引用?.wxs?文件模塊，且必須使用相對路徑。
• wxs?模塊均為單例，wxs?模塊在第一次被引用時，會自動初始化為單例對象。多個頁面，多個地方，多次引用，使用的都是同一個?wxs?模塊對象。
• 如果一個?wxs?模塊在定義之后，一直沒有被引用，則該模塊不會被解析與運(yùn)行。

示例代碼：

在開發(fā)者工具中預(yù)覽效果

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

注意

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

變量

概念

• WXS 中的變量均為值的引用。
• 沒有聲明的變量直接賦值使用，會被定義為全局變量。
• 如果只聲明變量而不賦值，則默認(rèn)值為?undefined。
• var表現(xiàn)與javascript一致，會有變量提升。

var foo = 1; var bar = "hello world"; var i; // i === undefined

上面代碼，分別聲明了?foo、?bar、?i?三個變量。然后，foo?賦值為數(shù)值?1?，bar?賦值為字符串?"hello world"。

變量名

變量命名必須符合下面兩個規(guī)則：

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

保留標(biāo)識符

以下標(biāo)識符不能作為變量名：

delete void typeofnull undefined NaN Infinity varif else true falserequirethis function arguments returnfor while do break continue switch case default

注釋

WXS 主要有 3 種注釋的方法。

示例代碼：

<!-- wxml --> <wxs module="sample"> // 方法一：單行注釋/* 方法二：多行注釋 *//* 方法三：結(jié)尾注釋。即從 /* 開始往后的所有 WXS 代碼均被注釋var a = 1; var b = 2; var c = "fake";</wxs>

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

方法三 和 方法二 的唯一區(qū)別是，沒有?*/?結(jié)束符。

運(yùn)算符

基本運(yùn)算符

示例代碼：

var a = 10, b = 20;// 加法運(yùn)算 console.log(30 === a + b); // 減法運(yùn)算 console.log(-10 === a - b); // 乘法運(yùn)算 console.log(200 === a * b); // 除法運(yùn)算 console.log(0.5 === a / b); // 取余運(yùn)算 console.log(10 === a % b);

• 加法運(yùn)算（+）也可以用作字符串的拼接。

var a = '.w' , b = 'xs';// 字符串拼接 console.log('.wxs' === a + b);

一元運(yùn)算符

示例代碼：

var a = 10, b = 20;// 自增運(yùn)算 console.log(10 === a++); console.log(12 === ++a); // 自減運(yùn)算 console.log(12 === a--); console.log(10 === --a); // 正值運(yùn)算 console.log(10 === +a); // 負(fù)值運(yùn)算 console.log(0-10 === -a); // 否運(yùn)算 console.log(-11 === ~a); // 取反運(yùn)算 console.log(false === !a); // delete 運(yùn)算 console.log(true === delete a.fake); // void 運(yùn)算 console.log(undefined === void a); // typeof 運(yùn)算 console.log("number" === typeof a);

位運(yùn)算符

示例代碼：

var a = 10, b = 20;// 左移運(yùn)算 console.log(80 === (a << 3)); // 無符號右移運(yùn)算 console.log(2 === (a >> 2)); // 帶符號右移運(yùn)算 console.log(2 === (a >>> 2)); // 與運(yùn)算 console.log(2 === (a & 3)); // 異或運(yùn)算 console.log(9 === (a ^ 3)); // 或運(yùn)算 console.log(11 === (a | 3));

比較運(yùn)算符

示例代碼：

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

等值運(yùn)算符

示例代碼：

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

賦值運(yùn)算符

示例代碼：

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

二元邏輯運(yùn)算符

示例代碼：

var a = 10, b = 20;// 邏輯與 console.log(20 === (a && b)); // 邏輯或 console.log(10 === (a || b));

其他運(yùn)算符

示例代碼：

var a = 10, b = 20;//條件運(yùn)算符 console.log(20 === (a >= 10 ? a + 10 : b + 10)); //逗號運(yùn)算符 console.log(20 === (a, b));

運(yùn)算符優(yōu)先級

優(yōu)先級運(yùn)算符說明結(jié)合性

20	(?...?)	括號	n/a
19	...?.?...	成員訪問	從左到右
?	...?[?...?]	成員訪問	從左到右
?	...?(?...?)	函數(shù)調(diào)用	從左到右
17	...?++	后置遞增	n/a
?	...?--	后置遞減	n/a
16	!?...	邏輯非	從右到左
?	~?...	按位非	從右到左
?	+?...	一元加法	從右到左
?	-?...	一元減法	從右到左
?	++?...	前置遞增	從右到左
?	--?...	前置遞減	從右到左
?	typeof?...	typeof	從右到左
?	void?...	void	從右到左
?	delete?...	delete	從右到左
14	...?*?...	乘法	從左到右
?	...?/?...	除法	從左到右
?	...?%?...	取模	從左到右
13	...?+?...	加法	從左到右
?	...?-?...	減法	從左到右
12	...?<<?...	按位左移	從左到右
?	...?>>?...	按位右移	從左到右
?	...?>>>?...	無符號右移	從左到右
11	...?<?...	小于	從左到右
?	...?<=?...	小于等于	從左到右
?	...?>?...	大于	從左到右
?	...?>=?...	大于等于	從左到右
10	...?==?...	等號	從左到右
?	...?!=?...	非等號	從左到右
?	...?===?...	全等號	從左到右
?	...?!==?...	非全等號	從左到右
9	...?&?...	按位與	從左到右
8	...?^?...	按位異或	從左到右
7	...?｜?...	按位或	從左到右
6	...?&&?...	邏輯與	從左到右
5	...?｜｜?...	邏輯或	從左到右
4	...???...?:?...	條件運(yùn)算符	從右到左
3	...?=?...	賦值	從右到左
?	...?+=?...	賦值	從右到左
?	...?-=?...	賦值	從右到左
?	...?*=?...	賦值	從右到左
?	...?/=?...	賦值	從右到左
?	...?%=?...	賦值	從右到左
?	...?<<=?...	賦值	從右到左
?	...?>>=?...	賦值	從右到左
?	...?>>>=?...	賦值	從右到左
?	...?&=?...	賦值	從右到左
?	...?^=?...	賦值	從右到左
?	...?｜=?...	賦值	從右到左
0	...?,?...	逗號	從左到右

語句

if 語句

在 WXS 中，可以使用以下格式的?if?語句 ：

• if (expression) statement?： 當(dāng)?expression?為 truthy 時，執(zhí)行?statement。

• if (expression) statement1 else statement2?: 當(dāng)?expression?為 truthy 時，執(zhí)行?statement1。 否則，執(zhí)行?statement2

• if ... else if ... else statementN?通過該句型，可以在?statement1?~?statementN?之間選其中一個執(zhí)行。

示例語法：

// if ...if (表達(dá)式) 語句;if (表達(dá)式) 語句;if (表達(dá)式) {代碼塊; }// if ... else if (表達(dá)式) 語句; else 語句;if (表達(dá)式) 語句; else 語句;if (表達(dá)式) {代碼塊; } else {代碼塊; }// if ... else if ... else ...if (表達(dá)式) {代碼塊; } else if (表達(dá)式) {代碼塊; } else if (表達(dá)式) {代碼塊; } else {代碼塊; }

switch 語句

示例語法：

switch (表達(dá)式) {case 變量:語句;case 數(shù)字:語句;break;case 字符串:語句;default:語句; }

• default?分支可以省略不寫。
• case?關(guān)鍵詞后面只能使用：變量，數(shù)字，字符串。

示例代碼：

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?關(guān)鍵詞。

示例代碼：

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

輸出：

0 1

while 語句

示例語法：

while (表達(dá)式)語句;while (表達(dá)式){代碼塊; }do {代碼塊; } while (表達(dá)式)

• 當(dāng)表達(dá)式為 true 時，循環(huán)執(zhí)行語句或代碼塊。
• 支持使用?break，continue?關(guān)鍵詞。

數(shù)據(jù)類型

WXS 語言目前共有以下幾種數(shù)據(jù)類型：

• number?： 數(shù)值
• string?：字符串
• boolean：布爾值
• object：對象
• function：函數(shù)
• array?: 數(shù)組
• date：日期
• regexp：正則

number

語法

number 包括兩種數(shù)值：整數(shù)，小數(shù)。

var a = 10; var PI = 3.141592653589793;

屬性

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

方法

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

以上方法的具體使用請參考?ES5?標(biāo)準(zhǔn)。

string

語法

string 有兩種寫法：

'hello world'; "hello world";

屬性

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

除constructor外屬性的具體含義請參考?ES5?標(biāo)準(zhǔn)。

方法

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

以上方法的具體使用請參考?ES5?標(biāo)準(zhǔn)。

boolean

語法

布爾值只有兩個特定的值：true?和?false。

屬性

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

方法

• toString
• valueOf

以上方法的具體使用請參考?ES5?標(biāo)準(zhǔn)。

object

語法

object 是一種無序的鍵值對。使用方法如下所示：

var o = {} //生成一個新的空對象//生成一個新的非空對象 o = {'string' : 1, //object 的 key 可以是字符串const_var : 2, //object 的 key 也可以是符合變量定義規(guī)則的標(biāo)識符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 同時也支持以下的語法（匿名函數(shù)，閉包等）：

var a = function (x) {return function () { return x;} }var b = a(100); console.log( 100 === b() );

arguments

function 里面可以使用?arguments?關(guān)鍵詞。該關(guān)鍵詞目前只支持以下的屬性：

• length: 傳遞給函數(shù)的參數(shù)個數(shù)。
• [index]: 通過?index?下標(biāo)可以遍歷傳遞給函數(shù)的每個參數(shù)。

示例代碼：

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：返回函數(shù)的形參個數(shù)。

方法

• 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 = []; //生成一個新的空數(shù)組a = [1,"2",{},function(){}]; //生成一個新的非空數(shù)組，數(shù)組元素可以是任何類型

屬性

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

除constructor外屬性的具體含義請參考?ES5?標(biāo)準(zhǔn)。

方法

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

以上方法的具體使用請參考?ES5?標(biāo)準(zhǔn)。

date

語法

生成 date 對象需要使用?getDate函數(shù), 返回一個當(dāng)前時間的對象。

getDate() getDate(milliseconds) getDate(datestring) getDate(year, month[, date[, hours[, minutes[, seconds[, milliseconds]]]]])

• 參數(shù)
  • milliseconds: 從1970年1月1日00:00:00 UTC開始計算的毫秒數(shù)
  • datestring: 日期字符串，其格式為："month day, year hours:minutes:seconds"

示例代碼：

var date = getDate(); //返回當(dāng)前時間對象date = getDate(1500000000000); // Fri Jul 14 2017 10:40:00 GMT+0800 (中國標(biāo)準(zhǔn)時間) date = getDate('2017-7-14'); // Fri Jul 14 2017 00:00:00 GMT+0800 (中國標(biāo)準(zhǔn)時間) date = getDate(2017, 6, 14, 10, 40, 0, 0); // Fri Jul 14 2017 10:40:00 GMT+0800 (中國標(biāo)準(zhǔn)時間)

屬性

• 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?標(biāo)準(zhǔn)。

regexp

語法

生成 regexp 對象需要使用?getRegExp函數(shù)。

getRegExp(pattern[, flags])

• 參數(shù)：
  • pattern: 正則表達(dá)式的內(nèi)容。
  • 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?標(biāo)準(zhǔn)。

方法

• exec
• test
• toString

以上方法的具體使用請參考?ES5?標(biāo)準(zhǔn)。

數(shù)據(jù)類型判斷

constructor?屬性

數(shù)據(jù)類型的判斷可以使用?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?也可以區(qū)分部分?jǐn)?shù)據(jù)類型。

示例代碼：

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

基礎(chǔ)類庫

console

console.log?方法用于在 console 窗口輸出信息。它可以接受多個參數(shù)，將它們的結(jié)果連接起來輸出。

Math

屬性

• E
• LN10
• LN2
• LOG2E
• LOG10E
• PI
• SQRT1_2
• SQRT2

以上屬性的具體使用請參考?ES5?標(biāo)準(zhǔn)。

方法

• abs
• acos
• asin
• atan
• atan2
• ceil
• cos
• exp
• floor
• log
• max
• min
• pow
• random
• round
• sin
• sqrt
• tan

以上方法的具體使用請參考?ES5?標(biāo)準(zhǔn)。

JSON

方法

• stringify(object): 將?object?對象轉(zhuǎn)換為?JSON?字符串，并返回該字符串。
• parse(string): 將?JSON?字符串轉(zhuǎn)化成對象，并返回該對象。

示例代碼：

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?標(biāo)準(zhǔn)。

Date

屬性

• parse
• UTC
• now

以上屬性的具體使用請參考?ES5?標(biāo)準(zhǔn)。

Global

屬性

• NaN
• Infinity
• undefined

以上屬性的具體使用請參考?ES5?標(biāo)準(zhǔn)。

方法

• parseInt
• parseFloat
• isNaN
• isFinite
• decodeURI
• decodeURIComponent
• encodeURI
• encodeURIComponent

以上方法的具體使用請參考?ES5?標(biāo)準(zhǔn)。

WXSS

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

WXSS 用來決定 WXML 的組件應(yīng)該怎么顯示。

為了適應(yīng)廣大的前端開發(fā)者，WXSS 具有 CSS 大部分特性。同時為了更適合開發(fā)微信小程序，WXSS 對 CSS 進(jìn)行了擴(kuò)充以及修改。

與 CSS 相比，WXSS 擴(kuò)展的特性有：

• 尺寸單位
• 樣式導(dǎo)入

尺寸單位

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

設(shè)備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

建議：?開發(fā)微信小程序時設(shè)計師可以用 iPhone6 作為視覺稿的標(biāo)準(zhǔn)。

注意：?在較小的屏幕上不可避免的會有一些毛刺，請?jiān)陂_發(fā)時盡量避免這種情況。

樣式導(dǎo)入

使用@import語句可以導(dǎo)入外聯(lián)樣式表，@import后跟需要導(dǎo)入的外聯(lián)樣式表的相對路徑，用;表示語句結(jié)束。

示例代碼：

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

內(nèi)聯(lián)樣式

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

• style：靜態(tài)的樣式統(tǒng)一寫到 class 中。style 接收動態(tài)的樣式，在運(yùn)行時會進(jìn)行解析，請盡量避免將靜態(tài)的樣式寫進(jìn) style 中，以免影響渲染速度。

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

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

<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 組件后邊插入內(nèi)容
::before	view::before	在 view 組件前邊插入內(nèi)容

全局樣式與局部樣式

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

未完待續(xù),下一章節(jié),つづく

總結(jié)

以上是生活随笔為你收集整理的微信小程序_文档_04_框架_视图层_WXS_WXSS的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。