小程序开发进阶：动手打造首页与 “我的” 页面（第二天）

昨天我们完成了小程序开发的基础搭建，注册了账号、安装了开发者工具，还初步认识了项目结构。今天，我们要正式进入 “动手阶段”—— 开发两个核心页面：首页和 “我的” 页面。这两个页面是绝大多数小程序的标配，掌握它们的开发逻辑，能帮你快速理解小程序页面的搭建规律。

为什么先做首页和 “我的” 页面？

首页是用户打开小程序第一眼看到的内容，承担着展示核心功能、引导用户操作的重任；“我的” 页面则集中了用户信息、设置入口等个性化内容。先搞定这两个页面，不仅能让你快速获得 “做出东西” 的成就感，还能掌握小程序页面开发的核心流程：「创建页面→编写结构→设计样式→预览调试」。

第二天学习内容：页面开发实战

准备工作：明确页面结构

在动手前，我们先简单规划下两个页面的大致结构：

• 「首页」：顶部放一个轮播图（展示推荐内容），下面放几个功能按钮（比如 “商品列表”“优惠活动”），底部放一个简单的导航栏。

• 「我的页面」：顶部放用户头像和昵称，中间放几个功能入口（比如 “我的订单”“设置”），底部放版权信息。

步骤 1：创建页面文件

昨天我们提到，小程序的每个页面都需要在pages文件夹下创建一个单独的文件夹，且每个页面至少包含 4 个文件：.js（逻辑）、.json（配置）、.wxml（结构）、.wxss（样式）。

1. 「创建首页文件」：

• 在pages文件夹下新建index文件夹。

• 在index文件夹里新建 4 个文件：index.js、index.json、index.wxml、index.wxss（开发者工具会自动生成基础代码）。

1. 「创建 “我的” 页面文件」：

• 同样，在pages文件夹下新建mine文件夹。

• 新建mine.js、mine.json、mine.wxml、mine.wxss文件。

1. 「配置全局页面路径」： 保存后，开发者工具会自动识别页面，左侧模拟器会显示首页。

   保存后，开发者工具会自动识别页面，左侧模拟器会显示首页。

• 打开app.json文件（全局配置文件），在pages数组中添加两个页面的路径，确保首页路径放在第一位（小程序默认打开第一个页面）：

{
  "pages": [
    "pages/index/index",
    "pages/mine/mine"
  ],
  "window": {
    "navigationBarTitleText": "我的小程序"
  }
}

步骤 2：开发首页（index）

编写首页结构（index.wxml）

wxml相当于网页开发中的html，但标签有所不同（比如用<view>代替<div>，用<image>代替<img>）。

<!-- 首页结构：轮播图 + 功能按钮 + 底部导航 -->
<view class="container">
  <!-- 轮播图 -->
  <swiper indicator-dots="true" autoplay="true" interval="3000" duration="500">
    <swiper-item>
      <image src="/images/banner1.jpg" mode="widthFix"></image>
    </swiper-item>
    <swiper-item>
      <image src="/images/banner2.jpg" mode="widthFix"></image>
    </swiper-item>
  </swiper>

  <!-- 功能按钮区 -->
  <view class="btn-group">
    <view class="btn-item">
      <image src="/images/icon1.png"></image>
      <text>商品列表</text>
    </view>
    <view class="btn-item">
      <image src="/images/icon2.png"></image>
      <text>优惠活动</text>
    </view>
  </view>
</view>

这里用到了小程序的swiper组件（轮播图），indicator-dots表示显示指示器，autoplay表示自动播放。image标签的mode="widthFix"用于保持图片比例。

设计首页样式（index.wxss）

wxss类似css，但增加了rpx单位（可自适应不同屏幕宽度），方便适配各种手机。

/* 首页样式 */
.container {
  padding: 10rpx;
}

/* 轮播图样式 */
swiper {
  width: 100%;
  height: 300rpx;
  margin-bottom: 30rpx;
}

swiper image {
  width: 100%;
  height: 100%;
}

/* 功能按钮样式 */
.btn-group {
  display: flex; /* 弹性布局，让按钮横向排列 */
  justify-content: space-around; /* 均匀分布 */
}

.btn-item {
  display: flex;
  flex-direction: column; /* 纵向排列图片和文字 */
  align-items: center; /* 水平居中 */
}

.btn-item image {
  width: 100rpx;
  height: 100rpx;
  margin-bottom: 10rpx;
}

.btn-item text {
  font-size: 28rpx;
  color: #333;
}

步骤 3：开发 “我的” 页面（mine）

编写 “我的” 页面结构（mine.wxml）

<!-- “我的”页面结构：用户信息 + 功能入口 + 版权信息 -->
<view class="mine-container">
  <!-- 用户信息区 -->
  <view class="user-info">
    <image src="/images/avatar.png" class="avatar"></image>
    <text class="nickname">游客用户</text>
  </view>

  <!-- 功能入口区 -->
  <view class="func-list">
    <view class="func-item">
      <text>我的订单</text>
      <image src="/images/arrow.png" class="arrow"></image>
    </view>
    <view class="func-item">
      <text>设置</text>
      <image src="/images/arrow.png" class="arrow"></image>
    </view>
  </view>

  <!-- 版权信息 -->
  <view class="copyright">
    <text>© 2025 我的小程序 版权所有</text>
  </view>
</view>

设计 “我的” 页面样式（mine.wxss）

/* “我的”页面样式 */
.mine-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

/* 用户信息区 */
.user-info {
  background-color: #1677ff; /* 蓝色背景 */
  padding: 50rpx 30rpx;
  display: flex;
  align-items: center;
}

.avatar {
  width: 150rpx;
  height: 150rpx;
  border-radius: 50%; /* 圆形头像 */
  margin-right: 30rpx;
}

.nickname {
  color: white;
  font-size: 36rpx;
}

/* 功能入口区 */
.func-list {
  margin-top: 20rpx;
  background-color: white;
}

.func-item {
  display: flex;
  justify-content: space-between; /* 文字左对齐，箭头右对齐 */
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #eee; /* 下划线 */
}

.func-item text {
  font-size: 32rpx;
  color: #333;
}

.arrow {
  width: 30rpx;
  height: 30rpx;
}

/* 版权信息 */
.copyright {
  margin-top: 50rpx;
  text-align: center;
  font-size: 24rpx;
  color: #999;
}

步骤 4：底部导航栏

在底部添加一个接单的底部导航栏,在json里面添加

"tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "images/tab/tab_home.png",
        "selectedIconPath": "images/tab/tab_home_active.png"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "我的",
        "iconPath": "images/tab/tab_me.png",
        "selectedIconPath": "images/tab/tab_me_active.png"
      }
    ],
    "color": "#999999",
    "selectedColor": "#1677ff",
    "backgroundColor": "#ffffff",
    "borderStyle": "black"
  },

步骤 5：预览与调试

写完代码后，点击开发者工具顶部的 “预览” 按钮（或按Ctrl+S保存），工具会自动编译项目。你可以：

1. 在左侧模拟器中实时查看页面效果。

2. 如果发现样式错乱或结构问题，在 “调试器” 的Elements面板中查看元素结构，在Console面板中查看错误信息。

3. 也可以点击 “真机预览”，用手机微信扫描二维码，在真实手机上查看效果（更准确）。

第二天学习总结与思考

今天我们完成了两个页面的开发，核心掌握了：

• 如何创建小程序页面并在全局配置中注册。

• wxml标签（如view、image、swiper）的基本使用。

• wxss样式（如flex布局、rpx单位）的应用。

思考一下：如何给首页的功能按钮添加点击跳转效果？“我的” 页面的用户头像如何替换成真实用户的头像？这些问题我们会在后续学习中解决。明天，我们将学习页面之间的跳转和数据绑定，让小程序 “动” 起来！