微信小程序02-页面制作

微信小程序页面制作指南

目录

微信小程序页面制作

1. 个人信息展示小程序

案例分析

• 需求背景：许多大学生毕业后需要求职，因此制作一个展示个人信息的微信小程序对招聘人员快速了解求职者非常有帮助。
• 页面布局：页面分为头像区域和详细信息区域，分别展示头像和个人详细信息如姓名、年龄、性别等。

开发组件规划

• 使用view组件构建头像和信息区域。
• 使用image组件展示头像。

WXML与WXSS基础

• WXML是微信小程序专用的结构语言，与HTML类似但有特定差异，如使用<view>代替<div>。
• WXSS是微信小程序的样式语言，类似CSS，但引入了rpx单位以适配不同屏幕。

常用组件介绍

• 微信小程序提供了丰富的组件，如view、image等，用于构建具有微信风格的UI界面。

页面路径配置

• 通过app.json文件配置页面路径，指定小程序的页面组成。

组件属性详解

• view组件：类似于HTML中的div，用于布局。
• image组件：用于显示图片，支持多种图片模式。

实际案例实现

• 准备项目，复制素材，编写WXML结构和WXSS样式，完成个人信息展示页面的开发。

2. 本地生活服务小程序

案例分析

• 需求背景：本地生活小程序提供本地美食、装修等信息，包含轮播图和九宫格区域。

开发组件规划

• 轮播图区域使用swiper和swiper-item组件。
• 九宫格区域使用view、text和image组件。

swiper组件详解

• swiper组件用于创建滑动视图，swiper-item组件用于表示滑动内容。

text组件基础

• text组件用于定义行内文本，与HTML中的<span>标签类似。

Flex布局应用

• Flex布局用于实现自适应页面，通过设置容器和项目属性实现复杂布局。

实际案例实现

• 准备项目，配置页面路径，编写WXML结构和WXSS样式，完成本地生活服务页面的开发。

比文云官网，专为企业提供小程序、网站、系统搭建服务，无论是模板搭建还是代码定制，通通都能满足，找服务来比文云官网。

3. 婚礼邀请函小程序

案例分析

• 需求背景：婚礼邀请函小程序提供一种新颖的邀请方式，包含邀请函、照片、视频和宾客信息页面。

开发组件规划

• 使用vw、vh单位适配屏幕。
• 照片页面采用纵向轮播展示。
• 视频页面展示视频列表。
• 宾客信息页面提供表单填写。

导航栏与标签栏配置

• 通过配置文件设置导航栏和标签栏样式。

vw、vh单位介绍

• 视口单位用于移动端页面适配，如vw和vh。

video组件基础

• video组件用于播放视频，支持循环播放等属性。

表单组件介绍

• 表单组件用于收集用户信息，如form、button、input等。

实际案例实现

• 准备项目，配置页面路径和标签栏，编写WXML结构和WXSS样式，完成婚礼邀请函页面的开发。