微信小程序入门学习教程，从入门到精通，微信小程序页面制作(2）

微信小程序页面制作

一、WXML 简介

1. 概述

WXML（WeiXin Markup Language）是微信小程序的结构语言，类似于 HTML，用于描述页面结构。

2. 语法特点

使用标签嵌套构建页面结构；
支持数据绑定（{``{}}）、条件渲染（wx:if）、列表渲染（wx:for）等；
标签必须闭合（如 <view></view> 或 <image />）。

3. 示例代码

xml 复制代码

<!-- pages/index/index.wxml -->
<view class="container">
  <!-- 数据绑定 -->
  <text>欢迎，{{userName}}！</text>

  <!-- 条件渲染 -->
  <view wx:if="{{showMessage}}">这是一条重要消息</view>

  <!-- 列表渲染 -->
  <view wx:for="{{fruits}}" wx:key="id">
    {{index + 1}}. {{item.name}}
  </view>
</view>

javascript 复制代码

// pages/index/index.js
Page({
  data: {
    userName: '小明',
    showMessage: true,
    fruits: [
      { id: 1, name: '苹果' },
      { id: 2, name: '香蕉' },
      { id: 3, name: '橙子' }
    ]
  }
})

二、WXSS 简介

1. 概述

WXSS（WeiXin Style Sheets）是微信小程序的样式语言，类似 CSS，但支持 rpx 单位和部分扩展特性。

2. 特性

支持大部分 CSS 选择器；
支持 @import 导入外部样式；
使用 rpx（responsive pixel）实现屏幕适配。

3. 示例代码

css 复制代码

/* pages/index/index.wxss */
.container {
  padding: 20rpx;
  background-color: #f5f5f5;
}

.title {
  font-size: 36rpx;
  color: #333;
  text-align: center;
}

三、常用组件

1. view 组件

块级容器，类似 <div>。

xml 复制代码

<view class="box">这是一个 view 容器</view>

2. image 组件

用于显示图片，支持本地和网络路径。

xml 复制代码

<image src="/images/avatar.png" mode="aspectFit" />

mode：裁剪/缩放模式，常用 aspectFit（保持宽高比完整显示）。

3. text 组件

用于显示文本，支持长按复制。

xml 复制代码

<text selectable="true">可复制的文本</text>

4. swiper & swiper-item

轮播图组件。

xml 复制代码

<swiper autoplay="true" interval="3000" duration="500">
  <swiper-item>
    <image src="/images/banner1.jpg" mode="aspectFill" />
  </swiper-item>
  <swiper-item>
    <image src="/images/banner2.jpg" mode="aspectFill" />
  </swiper-item>
</swiper>

5. video 组件

播放视频。

xml 复制代码

<video src="https://example.com/wedding.mp4" controls="{{true}}" />

6. 表单组件（input、button、form）

xml 复制代码

<form bindsubmit="onSubmit">
  <input name="name" placeholder="请输入姓名" />
  <button form-type="submit">提交</button>
</form>

javascript 复制代码

Page({
  onSubmit(e) {
    console.log('表单数据：', e.detail.value);
  }
})

四、页面路径配置（app.json）

说明

在 app.json 中配置页面路径、窗口样式、tabBar 等。

json 复制代码

{
  "pages": [
    "pages/index/index",
    "pages/profile/profile"
  ],
  "window": {
    "navigationBarTitleText": "首页",
    "navigationBarBackgroundColor": "#007AFF"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "icons/home.png",
        "selectedIconPath": "icons/home-active.png"
      },
      {
        "pagePath": "pages/profile/profile",
        "text": "我的",
        "iconPath": "icons/user.png",
        "selectedIconPath": "icons/user-active.png"
      }
    ]
  }
}

五、rpx 单位

说明

rpx（responsive pixel）：微信小程序的响应式单位；
屏幕宽度固定为 750rpx；
例如：iPhone 6 屏幕宽 375px = 750rpx → 1rpx = 0.5px。

示例

css 复制代码

.box {
  width: 750rpx; /* 全屏宽 */
  height: 200rpx; /* 约 100px */
  font-size: 28rpx; /* 约 14px */
}

六、样式导入（@import）

用法

在 WXSS 中导入公共样式。

css 复制代码

/* common.wxss */
.title {
  color: red;
  font-weight: bold;
}

css 复制代码

/* index.wxss */
@import "/common.wxss";

.container {
  padding: 20rpx;
}

七、Flex 布局

说明

WXSS 支持完整的 Flex 布局，用于弹性排版。

示例

xml 复制代码

<view class="flex-container">
  <view class="flex-item">1</view>
  <view class="flex-item">2</view>
  <view class="flex-item">3</view>
</view>

css 复制代码

.flex-container {
  display: flex;
  justify-content: space-between; /* 主轴两端对齐 */
  align-items: center; /* 交叉轴居中 */
  padding: 20rpx;
}

.flex-item {
  width: 200rpx;
  height: 100rpx;
  background: #ddd;
  text-align: center;
  line-height: 100rpx;
}

八、导航栏与标签栏配置

1. 导航栏（页面级）

在页面的 .json 文件中配置：

json 复制代码

// pages/wedding/wedding.json
{
  "navigationBarTitleText": "婚礼邀请函",
  "navigationBarBackgroundColor": "#ff6b6b",
  "navigationBarTextStyle": "white"
}

2. 标签栏（全局 tabBar）

已在 app.json 中展示（见第四节）。

九、vw / vh 单位（补充）

说明

vw：视口宽度的 1%；
vh：视口高度的 1%；
小程序支持（基础库 2.13.0+）。

示例

css 复制代码

.full-screen {
  width: 100vw;
  height: 100vh;
  background: linear-gradient(to bottom, #ff9a9e, #fad0c4);
}

综合性案例

【案例2-1】个人信息页面

功能：展示头像、姓名、简介、联系方式

xml 复制代码

<!-- pages/profile/profile.wxml -->
<view class="profile-container">
  <image class="avatar" src="/images/avatar.png" mode="aspectFill" />
  <text class="name">张三</text>
  <text class="bio">热爱编程，喜欢旅行</text>
  <view class="contact">
    <text class="phone">📱 138****1234</text>
    <text class="email">✉️ zhangsan@example.com</text>
  </view>
</view>

css 复制代码

/* profile.wxss */
.profile-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60rpx 40rpx;
  background-color: #fff;
}

.avatar {
  width: 180rpx;
  height: 180rpx;
  border-radius: 50%;
  margin-bottom: 30rpx;
}

.name {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 16rpx;
}

.bio {
  color: #666;
  margin-bottom: 40rpx;
}

.contact text {
  display: block;
  margin: 12rpx 0;
  font-size: 28rpx;
  color: #333;
}

【案例2-2】本地生活首页（轮播 + 服务入口）

xml 复制代码

<!-- pages/home/home.wxml -->
<view class="home">
  <!-- 轮播图 -->
  <swiper autoplay="true" interval="4000" duration="800" class="banner">
    <swiper-item><image src="/images/banner1.jpg" mode="aspectFill" /></swiper-item>
    <swiper-item><image src="/images/banner2.jpg" mode="aspectFill" /></swiper-item>
  </swiper>

  <!-- 服务入口 -->
  <view class="services">
    <view class="service-item" wx:for="{{services}}" wx:key="id">
      <image src="{{item.icon}}" class="icon" />
      <text>{{item.name}}</text>
    </view>
  </view>
</view>

javascript 复制代码

// home.js
Page({
  data: {
    services: [
      { id: 1, name: '美食', icon: '/icons/food.png' },
      { id: 2, name: '酒店', icon: '/icons/hotel.png' },
      { id: 3, name: '电影', icon: '/icons/movie.png' },
      { id: 4, name: '打车', icon: '/icons/car.png' }
    ]
  }
})

css 复制代码

/* home.wxss */
.banner {
  height: 300rpx;
  width: 100%;
}

.services {
  display: flex;
  flex-wrap: wrap;
  padding: 20rpx;
  justify-content: space-between;
}

.service-item {
  width: 32%;
  text-align: center;
  margin-top: 30rpx;
}

.icon {
  width: 80rpx;
  height: 80rpx;
  margin-bottom: 10rpx;
}

【案例2-3】婚礼邀请函

xml 复制代码

<!-- pages/wedding/wedding.wxml -->
<view class="invitation">
  <video src="https://example.com/wedding.mp4" controls="{{false}}" autoplay loop muted class="bg-video" />

  <view class="content">
    <text class="title">诚邀您参加我们的婚礼</text>
    <text class="names">李明 & 王芳</text>
    <text class="date">2025年10月1日 11:00</text>
    <text class="address">📍 北京市朝阳区幸福酒店</text>

    <form bindsubmit="submitRSVP">
      <input name="guestName" placeholder="请输入您的姓名" class="input" />
      <button form-type="submit" class="btn">确认出席</button>
    </form>
  </view>
</view>

css 复制代码

/* wedding.wxss */
.invitation {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.content {
  position: relative;
  z-index: 1;
  color: white;
  text-align: center;
  padding: 100rpx 40rpx 0;
  text-shadow: 0 2rpx 6rpx rgba(0,0,0,0.5);
}

.title {
  font-size: 48rpx;
  font-weight: bold;
  display: block;
  margin-bottom: 40rpx;
}

.names {
  font-size: 40rpx;
  margin-bottom: 30rpx;
  display: block;
}

.date, .address {
  font-size: 32rpx;
  display: block;
  margin-bottom: 50rpx;
}

.input {
  width: 80%;
  padding: 20rpx;
  margin-bottom: 30rpx;
  border-radius: 10rpx;
  background: rgba(255,255,255,0.8);
}

.btn {
  background-color: #ff6b6b;
  color: white;
  width: 80%;
}

javascript 复制代码

// wedding.js
Page({
  submitRSVP(e) {
    const name = e.detail.value.guestName;
    if (!name) {
      wx.showToast({ title: '请输入姓名', icon: 'none' });
      return;
    }
    wx.showToast({ title: `欢迎 ${name}！`, icon: 'success' });
  }
})

总结

本章涵盖了微信小程序页面开发的核心知识点：

结构层：WXML + 组件；
样式层：WXSS + rpx/vw/vh + Flex；
配置层：页面路径、导航栏、tabBar；
交互层：表单、事件绑定。

通过三个综合性案例，可快速掌握小程序页面搭建的完整流程。建议结合开发者工具调试，逐步优化布局与交互体验。