WXS

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

注意

wxs 不依賴于運行時的基礎庫版本，可以在所有版本的小程序中運行。

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

wxs 的運行環境和其他 javascript 代碼是隔離的，wxs 中不能調用其他 javascript 文件中定義的函數，也不能調用小程序提供的API。

wxs 函數不能作為組件的事件回調。

由于運行環境的差異，在 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.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>?標簽引用。

module 對象

每個?wxs?模塊均有一個內置的?module?對象。

屬性

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

示例代碼：

在開發者工具中預覽效果

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

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

引用的時候，要注意如下幾點：

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

示例代碼：

在開發者工具中預覽效果

// /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>?標簽

屬性名類型默認值說明

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.jsPage({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 else true 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?標準。

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 中相同的選擇器。

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

總結

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

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