开发大项目：结合 `Flex` 和 `Template` 模板，开发电商小程序首页、活动页和热门排行页

在本项目中，我们将学习如何运用微信小程序中的 Flex 布局和 Template 模板技术，开发一个功能完善、界面优美的电商小程序，包括首页、活动页和热门排行页。这些页面可以复用组件化模板，提升开发效率和代码可维护性。

1. 项目概述

1.1 项目目标

利用 Flex 布局实现页面元素的自适应排列和布局。
使用 Template 模板技术提高代码复用率，减少重复代码。
开发电商小程序的三个核心页面：首页、活动页 和 热门排行页。

1.2 项目技术栈

微信小程序框架。
WXML 和 WXSS 文件实现页面结构与样式。
JavaScript 和 WXS 实现页面交互逻辑。
Flex 布局实现响应式页面设计。
使用 Template 模板实现组件化开发。

2. Flex 布局基础知识

2.1 Flex 布局特点

父容器设置 display: flex，子元素会自动成为 Flex 项目。
子元素可以按主轴排列（水平或垂直）。
子元素间距和对齐方式可以通过容器属性灵活控制。

2.2 常用 Flex 属性

父容器属性：
- flex-direction：定义主轴方向。
- justify-content：定义主轴上的子项对齐方式。
- align-items：定义交叉轴上的子项对齐方式。
子项属性：
- flex-grow：定义子项在剩余空间中的增长比例。
- flex-shrink：定义子项在空间不足时的缩小比例。

3. Template 模板基础知识

3.1 Template 模板简介

Template 是微信小程序中用于代码复用的功能。通过定义模板，开发者可以在多个页面中复用相同的代码片段。

3.2 使用步骤

定义模板：
- 在 WXML 中使用 <template> 标签定义可复用的结构。
引用模板：
- 使用 <import> 或 <include> 引入模板文件。
- 使用 <template is="模板名" data="{{...}}" /> 调用模板。

4. 电商小程序页面设计

4.1 首页设计

4.1.1 页面结构

<!-- pages/home/home.wxml -->
<view class="container">
  <!-- 轮播图 -->
  <swiper class="banner" autoplay="true" interval="3000" circular="true">
    <block wx:for="{{banners}}" wx:key="index">
      <swiper-item>
        <image src="{{item}}" class="banner-image" />
      </swiper-item>
    </block>
  </swiper>

  <!-- 商品分类 -->
  <view class="category">
    <template is="categoryTemplate" data="{{categories}}" />
  </view>
</view>

4.1.2 样式定义

/* pages/home/home.wxss */
.container {
  display: flex;
  flex-direction: column;
  padding: 10px;
}
.banner {
  height: 200px;
}
.banner-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.category {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

4.1.3 数据绑定

// pages/home/home.js
Page({
  data: {
    banners: [
      '/images/banner1.jpg',
      '/images/banner2.jpg',
      '/images/banner3.jpg'
    ],
    categories: [
      { id: 1, name: '手机', icon: '/images/phone.png' },
      { id: 2, name: '电脑', icon: '/images/laptop.png' },
      { id: 3, name: '家电', icon: '/images/appliance.png' }
    ]
  }
});

4.1.4 模板定义

<!-- templates/category.wxml -->
<template name="categoryTemplate">
  <block wx:for="{{data}}" wx:key="id">
    <view class="category-item">
      <image src="{{item.icon}}" class="category-icon" />
      <text>{{item.name}}</text>
    </view>
  </block>
</template>

4.2 活动页设计

页面结构

<view class="container">
  <view class="activity-header">当前活动</view>
  <view class="activity-list">
    <template is="activityTemplate" data="{{activities}}" />
  </view>
</view>

数据绑定

Page({
  data: {
    activities: [
      { id: 1, name: '双12优惠', desc: '全场满200减50', image: '/images/activity1.jpg' },
      { id: 2, name: '新年大促', desc: '最高立减100', image: '/images/activity2.jpg' }
    ]
  }
});

模板定义

<template name="activityTemplate">
  <block wx:for="{{data}}" wx:key="id">
    <view class="activity-item">
      <image src="{{item.image}}" class="activity-image" />
      <view class="activity-info">
        <text class="activity-name">{{item.name}}</text>
        <text class="activity-desc">{{item.desc}}</text>
      </view>
    </view>
  </block>
</template>