小程序之首页搭建——Flex布局

以下是使用Flex布局创建小程序首页的简化代码示例：

<!-- 小程序首页 index.wxml -->
<view class="container">
  <view class="header">
    <text class="title">我的小程序</text>
  </view>
  <view class="body">
    <view class="card">
      <image src="/images/card-image.png" class="card-image"></image>
      <text class="card-text">卡片内容</text>
    </view>
    <!-- 更多卡片内容 -->
  </view>
  <view class="footer">
    <text class="footer-text">底部信息</text>
  </view>
</view>

/* 小程序首页样式 index.wxss */
.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}
 
.header {
  padding: 40rpx;
  background-color: #fff;
}
 
.title {
  text-align: center;
  font-size: 20px;
}
 
.body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20rpx;
}
 
.card {
  margin-bottom: 20rpx;
  background-color: #fff;
  display: flex;
  padding: 20rpx;
}
 
.card-image {
  width: 120rpx;
  height: 120rpx;
  margin-right: 20rpx;
}
 
.card-text {
  flex: 1;
}
 
.footer {
  padding: 40rpx;
  background-color: #fff;
}
 
.footer-text {
  text-align: center;
  font-size: 14px;
  color: #999;
}

这个示例展示了如何使用Flex布局创建一个具有头部、主体和底部的简单页面结构，主体部分可以放置多个卡片式内容。这种布局方式灵活而且能够适应不同屏幕尺寸的设备。