微信小程序-婚礼邀请函

2024-02-05 14:10
文章标签 程序 微信 婚礼 邀请函

本文主要是介绍微信小程序-婚礼邀请函，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文章目录

  • 婚礼邀请函
    • （一）准备工作
      • 1、创建页面
      • 2、设置导航栏
      • 3、查看预览效果
      • 4、准备图片素材
      • 5、准备服务器端资源
      • 6、启动服务器
      • 7、配置四个页面
    • （二）项目初始化
      • 1、配置标签栏
      • 2、配置导航栏
      • 3、编写公共样式
    • （三）实现“邀请函”页面的结构
      • 1、设置背景图片
      • 2、编写内容区域的结构
      • 3、实现“邀请函”页面的样式
      • 1、编写背景图片的样式
      • 2、编写内容区域中外部容器样式
      • 3、编写顶部图片样式区域
      • 4、编写标题区域样式
      • 5、编写合照区域样式
      • 6、编写新郎与新娘区域
      • 7、编写婚礼信息区域样式
    • （五）实现“照片”页面的结构
    • （六）实现“照片”页面的样式
    • （七）实现“美好时光”页面的结构
    • （八）实现“美好时光”页面的样式
    • （九）实现“宾客信息”页面的结构
      • 1、实现“宾客信息”也页面的背景图片
      • 2、编写内容区域的整体页面结构
      • 3、实现姓名区域的结构
      • 4、实现手机号码区域的结构
      • 5、实现性别区域的结构
      • 6、实现需要的点心区域的结构
    • （十）实现“宾客信息”页面的结构
      • 1、编写背景图片的样式
      • 2、编写内容区域外层容器的样式
      • 4、编写手机号码区域样式
      • 5、编写性别区域的样式
      • 6、编写需要的点心区域的样式
      • 7、编写提交按钮样式

婚礼邀请函

（一）准备工作

1、创建页面

在这里插入图片描述

2、设置导航栏

在这里插入图片描述

3、查看预览效果

在这里插入图片描述

4、准备图片素材

在这里插入图片描述

5、准备服务器端资源

在这里插入图片描述

  • 将视屏资源放在htdocs目录
    在这里插入图片描述
  • 本地HTTP服务器程序 - index.js
    在这里插入图片描述
var express = require('express');// 导入Express框架var app = express(); // 创建Express框架的实例app.use(express.static('./htdocs'));// 设置静态资源目录app.listen(8088, res => {// web应用监听8088端口console.log('服务器启动成功，访问地址：http://localhost:8088/文件名');
});

6、启动服务器

  • 在命令行窗口执行命令：node index.js
    在这里插入图片描述
  • 在浏览器里访问视屏资源 - http://localhost:8088/01.mp4
    在这里插入图片描述

7、配置四个页面

  • 在app.josn文件里配置四个页面
    在这里插入图片描述

（二）项目初始化

1、配置标签栏

  • 编写标签栏样式的相关配置
    在这里插入图片描述
  • 在list数组里配置标签按钮

2、配置导航栏

  • 配置邀请函页面的导航栏
    在这里插入图片描述

  • 查看预览效果
    在这里插入图片描述

  • 配置照片页面的导航栏
    在这里插入图片描述

  • 查看预览效果
    在这里插入图片描述

  • 配置美好时光页面的导航栏
    在这里插入图片描述

  • 查看预览效果
    在这里插入图片描述

  • 编写宾客信息页面的导航栏
    在这里插入图片描述

  • 查看预览效果
    在这里插入图片描述

  • 改变导航栏颜色
    在这里插入图片描述

  • 查看"邀请函"压面的导航栏
    在这里插入图片描述

3、编写公共样式

  • 在app.wxss文件里定义公共样式
    在这里插入图片描述

（三）实现“邀请函”页面的结构

1、设置背景图片

  • 在index.wxss文件里添加图像组件
    在这里插入图片描述
  • 查看预览效果
    在这里插入图片描述
  • 此时，背景图片没用充满“邀请函”页面，需要在样式文件里进行设置

2、编写内容区域的结构

  • 白喊顶部图片、标题、合照、新郎和新娘的姓名、婚礼信息
    在这里插入图片描述
  • 查看预览效果，显得凌乱
    在这里插入图片描述

3、实现“邀请函”页面的样式

1、编写背景图片的样式

  • 让背景图片不满整个页面
    在这里插入图片描述
  • 查看预览效果
    在这里插入图片描述

2、编写内容区域中外部容器样式

  • 外部容器不满整个页面，采用固定定位，设置为纵向的Flex布局（纵向是主轴。横向是交叉轴），容器里的项目水平居中（交叉轴对齐方式 - align-items）
    在这里插入图片描述
/* 内容区域的外部容器样式 */
.content{width: 100vw;height: 100vh;position: fixed;display: flex;flex-direction: column;align-items: center;
}

3、编写顶部图片样式区域

  • 设置图片区域的宽度和高度以及下边距
    在这里插入图片描述
/* 顶部图片样式区域 */
.content-gif{width: 19vh;height: 18.6vh;margin-bottom: 1.5vh;
}

4、编写标题区域样式

  • 设置标题字号、颜色、对齐方式与下边距
    在这里插入图片描述
/* 标题区域样式 */
.content-title{font-size: 5vh;color: #ff4c91;text-align: center;margin-bottom: 2.5vh;
}
  • 查看预览效果
    在这里插入图片描述

5、编写合照区域样式

  • 设置宽度、高度、边框
    在这里插入图片描述
/* 合照区域样式 */
.content-avatar image{width: 24vh;height: 24vh;border: 3px solid #ff4c91;border-radius: 50%;
}
  • 查看预览效果
    在这里插入图片描述

6、编写新郎与新娘区域

  • 设置新郎与新娘区域样式、新郎和新娘姓名样式、新郎和新娘电话图片样式、新郎和新娘中间的双喜图片样式
    在这里插入图片描述
/* 新郎与新娘区域样式 */
.content-info{width: 45vw;text-align: center;margin-top: 4vh;display: flex;flex-direction: row;align-items: center;
}
/* 新郎和新娘姓名样式 */
.content-name{color: #ff4c91;font-size: 2.7vh;line-height: 4.5vh;font-weight: bold;position: relative;
}
/* 新郎和新娘电话图片样式 */
.content-name > image{width: 2.6vh;height: 2.6vh;border: 1px solid #ff4c91;border-radius: 50%;position: absolute;top: -1vh;right: -3.6vh;
}
/* 新郎和新娘中间的双喜图片样式 */
.content-wedding{flex: 1;
}
.content-wedding > image{width: 5.5vh;height: 5.5vh;margin-left: 1.1vh;
}
  • 查看预览效果
    在这里插入图片描述

7、编写婚礼信息区域样式

  • 设置字号、颜色、对齐方式、行高等
    在这里插入图片描述
  • 查看预览效果“邀请函”页面彻底完成
    在这里插入图片描述

（五）实现“照片”页面的结构

在这里插入图片描述

<!--pages/photo/photo.wxml-->
<!-- 照片轮播图 -->
<swiper indicator-color="white" indicator-active-color="#ff4c91" 
indicator-dots="true" autoplay="true" interval="3000" duration="1000"
vertical="true" circular="true"><swiper-item><image src="/images/timg1.jpg" /></swiper-item><swiper-item><image src="/images/timg2.jpg" /></swiper-item><swiper-item><image src="/images/timg3.jpg" /></swiper-item><swiper-item><image src="/images/timg4.jpg" /></swiper-item>
</swiper>
  • 查看预览样式
    在这里插入图片描述

（六）实现“照片”页面的样式

  • 设置轮播图片的高度宽度
    在这里插入图片描述
/* pages/photo/photo.wxss */
/* 设置轮播组件的高度 */
swiper{height: 100vh;
}
/* 设置轮播图片的尺寸 */
image{width: 100vw;height: 100vh;
}
  • 查看预览样式
    在这里插入图片描述

（七）实现“美好时光”页面的结构

  • 在time.wxml文件里编写“美好时光”页面
    在这里插入图片描述
<!--pages/time/time.wxml-->
<!-- 美好时光 - 视频 -->
<view class="video"><view class="video-title">标题：海边随拍</view><view class="video-time">拍摄日期：2023-08-15</view><video src="http://localhost:8088/01.mp4" object-fit="fill" />
</view>
<view class="video"><view class="video-title">标题：勿忘初心</view><view class="video-time">拍摄日期：2023-08-30</view><video src="http://localhost:8088/02.mp4" object-fit="fill" />
</view>
<view class="video"><view class="video-title">标题：十年之约</view><view class="video-time">拍摄日期：2023-10-15</view><video src="http://localhost:8088/03.mp4" object-fit="fill" />
</view>

  • 查看预览效果
    在这里插入图片描述

  • 启动后台Node服务，才能访问视屏资源
    在这里插入图片描述

（八）实现“美好时光”页面的样式

  • 在time.wxss里实现“美好时光”页面样式
    在这里插入图片描述
/* pages/time/time.wxss */
/* 外层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: #eee;
}
/* 标题区域样式 */
.video-title{font-size: 35rpx;color: #555;
}
/* 拍摄日期样式区域 */
.video-time{font-size: 26rpx;color: #888;
}
/* 视频区域样式 */
.video video{width: 100%;margin-top: 20rpx;
}
  • 查看预览效果
    在这里插入图片描述

（九）实现“宾客信息”页面的结构

1、实现“宾客信息”也页面的背景图片

  • 在huest.wxml里添加图像组件，设置背景图片
    在这里插入图片描述

  • 查看预览效果
    在这里插入图片描述

2、编写内容区域的整体页面结构

  • 添加一个表单，在表单里添加所需组件
    在这里插入图片描述

3、实现姓名区域的结构

  • 在相应添加一个input组件
    在这里插入图片描述

4、实现手机号码区域的结构

  • 在相应添加一个input组件
    在这里插入图片描述

5、实现性别区域的结构

  • 在相应位置添加一个文本组件，一个单选按钮组个两个单选按钮
    在这里插入图片描述

6、实现需要的点心区域的结构

  • 在相应位置添加一个文本组件，一个多选按钮组合两个多选按钮
    在这里插入图片描述
    查看宾客信息的代码
<!--pages/guest/quest.wxml-->
<!-- 背景图片 -->
<image class="bg" src="/images/bg_2.png" />
<!-- 内容区域 -->
<form ><view class="content"><!-- 姓名 --><view class="name"><input name="name" placeholder-class="phcolor" placeholder="请输入您的姓名" type="text"/>  </view><!-- 手机号码 --><view class="telephone"><input  name="telephone" placeholder-class="phcolor" placeholder="请输入您的手机号码" type="number"/></view><!-- 性别 --><view class="gender"><text>请选择您的性别：</text><radio-group><radio>男</radio><radio>女</radio></radio-group></view><!-- 需要的点心 --><view class="dessert"><text>请选择您需要的点心：</text><checkbox-group><checkbox>蛋糕</checkbox><checkbox>甜甜圈</checkbox><checkbox>巧克力</checkbox></checkbox-group></view><!-- 提交按钮 --><button>提交</button></view>
</form>
  • 查看预览效果
    在这里插入图片描述

（十）实现“宾客信息”页面的结构

1、编写背景图片的样式

  • 在guest.wxss文件里定义.bg样式类
    在这里插入图片描述
  • 查看预览效果
    在这里插入图片描述
  • 表单内容在背景图片下面去了，要向上滑动才能看见

2、编写内容区域外层容器的样式

  • 在guest.wxss文件里定义content样式类
    在这里插入图片描述
  • 查看预览效果
    在这里插入图片描述
  • 在guest.wxss文件里定义.content .name样式类
    在这里插入图片描述
  • 查看预览效果
    在这里插入图片描述

4、编写手机号码区域样式

  • 在guest.wxss文件里定义.content .telephone样式类
    在这里插入图片描述
  • 查看预览效果
    在这里插入图片描述

5、编写性别区域的样式

  • 在guest.wxss文件里定义.content .gender样式类
    在这里插入图片描述
  • 查看预览效果
    在这里插入图片描述

6、编写需要的点心区域的样式

  • 在guest.wxss文件里定义.content .dessert样式类
    在这里插入图片描述

  • 查看预览效果
    在这里插入图片描述

7、编写提交按钮样式

  • 在guest.wxss文件里定义.content button样式类
    在这里插入图片描述
  • 查看预览效果
    在这里插入图片描述
  • 录屏操作演示
    在这里插入图片描述

这篇关于微信小程序-婚礼邀请函的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/681165。

相关文章

W外链微信推广短连接怎么做？

W外链微信推广短连接怎么做？

制作微信推广链接的难点分析 一、内容创作难度 制作微信推广链接时，首先需要创作有吸引力的内容。这不仅要求内容本身有趣、有价值，还要能够激起人们的分享欲望。对于许多企业和个人来说，尤其是那些缺乏创意和写作能力的人来说，这是制作微信推广链接的一大难点。 二、精准定位难度 微信用户群体庞大，不同用户的需求和兴趣各异。因此，制作推广链接时需要精准定位目标受众，以便更有效地吸引他们点击并分享链接
阅读更多...
JAVA智听未来一站式有声阅读平台听书系统小程序源码

JAVA智听未来一站式有声阅读平台听书系统小程序源码

智听未来，一站式有声阅读平台听书系统 🌟&nbsp;开篇：遇见未来，从“智听”开始 在这个快节奏的时代，你是否渴望在忙碌的间隙，找到一片属于自己的宁静角落？是否梦想着能随时随地，沉浸在知识的海洋，或是故事的奇幻世界里？今天，就让我带你一起探索“智听未来”——这一站式有声阅读平台听书系统，它正悄悄改变着我们的阅读方式，让未来触手可及！ 📚&nbsp;第一站：海量资源，应有尽有 走进“智听
阅读更多...
EMLOG程序单页友链和标签增加美化

EMLOG程序单页友链和标签增加美化

单页友联效果图： 标签页面效果图： 源码介绍 EMLOG单页友情链接和TAG标签，友链单页文件代码main{width: 58%;是设置宽度 自己把设置成与您的网站宽度一样，如果自适应就填写100%，TAG文件不用修改 安装方法：把Links.php和tag.php上传到网站根目录即可，访问 域名/Links.php、域名/tag.php 所有模板适用，代码就不粘贴出来，已经打
阅读更多...
跨系统环境下LabVIEW程序稳定运行

跨系统环境下LabVIEW程序稳定运行

在LabVIEW开发中，不同电脑的配置和操作系统（如Win11与Win7）可能对程序的稳定运行产生影响。为了确保程序在不同平台上都能正常且稳定运行，需要从兼容性、驱动、以及性能优化等多个方面入手。本文将详细介绍如何在不同系统环境下，使LabVIEW开发的程序保持稳定运行的有效策略。 LabVIEW版本兼容性 LabVIEW各版本对不同操作系统的支持存在差异。因此，在开发程序时，尽量使用
阅读更多...
CSP 2023 提高级第一轮 CSP-S 2023初试题 完善程序第二题解析 未完

CSP 2023 提高级第一轮 CSP-S 2023初试题 完善程序第二题解析 未完

一、题目阅读 （最大值之和）给定整数序列 a0,⋯,an−1，求该序列所有非空连续子序列的最大值之和。上述参数满足 1≤n≤105 和 1≤ai≤108。 一个序列的非空连续子序列可以用两个下标 ll 和 rr（其中0≤l≤r<n0≤l≤r<n）表示，对应的序列为 al,al+1,⋯,ar​。两个非空连续子序列不同，当且仅当下标不同。 例如，当原序列为 [1,2,1,2] 时，要计算子序列 [
阅读更多...
这些心智程序你安装了吗？

这些心智程序你安装了吗？

原文题目：《为什么聪明人也会做蠢事（四）》 心智程序 大脑有两个特征导致人类不够理性，一个是处理信息方面的缺陷，一个是心智程序出了问题。前者可以称为“认知吝啬鬼”，前几篇文章已经讨论了。本期主要讲心智程序这个方面。 心智程序这一概念由哈佛大学认知科学家大卫•帕金斯提出，指个体可以从记忆中提取出的规则、知识、程序和策略，以辅助我们决策判断和解决问题。如果把人脑比喻成计算机，那心智程序就是人脑的
阅读更多...
uniapp设置微信小程序的交互反馈

uniapp设置微信小程序的交互反馈

链接：uni.showToast(OBJECT) | uni-app官网 (dcloud.net.cn) 设置操作成功的弹窗： title是我们弹窗提示的文字 showToast是我们在加载的时候进入就会弹出的提示。 2.设置失败的提示窗口和标签 icon：'error'是设置我们失败的logo 设置的文字上限是7个文字，如果需要设置的提示文字过长就需要设置icon并给
阅读更多...
基于SpringBoot的宠物服务系统+uniapp小程序+LW参考示例

基于SpringBoot的宠物服务系统+uniapp小程序+LW参考示例

系列文章目录 1.基于SSM的洗衣房管理系统+原生微信小程序+LW参考示例 2.基于SpringBoot的宠物摄影网站管理系统+LW参考示例 3.基于SpringBoot+Vue的企业人事管理系统+LW参考示例 4.基于SSM的高校实验室管理系统+LW参考示例 5.基于SpringBoot的二手数码回收系统+原生微信小程序+LW参考示例 6.基于SSM的民宿预订管理系统+LW参考示例 7.基于
阅读更多...
Spring Roo 实站（ 一 ）部署安装 第一个示例程序

Spring Roo 实站（ 一 ）部署安装 第一个示例程序

转自：http://blog.csdn.net/jun55xiu/article/details/9380213 一：安装 注：可以参与官网spring-roo： static.springsource.org/spring-roo/reference/html/intro.html#intro-exploring-sampleROO_OPTS http://stati
阅读更多...
未来工作趋势：零工小程序在共享经济中的作用

未来工作趋势：零工小程序在共享经济中的作用

经济在不断发展的同时，科技也在飞速发展。零工经济作为一种新兴的工作模式，正在全球范围内迅速崛起。特别是在中国，随着数字经济的蓬勃发展和共享经济模式的深入推广，零工小程序在促进就业、提升资源利用效率方面显示出了巨大的潜力和价值。 一、零工经济的定义及现状 零工经济是指通过临时性、自由职业或项目制的工作形式，利用互联网平台快速匹配供需双方的新型经济模式。这种模式打破了传统全职工作的界限，为劳动
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2