欢迎您的光临,本博所发布之文章皆为作者亲测通过,如有错误,欢迎通过各种方式指正。

文摘  微信小程序设置样式wxml和wxss使用总结

小程序应用 本站 2025 0评论

对于css不熟悉的Android程序员来说,开发微信小程序面临的一个比较困难的问题就是界面的排版了。微信小程序的排版就跟wxml和wxss有关了,它们两者相当于android的布局文件,其中wxml指定了界面的框架结构,而wxss指定了界面的框架及元素的显示样式。

QQ图片20190110103354.png


从微信小程序的基础目录结构可以看出,小程序的结构主要分为页面pages和其他配置文件utils,另外有3个主体文件app.js;app.json;app.wxss(这3个文件必须放在主体目录中,名称也是固定的),app.js是主要逻辑文件,用来注册小程序;app.json是主要配置文件,用来对小程序全局配置。app.wxss是主要样式文件,类似于HTML的css文件,在其他页面中也可以共享。


除了几个主要配置文件,page页面中有index和logs两个页面,其中每个页面有4个文件构成: .js; .json; .wxml; .wxss。

.js是页面逻辑文件,每个页面必须有这个文件。

.wxml是页面描述文件,用来设计页面布局、数据绑定,每个页面必须有这个文件。

.wxss页面样式文件,如果所有页面样式相同,可以写在app.wxss文件中就不需要单独去写。

.json页面配置文件,如果没有特殊配置可以省略,只使用app.json即可。


一、wxml


1.基础组件

框架为开发者提供了一系列基础组件,开发者可以通过组合这些基础组件进行快速开发。 详细介绍请参考组件文档。本质上和html 标签类似。


组件是视图层的基本组成单元。 

组件自带一些功能与微信风格的样式。 

一个组件通常包括开始标签和结束标签,属性用来修饰这个组件,内容在两个标签之内。


<tagname property="value">
Content goes here ...
</tagname>

注意:所有组件与属性都是小写,连字符为-连接


属性类型

类型描述注解
Boolean布尔值组件写上该属性,不管该属性等于什么,其值都为true,只有组件上没有写该属性时,属性值才为false。如果属性值为变量,变量的值会被转换为Boolean类型
Number数字1 ,  2.5
String字符串“string”
Array数组[ 1, “string” ]
Object对象{ key: value }
EventHandler事件处理函数名“handlerName” 是 Page中定义的事件处理函数名
Any任意属性


共有属性类型

所有组件都有的属性:

属性名类型描述注解
idString组件的唯一标示保持整个页面唯一
classString组件的样式类在对应的 WXSS 中定义的样式类
styleString组件的内联样式可以动态设置的内联样式
hiddenBoolean组件是否显示所有组件默认显示
data-*Any自定义属性组件上触发的事件时,会发送给事件处理函数
bind* / catch*EventHandler组件的事件详见事件


特殊属性

几乎所有组件都有各自定义的属性,可以对该组件的功能或样式进行修饰,请参考各个组件的定义。


2.组件列表

界面结构wxmL比较容易理解,主要是由八大类基础组件构成:

一、视图容器(View Container):二、基础内容(Basic Content)
组件名说明组件名说明
view视图容器icon 图标
scroll-view可滚动视图容器text文字
swiper可滑动的视图容器progress进度条
三、表单组件(Form)四、操作反馈组件(Interaction)
组件名说明组件名说明
button按钮action-sheet上拉菜单
form表单modal模态弹窗
input输入框progress进度条
checkbox多项选择器toast短通知
radio单项选择器五、导航(Navigation)
picker列表选择器组件名说明
slider滑动选择器navigator应用内跳转
switch开关选择器

label标签

六、多媒体(Media)七、地图(Map)
组件名说明组件名说明
audio音频map地图
image图片

video视频

八、画布(Canvas)

组件名说明

canvas画布


页面逻辑

在wxml中会使用 {{}}来实行 页面逻辑 ,不再使用 DOM API操控 

遵循 MVVM开发模式 ,把渲染和逻辑分离

简单来说就是不要再让 JS直接操控DOM,JS只需要管理状态即可,然后再通过一种模板语法来描述状态和界面结构的关系即可。


数据绑定

通过{{ }}的语法把一个变量绑定到界面上


控制绑定

仅仅通过数据绑定还不够完整的描述状态和界面的关系,还需要if/else, for等控制能力,在小程序里边,这些控制能力都用 wx:开头的属性来表达。


关于这八大类的属性和具体用法可参考以下参考文献链接:

http://www.w3cschool.cn/weixinapp/itz51q8o.html

https://mp.weixin.qq.com/debug/wxadoc/dev/component/


二、wxss


wxml理解起来容易,但光搭好了框架,并不能达到我们想要的界面效果,这就需要用到wxss样式了。

wxss样式决定了组件应该如何显示,并在css的基础上做了一些功能扩展,主要包括:


1.尺寸单位

rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。一般以iphone6屏幕做为视觉设计标准。

rpx 与 px单位换算如下:

设备rpx换算px (屏幕宽度/750)px换算rpx (750/屏幕宽度)
iPhone51rpx = 0.42px1px = 2.34rpx
iPhone61rpx = 0.5px1px = 2rpx
iPhone6s1rpx = 0.552px1px = 1.81rpx


2.样式导入

可以使用@import语句来导入外联样式表,其后面跟需要导入外联样式表的相对路径,并以分号结束。

例如:

/** other.wxss **/
.appText{
  margin:10px;
}
/** app.wxss **/
@import "other.wxss";
.content_text:{
  margin:15px;
}

app.wxss是全局样式,作用于每一个页面,而page下的每一个的wxss文件只作用于当前页面,并对全局样式中的相同属性会覆盖。


对于微信小程序wxss样式的使用来说,其实大部分都和css样式一致,下面简单的进行介绍一下:

wxss样式属性
一、wxss display(显示)
属性说明
flex多栏多列布局flex-direction:row/column
inline-block行内块元素
inline此元素会被显示为内联元素,元素前后没有换行符
inline-table作为内联表格来显示(类似 <table>),表格前后没有换行符
inline-flex将对象作为内联块级弹性伸缩盒显示
none此元素不会被显示
block此元素将显示为块级元素,此元素前后会带有换行符
list-item此元素会作为列表显示
table会作为块级表格来显示(类似 <table>),表格前后带有换行符
table-caption作为一个表格标题显示(类似 <caption>)
table-cell作为一个表格单元格显示(类似 <td> 和 <th>)
table-column作为一个单元格列显示(类似 <col>)
table-column-group作为一个或多个列的分组来显示(类似 <colgroup>)
table-row作为一个表格行显示(类似 <tr>)
table-row-group作为一个或多个行的分组来显示(类似 <tbody>)
table-header-group作为一个或多个行的分组来显示(类似 <thead>)
table-footer-group作为一个或多个行的分组来显示(类似 <tfoot>)
inherit从父元素继承 display 属性的值
flex:多栏多列布局 http://www.360doc.com/content/14/0811/01/2633_400926000.shtml


二、wxss position(定位)
属性说明
absolute生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative生成相对定位的元素,相对于其正常位置进行定位。
因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。
fixed生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
static默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)
inherit规定应该从父元素继承 position 属性的值


三、wxss float(浮动)
属性说明
left元素向左浮动
right元素向右浮动
none默认值元素不浮动,并会显示在其在文本中出现的位置。
inherit规定应该从父元素继承 float 属性的值。


四、wxss background(背景)
属性说明语法(属性值)
background简写属性,作用是将背景属性设置在一个声明中background: color position size repeat origin clip attachment image;
background-color指定要使用的背景颜色
background-position指定背景图像的位置background-position:center
background-size 指定背景图片的大小background-size:80px 60px;宽度 高度
background-repeat指定如何重复背景图像repeat,repeat-x,repeat-y,no-repeat,inherit
background-origin指定背景图像的定位区域padding-box 背景图像填充框的相对位置
border-box 背景图像边界框的相对位置
content-box 背景图像的相对位置的内容框
background-clip指定背景图像的绘画区域属性值,同上
background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。scroll 背景图片随页面的其余部分滚动。这是默认
fixed 背景图像是固定的
inherit 指定background-attachment的设置应该从父元素继承
local 背景图片随滚动元素滚动
background-image指定要使用的一个或多个背景图像url('URL') 图像的URL
none 无图像背景会显示。这是默认
inherit 指定背景图像应该从父元素继承


五、wxss border(边框)
属性说明语法(属性值)
border简写属性,用于把针对四个边的属性设置在一个声明border:5px solid red;
border-width用于为元素的所有边框设置宽度,或者单独地为各边边框设置宽度border-top-width 上右下左边框厚度 属性值:thin medium thick length
border-style设置元素所有边框的样式,或者单独地为各边设置边框样式。border-top-width 上右下左边框样式 属性值:solid,dashed,dotted,double等
border-color元素的所有边框中可见部分的颜色,或为 4 个边分别设置颜色border-top-width 上右下左边框颜色


六、wxss 轮廓(outline)
属性说明语法(属性值)
outline在一个声明中设置所有的外边框属性outline: outline-color, outline-style, outline-width
outline-color设置外边框的颜色
outline-style设置外边框的样式。属性值:solid,dashed,dotted,double等
outline-width设置外边框的宽度属性值:thin medium thick length


七、wxss 文本属性(text)
属性说明语法(属性值)
color设置文本颜色
direction设置文本方向。ltr:文本方向从左到右;rtl:文本方向从右到左
letter-spacing设置字符间距
line-height设置行高
text-align对齐元素中的文本left:把文本排列到左边。默认值,由浏览器决定。
right:把文本排列到右边。
center:把文本排列到中间。
justify:实现两端对齐文本效果。
inherit: 规定应该从父元素继承 text-align 属性的值。
text-decoration向文本添加修饰underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
blink 定义闪烁的文本。
text-indent缩进元素中文本的首行
text-shadow设置文本阴影text-shadow: h-shadow v-shadow blur color;
h-shadow:水平阴影的位置,允许负值;
v-shadow:垂直阴影的位置,允许负值;
blur:模糊的距离;
color:阴影的颜色
text-transform控制元素中的字母capitalize 文本中的每个单词以大写字母开头。
uppercase 定义仅有大写字母。
lowercase 定义无大写字母,仅有小写字母。
unicode-bidi设置或返回文本是否被重写 
vertical-align设置元素的垂直对齐
white-space设置元素中空白的处理方式
word-spacing设置字间距


八、wxss 字体属性(font)
属性说明语法(属性值)
font在一个声明中设置所有字体属性font:font-style font-variant font-weight font-size/line-height font-family(按顺序)
font-style指定文本的字体样式normal 默认值。浏览器显示一个标准的字体样式。
italic 浏览器会显示一个斜体的字体样式。
oblique 浏览器会显示一个倾斜的字体样式。
inherit 规定应该从父元素继承字体样式。
font-variant以小型大写字体或者正常字体显示文本normal 默认值。浏览器会显示一个标准的字体。
small-caps 浏览器会显示小型大写字母的字体。
inherit 规定应该从父元素继承 font-variant 属性的值。
font-weight指定字体的粗细normal 默认值。定义标准的字符。
bold 定义粗体字符。
bolder 定义更粗的字符。
lighter 定义更细的字符。
inherit 规定应该从父元素继承字体的粗细。
font-size指定文本的字体大小smaller 把 font-size 设置为比父元素更小的尺寸。
larger 把 font-size 设置为比父元素更大的尺寸。
length 把 font-size 设置为一个固定的值。
% 把 font-size 设置为基于父元素的一个百分比值。
font-family指定文本的字体系列


九、wxss margin(外边距)(margin)
属性说明语法(属性值)
margin在一个声明中设置所有外边距属性。margin:10px 5px 15px 20px;(上边距,右边距,下边距,左边距)
margin-top设置元素的上外边距。
margin-right设置元素的右外边距。
margin-bottom设置元素的下外边距。
margin-left设置元素的左外边距


十、wxss padding(填充)(padding)
属性说明语法(属性值)
padding使用缩写属性设置在一个声明中的所有填充属性padding:10px 5px 15px 20px;(上填充,右填充,下填充,左填充)
padding-top设置元素的顶部填充。
padding-right设置元素的右部填充
padding-bottom设置元素的底部填充
padding-left设置元素的左部填充


十一、wxss 选择器
选择器样例样例描述
.class(类选择器).intro选择所有拥有class="intro"的组件
#id(id选择器)#firstname选择拥有id="firstname"的组件
elementview选择所有view组件
element, elementview checkbox选择所有文档的view组件和所有的checkbox组件
::afterview::after在view组件后边插入内容
::beforeview::before在view组件前边插入内容

 

有一些属性值太多且实际应用的比较少 可以参考w3cschool的css文档:

http://www.w3cschool.cn/css/css-tutorial.html

对于微信小程序的文档手册可参考以下链接:

http://www.w3cschool.cn/weixinapp/9wou1q8j.html


转载请注明: ITTXX.CN--分享互联网 » 微信小程序设置样式wxml和wxss使用总结

最后更新:2020-07-01 10:07:04

赞 (2) or 分享 ()
游客 发表我的评论   换个身份
取消评论

表情
(0)个小伙伴在吐槽