微信小程序开发之WXSS模板样式与WXS脚本语言

目录

一、WXSS

（1）rpx尺寸单位

（2）样式导入

（3）全局样式与局部样式

（4）常用样式

二、WXS

（1）概念

（2）应用场景

（3）WXS与JavaScript的关系

（4）基本用法

内嵌的wxs脚本

外联的wxs脚本

---

一、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>

（ . . /. . / 表示根目录下，固定写法）