当前位置： 首页 > news >正文

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

news 2025/9/29 6:45:21

微信小程序页面制作

一、WXML 简介

1. 概述

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

2. 语法特点

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

3. 示例代码

<!-- 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>

// 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. 示例代码

/* pages/index/index.wxss */
.container {padding: 20rpx;background-color: #f5f5f5;
}.title {font-size: 36rpx;color: #333;text-align: center;
}

三、常用组件

1. view 组件

块级容器，类似 <div>。

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

2. image 组件

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

<image src="/images/avatar.png" mode="aspectFit" />
  • mode：裁剪/缩放模式，常用 aspectFit（保持宽高比完整显示）。

3. text 组件

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

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

4. swiper & swiper-item

轮播图组件。

<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 组件

播放视频。

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

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

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

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

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

说明

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

{"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。

示例

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

六、样式导入（@import）

用法

在 WXSS 中导入公共样式。

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

/* index.wxss */
@import "/common.wxss";.container {padding: 20rpx;
}

七、Flex 布局

说明

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

示例

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

.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 文件中配置：

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

2. 标签栏（全局 tabBar）

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

九、vw / vh 单位（补充）

说明

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

示例

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

综合性案例

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

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

<!-- 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>

/* 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】本地生活首页（轮播 + 服务入口）

<!-- 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>

// 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' }]}
})

/* 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】婚礼邀请函

<!-- 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>

/* 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%;
}

// 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；
  • 交互层：表单、事件绑定。

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

http://www.dtcms.com/a/418612.html

相关文章：

  • 漳州本地网站宝安网站开发
  • Pytest框架速成
  • C++设计模式之结构型模式：代理模式（Proxy）
  • 八股已死、场景当立(分布式ID篇)
  • C++指针笔试题1
  • 中英双语 网站 模板网站建设项目验收单
  • 【centos生产环境搭建（二）redis安装】
  • 四川移动网站建设网架报价明细表
  • 网站设计思路WordPress客户端
  • 做试玩网站网站快速排名技术
  • Day30_【NLP 自然语言处理（0）—入门】
  • springboot 配置 HikariDataSource 连接池信息
  • identity mapping kernel image mapping
  • Docker操作命令
  • iOS 26 能耗检测实战指南，升级后电池掉速是否正常 + KeyMob + Instruments 实时监控 + 优化策略
  • perl踩坑系列===正则表达式第2坑---split中的“或”操作符
  • 苹果iOS 26正式版系统性能深度测试：续航、信号、流畅度详细解析
  • 假网站网站怎么做中山中小企业网站建设
  • 网站备案 二级域名学会网站建设项目
  • 01-元字符：如何巧妙记忆正则表达式的基本元件？
  • yandex俄语网站建设广东省网站备案查询
  • nginx xxs漏铜修复、nginx 域名配置、nginx https证书配置、Http不安全处理方法
  • 建设银行客户端官方网站flask做大型网站开发
  • 耐达讯自动化妙解Modbus与Profibus协议冲突：变频器控制的“黄金公式“
  • 自动化专业核心课《计算机控制技术》导览---数字时代的控制中枢
  • 【星海出品】计算机科学缓存命中学习
  • YOLO入门教程（番外）：计算机视觉数学、编程基础
  • 做商品网站医院网站建设方案计划书
  • 从零开始学RabbitMQ：Java实战简单模式与工作队列消息处理
  • 农家乐网站模板腾讯云电商网站建设