WXML与WXSS

标签：sys   设定   custom   组件   没有   outside   很多   ges   文件夹   

编辑WXML文件

我们在开发者工具里打开之前修改的模板小程序home文件夹下的home.wxml，里面有如下代码

这个第1行，是一句注释，也就是一句说明，不会显示在小程序的前端，第2行就是一个组件。

接下来我们会广泛使用到小程序的组件。比如我们在上面的代码下面加一下下面的代码，大家再来看效果：

大家可以结合上面的代码，来了解一下组件的基本写法

• 组件和组件类似，他们都是成对出现的，比如，，两个要一起写，有前面的开始标签，后面就要有一个闭合标签，闭合标签前面有一个“/”
• view组件是可以嵌套写的，
• 为了让视觉上更好看，写代码的时候要有缩进（虽然不缩进也不会有影响）

我们可以把这个页面写的更加复杂一点。

WXSS选择器

大家是不是已经发现我们写的小程序页面有点丑？那我们需要对这个小程序页面进行美化。但是我们的代码里面组件这么多，要是不对每个组件进行区分，就很难对每个组件进行美化了。

id与class选择器

这个时候我们就要先了解一下选择器的概念。选择器是用来干什么的呢？从名字里我们就可以看出来，就是为了选择。比如学校有1000个人，我们要选择出其中一个人，那我们可以给所有人一个学号，这个学号是唯一的，我们可以称这个学号为id，用于精准的选择；还有的时候我们需要对一群人进行分类选择，比如整个班级或者所有男生，这个班级、性别，我们可以称为class，用于分类选择。

在wxss技术文档这里有关于选择器的描述。

[技术文档：WXSS技术文档]

(https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html)

给组件增加属性

比如上面的view组件实在太多了，为了区分它们，我们给他们加一些属性，这样我们就可以用选择器选择它们了。

以及比较复杂的那一段代码的view组件也加上属性。给组件添加属性在外观上并不会有什么效果哦~

CSS参考手册

给wxml文件的组件加了选择器之后，我们就可以在wxss文件里给指定的某个组件以及某类组件添加一些美化了，这里我们需要编辑home.wxss文件。wxss美化的知识和css是一样的，所以小程序的技术文档里面没有，大家可以看一下w3shool的CSS参考手册。CSS文件的作用就是来美化组件的。

技术文档：CSS参考手册

这里大家只需要了解CSS的字体属性、文本属性、背景属性、边框属性、盒模型

字体属性与文本属性

比如class为title的组件里面的文字是标题，我们需要对标题的字体进行加大、加粗以及居中处理，这时候我们就可以在home.wxss文件里加入以下代码，然后大家看看有什么效果。

通过 .title这个选择器，我们就选择到了类class为
title的组件，然后就可以精准地对它进行美化，对它的美化代码不会用在其他组件上了。

大家也要留意css的写法，这里font-size，font-weight，text-align外面称之为属性，冒号:后面的我们称之为值，属性:值这一整个我们叫做声明，每个声明我们用分号;隔开。大家不要记这些概念，知道是个什么东西就行了。

class为item-title的组件里面的文字是一个列表的标题，我们希望它和其他文字的样式有所不同，不过这个标题要比title的字体小一些；比其他文字更粗，但是比title更细；颜色我们可以添加一个彩色字体，

我们希望描述类的文字颜色浅一点，不要那么黑，我们可以换一个浅一点的颜色，我们在home.wxss下面继续加代码。

这里有两个选择器，一个是desc，一个是item-desc，当我们希望两个不同的选择器有相同的css代码时，可以简化一起写，然后用逗号,隔开。

除了标题（class为title和item-title的组件）我们都给他们加了字体大小，我们希望所有的文字大小、行间距有一个统一的设定。

盒模型

盒子模型就像一个长方形的盒子，它有长度、高度、也有边框，以及内边距与外边距。我们通过实战来了解一下。

内边距就是这个长方形的边框与长方形里面的内容之间的距离，有上边距，右边距、下边距、左边距这个四个内边距，分别为padding-top，padding-right，padding-bottom，padding-left。注意是上、右、下、左，这样一个顺时针。

那外边距就是这个长方形的边框与长方形外面的内容之间的距离，同样也有上边距margin-top，右边距margin-right，下边距margin-bottom，左边距margin-left这个四个边距。同样也是上、右、下、左这个顺时针。

比如我们给id为wxmlinfo和studyweapp的组件加一个内部距，让文字

padding的简写 上面这四个padding是可以做一定的简写的，关于padding的简写，大家可以去阅读以下技术文档，多用就会了，CSS padding属性 ，在这里有四个padding简写的案例，比如上面的这四条声明可以简写成padding:20px 15px。大家可以业余深入了解一下。

class为title的view组件是标题，我们希望它和下面的文字距离大一点，我们可以添加以下样式:

这里咋又冒出了一个em的单位，em是相对于当前字体尺寸而言的单位，如果当前你的字体大小为16px，那1em为16px；如果当前你的字体大小为18px，那1em为18px。

为了让class为item-title的组件，也就是列表的标题更加突出，我们可以给它左边加一个边框，

这样，小程序的一篇文章的样式看起来就算马马虎虎可以接受啦

WXML与WXSS

标签：sys   设定   custom   组件   没有   outside   很多   ges   文件夹   

原文地址：https://www.cnblogs.com/pzrj123/p/12594101.html