小程序 - 婚礼邀请函

server/2024/11/30 13:20:33/

小程序页面和样式练习 - 婚礼邀请函小程序开发笔记

目录

婚礼邀请函

准备工作

加载静态资源

项目初始化

标签栏的配置

各页面导航栏标题配置

全局导航栏样式配置

公共样式的编写

项目内容

邀请函页面内容

邀请函页面样式

照片页面内容

照片墙页面样式

美好时光页面内容

美好时光页面样式

宾客信息页面内容

宾客信息页面样式

功能截图

总结


婚礼邀请函

“婚礼邀请函”微信小程序由4个页面组成,分别是“邀请函”页面、“照片”页面、“美好时光”页面和“宾客信息”页面。

准备工作

在开发本案例前,需要先完成一些准备工作。由于本项目需要从服务器中获取视频资源,所以需要搭建一个视频资源服务器,本书通过Node.js搭建视频资源服务器。准备工作的具体步骤如下。

①在微信开发者工具中创建一个新的微信小程序项目,项目名称为“婚礼邀请函”,模板选择“不使用模板”。

②项目创建完成后,在app.json文件中配置4个页面,具体代码如下。

"pages": ["pages/index/index","pages/guest/guest","pages/video/video","pages/pic/pic"],

 

加载静态资源

创建images文件夹,找四个菜单icon放入images中。

项目结构如下:

项目初始化

标签栏的配置

在app.json文件中添加tabBar配置项完成标签栏的配置,

具体步骤如下。①编写标签栏样式的相关配置,具体代码如下。

"tabBar": {"color": "#ccc","selectedColor": "#ff4c91","borderStyle": "white","backgroundColor": "#fff","list": []}

②在list数组中完成对标签按钮的配置,为每个标签按钮配置页面路径、未选中时的图标路径、选中时的图标路径,以及按钮文字,具体代码如下。

"list": [{"pagePath": "pages/index/index","iconPath": "images/invite.png","selectedIconPath": "images/invite.png","text": "邀请函"}, {"pagePath": "pages/pic/pic","iconPath": "images/marry.png","selectedIconPath": "images/marry.png","text": "照片墙"}, {"pagePath": "pages/video/video","iconPath": "images/video.png","selectedIconPath": "images/video.png","text": "美好时光"}, {"pagePath": "pages/guest/guest","iconPath": "images/guest.png","selectedIconPath": "images/guest.png","text": "宾客信息"}]

 

各页面导航栏标题配置

为“邀请函”页面、“照片”页面、“美好时光”页面和“宾客信息”页面设置导航栏标题,分别设置为“邀请函”“照片”“美好时光”“宾客信息”。在每一个页面打开的过程中,导航栏的标题也会随之变化。

下面以pages/index/index.json文件为例,演示导航栏标题的配置,具体代码如下。

{"navigationStyle":"custom","navigationBarTitleText": "邀请函"
}

 

全局导航栏样式配置

在app.json文件中编写导航栏样式的配置,具体代码如下。

"window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#ff4c91","navigationBarTextStyle": "white"},

公共样式的编写

完成所有配置文件的编写后,在app.wxss文件中定义公共样式,具体代码如下。

page {display: flex;flex-direction: column;justify-content: space-between;box-sizing: border-box;
}

至此,项目初始化已经完成。

项目内容

邀请函页面内容

在pages/index/index.wxml文件中编写“邀请函”页面的结构,

具体步骤如下。①实现“邀请函”页面的背景图片,具体代码如下。

<!--index.wxml--><image class="bg" src="/images/bg_1.png" />
<!-- 内容区域 -->
<view class="content"><!-- 顶部图片 --><image class="content-gif" src="/images/head.gif" /><!-- 标题 --><view class="content-title">邀请函</view><!-- 合照 --><view class="content-avatar"><image src="/images/avatar.png" /></view><!-- 新郎新娘姓名区域 --><view class="content-info"><view class="content-name"><image src="/images/tel.jpeg" /><view>王辉辉</view><view>新郎</view></view><view class="content-wedding"><image src="/images/wedding.png" /></view><view class="content-name"><image src="/images/tel.jpeg" /><view>张琳琳</view><view>新娘</view></view></view><!-- 婚礼日期和地址 --><view class="content-address"><view>我们诚邀您来参加我们的婚礼</view><view>时间:2022年1月28日</view><view>地点:北京市海淀区XX路XX酒店</view></view>
</view>

邀请函页面样式

在pages/index/index.wxss文件中编写“邀请函”页面的样式,使页面更加美观,

具体实现步骤如下:①编写背景图片的样式,具体代码如下。

/**index.wxss**/
/* 背景图片的样式 */
.bg {width: 100vw;height: 100vh;
}/* 内容区域中外层容器的样式 */
.content {width: 100vw;height: 100vh;position: fixed;display: flex;flex-direction: column;align-items: center;
}/* 顶部图片区域的样式 */
.content-gif {width: 19vh;height: 18.6vh;margin-bottom: 1.5vh;
}/* 标题区域的样式 */
.content-title {font-size: 5vh;color: #ff4c91;text-align: center;margin-bottom: 2.5vh;
}/* 合照区域的样式 */
.content-avatar image {width: 24vh;height: 24vh;border: 3px solid #ff4c91;border-radius: 50%;
}/* 新郎和新娘姓名区域的样式 */
.content-info {width: 45vw;text-align: center;margin-top: 4vh;display: flex;align-items: center;
}/* 新郎和新娘姓名区域中姓名的样式 */
.content-name {color: #ff4c91;font-size: 2.7vh;line-height: 4.5vh;font-weight: bold;position: relative;
}/* 新郎和新娘姓名区域中“喜”字图片的样式 */
.content-wedding {flex: 1;
}.content-wedding>image {width: 5.5vh;height: 5.5vh;margin-left: 20rpx;
}/* 新郎和新娘姓名区域中电话图片的样式 */
.content-name>image {width: 2.6vh;height: 2.6vh;border: 1px solid #ff4c91;border-radius: 50%;position: absolute;top: -1vh;right: -3.6vh;
}/* 婚礼信息区域的样式 */
.content-address {margin-top: 5vh;color: #ec5f89;font-size: 2.5vh;font-weight: bold;text-align: center;line-height: 4.5vh;
}.content-address view:first-child {font-size: 3vh;padding-bottom: 2vh;
}

至此,“邀请函”页面的结构和样式都已经实现。

照片页面内容

在pages/picture/picture.wxml文件中编写“照片”页面的结构,

该页面采用纵向轮播的方式展示图片,并且在用户无操作时,

可以实现自动无缝衔接滑动,具体代码如下:

<!--pages/pic/pic.wxml-->
<swiper indicator-color="white" indicator-active-color="#ff4c91" indicator-dots autoplay 
interval="3500" duration="1000" vertical circular><swiper-item><image src="/images/1.jpg" /></swiper-item><swiper-item><image src="/images/2.jpg" /></swiper-item><swiper-item><image src="/images/3.jpg" /></swiper-item><swiper-item><image src="/images/4.jpg" /></swiper-item>
</swiper>

照片墙页面样式

在pages/pic/pic.wxss文件中编写“照片墙”页面的样式,使页面更加美观。

具体内容如下:

/* pages/pic/pic.wxss */swiper {height: 100vh;
}image {width: 100vw;height: 100vh;
}

美好时光页面内容

在pages/video/video.wxml文件中编写“美好时光”页面的结构,

具体代码如下:

<!--pages/video/video.wxml-->
<view class="video"><view class="video-title">标题:海边随拍</view><view class="video-time">拍摄日期:2024-08-07</view><video src="http://localhost:80/1.mp4" objectFit="fill"></video>
</view>
<view class="video"><view class="video-title">标题:勿忘初心</view><view class="video-time">拍摄日期:2024-08-07</view><video src="http://localhost:80/2.mp4" objectFit="fill"></video>
</view>
<view class="video"><view class="video-title">标题:热血青春</view><view class="video-time">拍摄日期:2024-08-07</view><video src="http://localhost:80/3.mp4" objectFit="fill"></video>
</view>

视频是访问本地nginx服务器下的视频资源,需要注意的是:项目配置中设置不检验域名。

美好时光页面样式

在pages/video/video.wxss文件中编写“美好时光”页面的样式,使页面更加美观,

具体步骤如下:

/* pages/video/video.wxss */
/* 3个外层view组件的样式 */
.video {box-shadow: 0 8rpx 17rpx 0 rgba(7, 17, 27, 0.1);margin: 10rpx 25rpx;margin-bottom: 30rpx;padding: 20rpx;border-radius: 10rpx;background: #fff;
}/* 标题和拍摄日期区域的样式 */
.video-title {font-size: 35rpx;color: #333;
}.video-time {font-size: 26rpx;color: #979797;
}/* 视频区域的样式 */
.video video {width: 100%;margin-top: 20rpx;
}

宾客信息页面内容

在pages/guest/guest.wxml文件中编写“宾客信息”页面的结构,具体步骤如下:

<!--pages/guest/guest.wxml-->
<image class="bg" src="/images/bg_2.png" />
<form><view class="content"><!-- 姓名 --><view class="input"><input name="name" placeholder-class="phcolor" placeholder="输入您的姓名" /></view><!-- 手机号码 --><view class="input"><input name="phone" placeholder-class="phcolor" placeholder="输入您的手机号码" /></view><!-- 性别 --><view class="radio"><text>请选择您的性别:</text><radio-group><radio value="男">男</radio><radio value="女">女</radio></radio-group></view><!-- 需要的点心 --><view class="check"><text>请选择您需要的点心:</text><checkbox-group><checkbox value="蛋糕">蛋糕</checkbox><checkbox value="甜甜圈">甜甜圈</checkbox><checkbox value="巧克力">巧克力</checkbox></checkbox-group></view><button>提交</button></view>
</form>

宾客信息页面样式

在pages/guest/guest.wxss文件中编写“宾客信息”页面的样式,

使页面更加美观,具体实现步骤如下:

/* pages/guest/guest.wxss 邀请函 */
/* 背景图片 */
.bg {width: 100vw;height: 100vh;
}/* 内容区域中外层容器 */
.content {width: 80vw;position: fixed;left: 10vw;bottom: 8vh;
}/* 姓名和手机号码区域 */
.content .input {font-size: large;border: 1rpx solid #ff4c91;border-radius: 10rpx;padding: 1.5vh 40rpx;margin-bottom: 1.5vh;color: #ff4c91;
}/* 性别区域 */
.content .radio {font-size: large;margin-bottom: 1.5vh;color: #ff4c91;display: flex;
}.radio .radio-group {display: flex;flex-direction: row; /* 水平排列 */
}/* 需要的点心区域 */
.content .check {font-size: large;margin-bottom: 1.5vh;color: #ff4c91;
}.check checkbox-group {margin-top: 1.5vh;color: #ff4c91;display: flex;
}.check checkbox-group checkbox {margin-left: 20rpx;flex:1;
}.check checkbox-group checkbox:nth-child(1) {margin-left: 0;
}/* 提交按钮 */
.content button {font-size: large;background: #ff4c91;color: #fff;width:60vw;
}.content .phcolor {color: #ff4c91;
}

功能截图

总结

使用原生的方式简单的实现了婚礼邀请函小程序的四个页面开发


http://www.ppmy.cn/server/146159.html

相关文章

【Java基础入门篇】前言

Java基础入门篇 本系列内容主要针对Java基础知识&#xff0c;总共包含四大部分内容&#xff1a; 变量、数据类型和运算符控制语句和递归算法面向对象和JVM底层分析数组和排序 学习需要具备&#xff1a; IDEA编译器 JDK1.8版本 写在前面 在Java入门的最开始&#xff0c;我们需…

C++设计模式(工厂模式)

一、介绍 1.动机 在软件系统中&#xff0c;经常面临着创建对象的工作&#xff0c;这些对象有可能是一系列相互依赖的对象&#xff1b;由于需求的变化&#xff0c;需要创建的对象的具体类型经常变化&#xff0c;同时也可能会有更多系列的对象需要被创建。 如何应对这种变化&a…

【k8s深入理解之 Scheme 补充-7】理解无版本资源、有版本资源、元数据信息等联系和区别

代码 注意 无版本资源 —— 也是一种资源&#xff0c;可以理解为公共资源&#xff0c;用于记录或查询&#xff08;如 Status 或 APIGroup 等&#xff09; 由于 k8s 发展原因&#xff0c;一般放置在 核心组v1 版本种&#xff08;Group为空&#xff0c;版本为 v1&#xff09;&am…

maven 工具 clean、compile、package、install、deploy 常用命令使用区别

在 Maven 中&#xff0c;clean, compile, 和 deploy 是常用的生命周期阶段命令&#xff0c;它们各自有不同的用途和含义。下面是这些命令的详细解释&#xff1a; 1. mvn clean 含义&#xff1a; clean 阶段用于清理项目构建过程中生成的文件。 作用&#xff1a; 删除 target …

Could not locate device support files.

报错信息&#xff1a;Failure Reason: The device may be running a version of iOS (13.6.1 17G80) that is not supported by this version of Xcode.[missing string: 869a8e318f07f3e2f42e11d435502286094f76de] 问题&#xff1a;xcode15升级到xcode16之后&#xff0c;13.…

安装SQL Server 2022提示需要Microsoft .NET Framework 4.7.2 或更高版本

安装SQL Server 2022提示需要Microsoft .NET Framework 4.7.2 或更高版本。 原因是&#xff1a;当前操作系统版本为Windows Server 2016 Standard版本&#xff0c;其自带的Microsoft .NET Framework 版本为4.6太低&#xff0c;不满足要求。 根据报错的提示&#xff0c;点击链接…

【jvm】C1编译器

目录 1. 说明2. 作用3. 特点4. 编译流程5. C1编译器与分层编译6. C1编译器的相关参数 1. 说明 1.JVM&#xff08;Java Virtual Machine&#xff09;C1编译器是Java虚拟机中的一个即时编译器&#xff08;Just-In-Time Compiler&#xff0c;JIT&#xff09;&#xff0c;也称为Cl…

Java开发中对List<Map<String, Object>>集合去重并按大小拆分子列表

Java开发中对List< Map< String, Object > >集合去重并按大小拆分子列表 一、使用场景二、实现步骤三、相关知识四、代码示例 一、使用场景 在处理大量List<Map<String, Object>>集合的数据时&#xff0c;为确保数据的唯一性&#xff0c;需要先根据Ma…