當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

微信小程序_文档_04_框架_视图层_WXS_WXSS

發(fā)布時間：2024/3/13 编程问答 46 豆豆

生活随笔收集整理的這篇文章主要介紹了微信小程序_文档_04_框架_视图层_WXS_WXSS 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

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 的簡單示例：

頁面渲染

<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]} })   <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> <view> {{m1.getMax(array)}} </view>

頁面輸出：

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"; <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); <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ù)覽效果

<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",} }) <wxs src="./../comm.wxs" module="some_comms"></wxs>  <view> {{some_comms.bar(some_comms.foo)}} </view>  <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 種注釋的方法。

示例代碼：

<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 是一種無序的鍵值對。使用方法如下所示：

屬性

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 中，以免影響渲染速度。

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

選擇器

目前支持的選擇器有：

選擇器樣例樣例描述

.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)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Picture of my baby w
下一篇： Python5.操作excel表格 xl