目录
一、WXSS
WXSS全称为WeiXin Style Sheets，时一套类似于CSS的样式语言，用于界面的样式美化。
（1）rpx尺寸单位
概念
rpx，全称为responsive pixe，是微信小程序独有的，用来解决屏幕适配的尺寸单位
实现原理
鉴于不同设备屏幕的大小不同，为了实现屏幕的自动适配，rpx把所有设备的屏幕在宽度上等分为750份，即：当前屏幕的总宽度为750rpx。小程序在不同设备上运行的时候，会自动把rpx的样式单位换算为对应的像素单位来进行渲染展示，从而实现了屏幕的自动适配。
rpx与px之间的单位换算
在iPhone6上，屏幕宽度为375px,共有750个物理像素，等分为750rpx，则：
750rpx=375px=750物理像素
1rpx=0.5px=1物理像素
其它设备上
官方建议说：开发小程序时，设计师最好以iPhone6作为视觉稿的标准
例如：在iPhone6上如果要绘制宽100px,高20px的盒子，换算成rpx单位，即宽高分别为200rpx,40rpx
（2）样式导入
概念
即使用WXSS提供的@import语法，可以导入外联的样式表来进行使用
语法格式
@import 后面跟需要导入的外联样式表的相对路径，用 ; 表示语句结束
示例
我们新建一个commom文件夹，里面存放一些需要公共使用的样式表，那个页面需要该样式，则使用@import语法导入即可使用
公告样式common.wxss
.username{
color: red;
}导入
@import "/commom/commom.wxss";使用
<view class="username" wx:for="{{arr2}}">
下标：{{index}} ,名字：{{item}}
</view>（3）全局样式与局部样式
全局样式
在app.wxss中所定义的样式称为全局样式，能够作用于所有页面
局部样式
在页面的WXSS文件中所定义的样式称为局部样式，只作用于当前页面
注意点
- 当局部样式与全局样式冲突时，根据就近原则，局部样式则会覆盖掉全局样式
- 当局部样式的权重大于等于全局样式的权重时，才会覆盖全局的样式
（4）常用样式
尺寸
| 属性 | 作用 |
| height | 设置高度 |
| line-height | 设置行高 |
| width | 设置宽度 |
边框
边框属性的设置一般采用缩写的形式，如：border:5rpx soild red
分别对应边框的高度、样式、颜色
说明 属性 作用 边框样式 solid 实线边框 dotted 点状边框 dashed 虚线边框 double 双线边框 边框高度 border-width 设置边框高度 边框颜色 border-color 设置边框颜色 边框位置 border-top 设置上边框相关属性 border-bottom 设置下边框的相关属性 border-left 设置左边框的相关属性 border-right 设置右边框的相关属性 边框圆角 border-radius 设置边框圆角
边距
设置外边距时一般采用缩写的形式，如：padding:10px 10px 10px 10px
分别对应上、右、下、左外边距
注：当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于合并前外边距较大者的高度。
| 说明 | 属性 | 作用 |
| 内边距 | padding-top | 设置上内边距 |
| padding-bottom | 设置下内边距 | |
| padding-left | 设置左内边距 | |
| padding-right | 设置右内边距 | |
| 外边距 | margin-top | 设置上外边距 |
| margin-bottom | 设置下外边距 | |
| margin-left | 设置左外边距 | |
| margin-right | 设置右外边距 |
文本
| 说明 | 属性 | 作用 |
| 文本颜色 | color | 设置文本的颜色 |
| 文本方向 | direction | 设置文本的方向 |
| 文本行高 | line-height | 设置文本行高 |
| 字符间距 | letter-spacing | 设置字符间距 |
| 对齐文本 | left | 将文本排列到左边 |
| right | 将文本排列到右边 | |
| center | 将文本排列到中间 | |
| justify | 实现文本两端对齐的效果 | |
| 文本阴影 | text-shadow | 设置文本阴影 |
字体
| 说明 | 属性 | 作用 |
| 字体尺寸 | font-size | 设置字体大小 |
| 字体风格 | font-style | 设置字体类型 |
| 字体粗细 | font-weight | 设置字体粗细 |
二、WXS
（1）概念
全称WeiXin Script ,是小程序独有的一套脚本语言，结合WXML，可以构建出页面的结构
（2）应用场景
WXML中无法调用在页面.js文件中定义的函数，但是可以调用WXS中定义的函数。因此，小程序中WXS的应用场景就是“过滤器”，即在渲染数据之前对数据进行包装的处理，最终将处理后的数据渲染到页面上
（3）WXS与JavaScript的关系
虽然WXS语法类似于JavaScript，但是二者其实是完全不同的两种语言
第一，wxs有自己的数据类型：
- number 数值类型string 字符串类型
- boolean 布尔类型
- object 对象类型
- function 函数类型
- array 数组类型
- date 日期类型
- regexp 正则
第二，wxs不支持类似于ES6及以上的语法形式：
- 不支持：let、const、解构赋值、展开运算符、箭头函数、对象属性简写、etc……
- 支持：var定义变量、普通function函数等类似于ES5的语法……
第三，wxs遵循CommonJS规范：
- module 对象
- require()函数
- module.exports对象
（4）基本用法
内嵌的wxs脚本
wxs代码可以编写在wxml文件中的<wxs>标签内，就像JavaScript代码可以编写在html文件中的<script>标签内一样。另外，wxml文件中的每个<wxs></wxs>标签，必须提供module属性，用来指定当前wxs的模块名称，以供在wxml中访问模块中共享出来的成员
<view>{{m1.toUpper('gy')}}</view>
<wxs module="m1">
module.exports.toUpper = function(str){
// 将传递进来的字符串转换为大写并返回该字符串
return str.toUpperCase()
}
</wxs>
外联的wxs脚本
即将wxs脚本代码放在一个单独的以.wxs为后缀的文件中去，使用时调用
（1）定义外面的wxs脚本代码
// 定义函数
function toLower(str){
return str.toLowerCase()
}
module.exports ={
// 将toLower该函数共享出去
toLower:toLower
}（2）使用外联的wxs脚本
在使用外联的wxs脚本时，必须为<wxs>标签添加module和src属性，其中
- module用来指定模块的名称
- src用来指定要引入的脚本的路径，且必须是相对路径
<view>{{m2.toLower('GY')}}</view>
<wxs module="m2" src="../../utils/tools.wxs"></wxs>（ . . /. . / 表示根目录下，固定写法）
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/93475.html
