微信小程序_文档_04_框架_视图层_WXS_WXSS
WXS
WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。
注意
- wxs 不依赖于运行时的基础库版本，可以在所有版本的小程序中运行。
- wxs 与 javascript 是不同的语言，有自己的语法，并不和 javascript 一致。
- wxs 的运行环境和其他 javascript 代码是隔离的，wxs 中不能调用其他 javascript 文件中定义的函数，也不能调用小程序提供的API。
- wxs 函数不能作为组件的事件回调。
- 由于运行环境的差异，在 iOS 设备上小程序内的 wxs 会比 javascript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。
以下是一些使用 WXS 的简单示例：
页面渲染
<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]
}
})
<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>
页面输出：
5WXS 模块
WXS 代码可以编写在 wxml 文件中的 .wxs 为后缀名的文件内。
模块
每一个 .wxs 文件和
每个模块都有自己独立的作用域。即在一个模块里面定义的变量与函数，默认为私有的，对其他模块不可见。
一个模块要想对外暴露其内部的私有变量与函数，只能通过 module.exports 实现。
.wxs 文件
在微信开发者工具里面，右键可以直接创建 .wxs 文件，在其中直接编写 WXS 脚本。
示例代码：
// /pages/comm.wxs
var 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 中的
module 对象
每个 wxs 模块均有一个内置的 module 对象。
属性
exports: 通过该属性，可以对外共享本模块的私有变量与函数。
示例代码：
在开发者工具中预览效果
// /pages/tools.wxs
var 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函数
在.wxs模块中引用其他 wxs 文件模块，可以使用 require 函数。
引用的时候，要注意如下几点：
- 只能引用
.wxs文件模块，且必须使用相对路径。 wxs模块均为单例，wxs模块在第一次被引用时，会自动初始化为单例对象。多个页面，多个地方，多次引用，使用的都是同一个wxs模块对象。- 如果一个
wxs模块在定义之后，一直没有被引用，则该模块不会被解析与运行。
示例代码：
在开发者工具中预览效果
// /pages/tools.wxs
var 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.wxs
var 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
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| module | String | 当前 |
|
| src | String | 引用 .wxs 文件的相对路径。仅当本标签为单闭合标签或标签的内容为空时有效。 |
module 属性
module 属性是当前
module 属性值的命名必须符合下面两个规则：
- 首字符必须是：字母（a-zA-Z），下划线（_）
- 剩余字符可以是：字母（a-zA-Z），下划线（_）， 数字（0-9）
示例代码：
在开发者工具中预览效果
<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.js
Page({
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 中通过 /page/comm.wxs 模块。
注意
标签中，只能使用定义该的 WXML 文件中定义的
变量
概念
- 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
typeof
null
undefined
NaN
Infinity
var
if
else
true
false
require
this
function
arguments
return
for
while
do
break
continue
switch
case
default注释
WXS 主要有 3 种注释的方法。
示例代码：
<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。 否则，执行statement2if ... 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"。
方法
toStringtoLocaleStringvalueOftoFixedtoExponentialtoPrecision
以上方法的具体使用请参考
ES5标准。
string
语法
string 有两种写法：
'hello world';
"hello world";
属性
constructor：返回字符串"String"。length
除constructor外属性的具体含义请参考
ES5标准。
方法
toStringvalueOfcharAtcharCodeAtconcatindexOflastIndexOflocaleComparematchreplacesearchslicesplitsubstringtoLowerCasetoLocaleLowerCasetoUpperCasetoLocaleUpperCasetrim
以上方法的具体使用请参考
ES5标准。
boolean
语法
布尔值只有两个特定的值：true 和 false。
属性
constructor：返回字符串"Boolean"。
方法
toStringvalueOf
以上方法的具体使用请参考
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标准。
方法
toStringconcatjoinpoppushreverseshiftslicesortspliceunshiftindexOflastIndexOfeverysomeforEachmapfilterreducereduceRight
以上方法的具体使用请参考
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”。
方法
toStringtoDateStringtoTimeStringtoLocaleStringtoLocaleDateStringtoLocaleTimeStringvalueOfgetTimegetFullYeargetUTCFullYeargetMonthgetUTCMonthgetDategetUTCDategetDaygetUTCDaygetHoursgetUTCHoursgetMinutesgetUTCMinutesgetSecondsgetUTCSecondsgetMillisecondsgetUTCMillisecondsgetTimezoneOffsetsetTimesetMillisecondssetUTCMillisecondssetSecondssetUTCSecondssetMinutessetUTCMinutessetHourssetUTCHourssetDatesetUTCDatesetMonthsetUTCMonthsetFullYearsetUTCFullYeartoUTCStringtoISOStringtoJSON
以上方法的具体使用请参考
ES5标准。
regexp
语法
生成 regexp 对象需要使用 getRegExp函数。
getRegExp(pattern[, flags])
- 参数：
pattern: 正则表达式的内容。flags：修饰符。该字段只能包含以下字符:g: globali: ignoreCasem: 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"。sourceglobalignoreCasemultilinelastIndex
除constructor外属性的具体含义请参考
ES5标准。
方法
exectesttoString
以上方法的具体使用请参考
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
属性
ELN10LN2LOG2ELOG10EPISQRT1_2SQRT2
以上属性的具体使用请参考
ES5标准。
方法
absacosasinatanatan2ceilcosexpfloorlogmaxminpowrandomroundsinsqrttan
以上方法的具体使用请参考
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_VALUEMIN_VALUENEGATIVE_INFINITYPOSITIVE_INFINITY
以上属性的具体使用请参考
ES5标准。
Date
属性
parseUTCnow
以上属性的具体使用请参考
ES5标准。
Global
属性
NaNInfinityundefined
以上属性的具体使用请参考
ES5标准。
方法
parseIntparseFloatisNaNisFinitedecodeURIdecodeURIComponentencodeURIencodeURIComponent
以上方法的具体使用请参考
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 中相同的选择器。
未完待续,下一章节,つづく