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

目录

一、WXSS

(1)rpx尺寸单位

(2)样式导入

(3)全局样式与局部样式

(4)常用样式

二、WXS

(1)概念

(2)应用场景

(3)WXS与JavaScript的关系

(4)基本用法

内嵌的wxs脚本

外联的wxs脚本


一、WXSS

WXSS全称为WeiXin Style Sheets,时一套类似于CSS的样式语言,用于界面的样式美化。

 微信小程序开发之WXSS模板样式与WXS脚本语言_第1张图片

微信小程序开发之WXSS模板样式与WXS脚本语言_第2张图片 

 

(1)rpx尺寸单位

概念

rpx,全称为responsive pixe,是微信小程序独有的,用来解决屏幕适配的尺寸单位

实现原理

鉴于不同设备屏幕的大小不同,为了实现屏幕的自动适配,rpx把所有设备的屏幕在宽度上等分为750份,即:当前屏幕的总宽度为750rpx。小程序在不同设备上运行的时候,会自动把rpx的样式单位换算为对应的像素单位来进行渲染展示,从而实现了屏幕的自动适配

rpx与px之间的单位换算

在iPhone6上,屏幕宽度为375px,共有750个物理像素,等分为750rpx,则:

750rpx=375px=750物理像素

1rpx=0.5px=1物理像素 

其它设备上

 微信小程序开发之WXSS模板样式与WXS脚本语言_第3张图片

 官方建议说:开发小程序时,设计师最好以iPhone6作为视觉稿的标准

例如:在iPhone6上如果要绘制宽100px,高20px的盒子,换算成rpx单位,即宽高分别为200rpx,40rpx

(2)样式导入

概念

即使用WXSS提供的@import语法,可以导入外联的样式表来进行使用

语法格式

@import 后面跟需要导入的外联样式表的相对路径,用 ; 表示语句结束

示例

我们新建一个commom文件夹,里面存放一些需要公共使用的样式表,那个页面需要该样式,则使用@import语法导入即可使用

公告样式common.wxss

.username{
  color: red;
}

 导入

@import "/commom/commom.wxss";

使用 


     下标:{{index}} ,名字:{{item}}

(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文件中的标签内,就像JavaScript代码可以编写在html文件中的

你可能感兴趣的:(微信小程序应用开发,微信小程序,前端,入门)