微信小程序第2讲

2024-07-10 22:56| 来源: 网络整理| 查看: 265

样式设计

wxss语言是设计样式的编程语言，它能设置各个标签的风格。比如：字体颜色，大小，背景色，形状，布局，边框，动画等

举一个简单的例子：比如用户想要制作个人名片: 下面是他的个人需求

wxss属性用户需求背景色cyan（青蓝色）边框实线、圆角、绿色字体微软雅黑 15px 粗体蓝色

实现这个需求，我们可以用wxss语言来写它的样式代码。首先我们定义一个类型：叫什么名字好呢？就叫card吧！我们要在index.wxss完成样式代码设计

index.wxss:

.card{ /*设置背景色为青蓝色*/ background:cyan; /*先暂时记住下面三行代码*/ /*这三行代码是可以让子标签保持水平居中的*/ display: flex; flex-direction: column; align-items: center; /*设置圆角*/ border-radius:20px; /*设计边框*/ border: 2rpx solid green; /*设计字体*/ font-family:'微软雅黑'; /*设置字体大小*/ font-size: 15px; /*设置加粗*/ font-weight:bold; /*设置内边距*/ padding: 15px; /*设置字体颜色*/ color:blue }

这个样式代码必须要在index.wxml中引用才能生效！！！那我们现在就去引用一下

index.wxml:

姓名：程竹楠\n 学号：18413001\n 学院：软件工程学院\n 专业：软件工程

我们写完代码后按下ctrl+s运行下：运行效果：

view组件的嵌套

view是一种视图容器，view嵌套的话可以理解为往容器里面放容器

我们通过图来理解view的嵌套对应上面的图，我们有相应的代码： index.wxml

index.wxss

.card{ width:200px; height:150px; border-radius:10px; background:cyan } .detail{ width:80%; height: 100%; border-radius:10px; background:blue }

运行结果：在这里插入图片描述我们还可以使蓝色的块块居中在样式代码中，我们看到我对detail（蓝色块）的宽度设置的是width:80% 也就是说它占外部容器宽度的80%,右面剩余20% 要想使它居中在青蓝色块中，只需向右移动10%; 那我们修改wxss代码

.card{ width:200px; height:150px; border-radius:10px; background:cyan } .detail{ width:80%; /*距离左面10%就是向右移动10%*/ margin-left:10%; height: 100%; border-radius:10px; background:blue }

wxml代码不变

运行效果在这里插入图片描述现在我们理解了，如果内部容器写width:80%;就是占外部容器的80% 这个就很棒接下来我们要理解一下，外部容器样式渲染内部容器样式我们修改index.wxml代码

微信小程序

我们知道如果想要改变”微信小程序“这几个字的：字体大小、颜色属性需要对detail进行设置，那好我现在就偏不这么做我要对card进行设置，看看”微信小程序“字体大小、颜色变化

.card{ width:200px; height:150px; border-radius:10px; /*设置字体相关*/ font-size: 20px; color: white; /*字体加粗*/ font-weight: bold; background:cyan } .detail{ width:80%; margin-left: 10%; /*下面这三行代码是设置文字水平、垂直居中的*/ /*暂时先记下来*/ display: flex; justify-content: center; align-items: center; height: 100%; border-radius:10px; background:blue }

运行结果：总结：

我们熟练认识了wxss小程序样式代码我们熟练认识了wxml小程序视图代码理解了容器的嵌套，和外部样式作用内部样式理解了内部容器的参照系是外部容器，width:80%是外部容器宽度80%

这里让大家记忆的三行代码是flex布局相关内容，我们下期再见

【本文地址】

公司简介

联系我们