小程序學習日記（12）——WXSS、WXS

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

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

• 尺寸單位
• 樣式導入

尺寸單位

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

樣式導入

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

<code> 
.small-p
 {
  
padding
:
5px 
;
}/<code>

<code> 
@import
 
"common.wxss"
;
.middle-p
 {
  
padding
:
15px
;
}/<code>

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

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

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

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

<code>class=
"normal_view"
  />/<code>

選擇器
目前支持的選擇器有：

選擇器 樣例 樣例描述

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

全局樣式與局部樣式

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

WXS(這裡先了解一下，後面會學到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 設備上二者運行效率無差異

頁面渲染

<code> 
<
wxs
 
module
=
"m1"
>
var msg = "hello world";

module.exports.message = msg;
wxs
>

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

頁面輸出：

<code>
hello
 world/<code>

數據處理

<code>
//
 
page.js
Page({
  
data:
 
{
    
array:
 
[1,
 
2
,
 
3
,
 
4
,
 
5
,
 
1 
,
 
2
,
 
3
,
 
4
]
  
}
})
/<code>

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

頁面輸出：

<code>
5
/<code>

關鍵字: max 組件 style