小程序学习日记（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>

關鍵字: style WXSS class