上一篇讲了WXML:小程序版HTML，这一篇介绍WXSS:小程序版CSS。
1. WXSS:小程序版CSS。
WXSS是一套样式语言，为了便于前端开发的上手，WXSS同HTML的CSS样式文件大部分特性一样。它用来决定WXML的样式，同时在CSS基础上进行了修改扩充。 其中扩展属性有尺寸单位、样式导入。
1.1.尺寸单位
1.1.1 介绍
rpx 可以根据屏幕宽度进行自适应。 与px的换算关系，下图可以看出不同的手机型号，px与rpx之间换算关系是不一样的，官方建议使用iPhone6作为视觉稿的标准
网络异常，图片无法展示
|
1.1.2 使用案例
<view style="width:375rpx;height:300rpx;border:1px solid black">测试RPX</view> <view style="width:162px;height:300px;border:1px solid black">测试PX</view> 复制代码
iPhone5机型
网络异常，图片无法展示
|
网络异常，图片无法展示
|
1.2.样式导入
1.2.1介绍
看官文描述使用@import语句进行样式导入。 因此对于公共的样式可以统一设置，然后导入即可。
1.2.2测试
创建style文件夹创建testImport.wxss文件
text{ color: rgb(22, 71, 207); } 复制代码
引入该样式
/* pages/eventTest/eventTest.wxss */ @import "../../style/testImport.wxss"; 复制代码
测试
网络异常，图片无法展示
|
1.3.内联样式
1.在标签中增加style设置样式，样式的值可以{{}}动态获取，但是运行时会进行解析影响运行效率。
<view style="color:{{color}};" /> 复制代码
1.在标签中class 指定样式规则。具体规则内容写在WXSS文件中如：
<view class="inputNumber" /> 复制代码
/* pages/eventTest/eventTest.wxss */ .inputNumber{ border:1px solid gray; padding:2px; margin:1px 20px 1px 20px; } 复制代码
1.4.选择器
支持的选择器有：
网络异常，图片无法展示
|
1.5.全局样式与局部样式
定义在最外层的app.wxss文件中的样式都为全局样式。而自己定义的页面中的wxss文件中的样式则为局部样式优先级高，设置的样式如果与全局的样式相同则覆盖全局样式。
至此WXSS:小程序版CSS结束
2.WXS:小程序版JavaScript
2.1模块
WXS 代码可以编写在 wxml 文件中的 <wxs> 标签内，或以 .wxs 为后缀名的文件内。 复制代码
2.1.1 module 属性
module是wxs标签必填属性，且各个wxs的module属性需要唯一，不能重复没否则会被后者覆盖 module的值命名，首字母必须英文（大小写）、下划线，剩下的字符可以是英文（大小写）、下划线、数字
测试
<!--pages/wxsTest/wxsTest.wxml--> <text>pages/wxsTest/wxsTest.wxml</text> <wxs module="test01"> var some_msg = "hello wxsTest"; module.exports = { msg : some_msg, } </wxs> <view>{{test01.msg}}</view> 复制代码
网络异常，图片无法展示
|
2.1.2 src 属性
src 属性可以用来引用其他的 wxs 文件模块。 引用的时候，要注意如下几点： 只能引用 .wxs 文件模块，且必须使用相对路径。 wxs 模块均为单例， wxs 模块在第一次被引用时，会自动初始化为单例对象。多个页面，多个地 方，多次引用，使用的都是同一个 wxs 模块对象。 如果一个 wxs 模块在定义之后，一直没有被引用，则该模块不会被解析与运行。 复制代码
新建pages/comm.wxs
// /pages/comm.wxs var foo = "'hello world' from comm.wxs"; var bar = function(d) { return d; } module.exports = { foo: foo, bar: bar }; module.exports.msg = "some msg"; 复制代码
引用
<wxs src="../../pages/comm.wxs" module="comm"/> <view>{{comm.msg}}</view> <view>{{comm.bar(comm.foo)}}</view> 复制代码
测试
网络异常，图片无法展示
|
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"; 复制代码
comm.wxs
// /pages/comm.wxs var tools = require("./tools.wxs"); console.log(tools.FOO); console.log(tools.bar("comm.wxs")); console.log(tools.msg); 复制代码
引入wxsTest.wxml
<!-- /page/index/wxsTest.wxml --> <wxs src="../../pages/comm.wxs" module="logic" /> 复制代码
网络异常，图片无法展示
|
2.2变量
2.3注释
2.4运算符
2.5语句
2.6数据类型
2.7基础类库
到此小程序框架基础部分就结束了，然后后面的: (微信小程序框架组件、微信小程序自定义组件、微信小程序框架api)模块在实战中展开讲吧。
下一篇： 微信小程序后端Java接口开发
