[猫头虎分享21天微信小程序基础入门教程] 第3天：页面布局与样式设计

自我介绍

大家好，我是猫头虎，一名全栈软件工程师。今天，我将继续带领大家深入微信小程序的世界，特别是如何利用WXML和WXSS来创建精美的页面布局和样式。🌟

WXML布局基础 🏗️

WXML（WeiXin Markup Language）是微信小程序的标记语言，类似于HTML。它用于描述页面的结构。WXML提供了丰富的组件，如视图容器、基础内容、表单组件等，来帮助开发者构建界面。

常用组件

• view：类似于HTML中的div，用于布局的容器。
• text：用于显示文本，类似于HTML中的span。
• button：按钮组件，可以绑定事件处理函数。
• image：用来显示图片。

在这里插入图片描述

基本示例

<view class="container">
  <text>欢迎来到猫头虎的小程序教程！</text>
  <button bindtap="clickMe">点击我</button>
  <image src="url_to_image.jpg"></image>
</view>

WXSS样式设计 🎨

WXSS（WeiXin Style Sheets）是微信小程序的样式表，类似于CSS。它用于定义WXML的组件的样式。

在这里插入图片描述

特性

• 支持CSS大部分特性：WXSS扩展了CSS，支持更多的尺寸单位和样式选择器。
• 全局样式与局部样式：可以在app.wxss定义全局样式，也可以在页面对应的.wxss文件定义局部样式。

样式示例

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.text {
  color: #333;
  font-size: 16px;
}

小测试 🧪

• 尝试为上述示例中的<text>组件添加一个自定义样式，比如修改字体颜色和大小，然后查看模拟器中的效果。

今日学习总结 📚