微信小程序_文档_04_框架_视图层_WXS_WXSS
WXS
WXS(WeiXin Script)是小程序的一套腳本語言,結(jié)合?WXML,可以構(gòu)建出頁面的結(jié)構(gòu)。
注意
以下是一些使用 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>頁面輸出:
5WXS 模塊
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.wxsrequire函數(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)簽
| 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一致,會有變量提升。
上面代碼,分別聲明了?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)算(+)也可以用作字符串的拼接。
一元運(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)先級
| 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 10for 語句
示例語法:
for (語句; 語句; 語句)語句;for (語句; 語句; 語句) {代碼塊; }- 支持使用?break,continue?關(guān)鍵詞。
示例代碼:
for (var i = 0; i < 3; ++i) {console.log(i);if( i >= 1) break; }輸出:
0 1while 語句
示例語法:
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"。
方法
- 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物理像素。
| 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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Picture of my baby w
- 下一篇: Python5.操作excel表格 xl