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

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

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

微信小程序开发之wxss中的那些事（一）
微信小程序开发之wxss中的那些事微信小程序开发中,页面的布局怎么整? 啥是WXSS? 基本语法什么是rpx 什么是 flex 微信小程序开发中,页面的布局怎么整? 各位道友请留步,如果你是新手, ...
微信小程序3（WXSS模板样式和全局局部配置）
WXSS模板样式 WXSS模板样式-rpx rpx(responsive pixel)是微信小程序独有的,用来解决屏适配的尺寸单位实现原理' 鉴于不同设备的屏幕大小不同,为了实现屏幕的自动适配,rp ...
微信小程序开发之WXML模板语法
目录一.数据处理 1.字符数据的绑定 2.图片数据的动态绑定 3.数据运算 4.总代码与测试截图二.事件处理 1.概念 2.事件绑定 (1)bindtap (2)bindinput 3.事件传参 ...
微信小程序开发之SVG的使用
因为工作的原因,最近开始接触并且了解微信小程序.太久没有写或者看过前端相关的代码,加上小程序本身的bug也比较多,中间发现坑还是不少,后面逐渐整理总结一下.这一篇先总结一下svg在小程序中的使用. S ...
微信小程序开发之scroll-view上拉加载数据实现
微信小程序开发之scroll-view上拉加载数据实现一.开发思路 1.使用小程序的scroll-view组件中提供了一个bindscrolltolower属性监听组件的滑动到了底部 https:/ ...
微信小程序开发之formId使用（模板消息）
基于微信小程序的模板消息下发条件:用户本人在微信体系内与页面有交互行为后触发 1. 使用说明 1.1 获取模板id 登录https://mp.weixin.qq.com获取模板,如果没有合适的模板, ...
微信小程序开发之mpVue
1 mpVue是什么 1.1 简介美团工程师推出的基于Vue.js封装的用于开发小程序的框架融合了原生小程序和Vue.js的特点可完全组件化开发 1.2 特点组件化开发完成的Vue.js开发 ...
微信小程序开发之webview组件内网页实现微信原生支付
前言.背景本人目前的工作岗位是安卓工程师,在这之前对于前端和后台的知识基本是白纸,只是在日常的工作项目中有需要和小伙伴进行对接的时候接触了那么一丢丢,对于前端和后台的一些专业描述和理解有不当之处还请 ...
微信小程序开发之从“跳伞”到“吃鸡”
写在前边微信小程序随着官方开放越多越多的接口,也是变的越来越火了,越来越多的企业已经开始布局小程序生态.所以,对于我们开发者来说,掌握小程序开发显得分外重要.如果点亮了该技能,那么离升职加薪赢取白富 ...

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

一、WXSS

（1）rpx尺寸单位

概念

实现原理

rpx与px之间的单位换算

其它设备上

（2）样式导入

概念

语法格式

示例

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

（4）常用样式

尺寸

边框

边距

文本

字体

二、WXS

（1）概念

（2）应用场景

（3）WXS与JavaScript的关系

（4）基本用法

内嵌的wxs脚本

外联的wxs脚本

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

最新文章

热门文章