微信小程序——婚礼邀请函

目的

1.掌握微信小程序的开发技术，包括页面布局、交互设计、数据存储等。

2.学会运用微信小程序的各种组件和 API，实现个性化的婚礼邀请函功能。

3.通过制作婚礼邀请函小程序，提升创意设计和用户体验优化的能力。

4.了解如何在小程序中整合多媒体资源，如图片、音乐、视频等，以增强邀 请函的吸引力。

5.能够将小程序发布上线，与亲朋好友分享幸福时刻，同时熟悉小程序的发 布流程和审核要求。

流程

确定婚礼邀请函小程序的功能需求，如展示新人照片、婚礼时间地点、RSVP 功能、地图导航等。规划小程序的页面结构和交互流程，确保用户能够方便地浏览和操作。

界面设计：制作精美的页面布局，包括首页、婚礼详情页、RSVP 页面等。可以使用微信小程序提供的组件，如视图容器（view）、图片（image）、文本（text）等，进行页面搭建。

测试与优化：在开发过程中进行多次测试，确保小程序的功能正常、界面美观、交互流畅。检查兼容性问题，确保小程序在不同设备和操作系统上都能正常运行。根据测试结果进行优化，修复漏洞和改进用户体验。

代码架构

对应代码

index.wxml

<view class="player player-{{isPlayingMusic ? 'play' : 'pause'}}" bindtap="play">
  <image src="/images/music_icon.png" />
  <image src="/images/music_play.png" />
</view>
<!-- 背景图片 -->
<image class="bg" src="/images/bg_1.png" />
<!-- 内容区域 -->
<view class="content">
  <!-- 顶部GIF图片 -->
  <image class="content-gif" src="/images/save_the_date.gif" />
  <!-- 标题 -->
  <view class="content-title">邀请函</view>
  <!-- 新郎和新娘的合照 -->
  <view class="content-avatar">
    <image src="/images/avatar.png" />
  </view>
  <!-- 新娘和新郎的名字 -->
  <view class="content-info">
    <view class="content-name" bindtap="callGroom">
      <image src="/images/tel.png" />
      <view>张三石</view>
      <view>新郎</view>
    </view>
    <view class="content-wedding">
      <image src="/images/wedding.png"></image>
    </view>
    <view class="content-name" bindtap="callBride">
      <image src="/images/tel.png" />
      <view>张三石的爱人</view>
      <view>新娘</view>
    </view>
  </view>
  <!-- 婚礼信息 -->
  <view class="content-address">
    <view>我们诚邀您来参加我们的婚礼</view>
    <view>时间：未来的某一天</view>
    <view>地点：花海圆满酒店</view>
  </view>
</view>

index.wxss

/* 音乐播放图标 */

.player {
  position: fixed;
  top: 20rpx;
  right: 20rpx;
  /* 提高堆叠顺序 */
  z-index: 1;
}

.player > image:first-child {
  width: 80rpx;
  height: 80rpx;
  /* 为唱片图标设置旋转动画 */
  animation: musicRotate 3s linear infinite;
}

@keyframes musicRotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.player > image:last-child {
  width: 28rpx;
  height: 80rpx;
  margin-left: -5px;
}

/* 播放状态 class为.player-play */

.player-play > image:first-child {
  animation-play-state: running;
}

.player-play > image:last-child {
  animation: musicStart 0.2s linear forwards;
}

/* 暂停状态 class为.player-pause */

.player-pause > image:first-child {
  animation-play-state: paused;
}

.player-pause > image:last-child {
  animation: musicStop 0.2s linear forwards;
}

@keyframes musicStart {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(20deg);
  }
}

@keyframes musicStop {
  from {
    transform: rotate(20deg);
  }

  to {
    transform: rotate(0deg);
  }
}

/* 背景图 */

.bg {
  width: 100vw;
  height: 100vh;
}

/* 内容区域 */

.content {
  width: 100vw;
  height: 100vh;
  position: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 顶部gif图 */

.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: 55vw;
  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-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: 20rpx;
}

/* 婚礼信息 */

.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;
}

map.wxml

<map latitude="{{latitude}}" longitude="{{longitude}}" markers="{{markers}}" bindmarkertap="markertap" />

map.wxss

map {
  width: 100vw;
  height: 100vh;
}

picture.wxml

<swiper indicator-color="white" indicator-active-color="#ff4c91" indicator-dots autoplay interval="3500" duration="1000" vertical circular>
  <swiper-item wx:for="{{imgUrls}}" wx:key="*this">
    <image src="{{item}}" mode="aspectFill" />
  </swiper-item>
</swiper>

picture.wxss

swiper {
  height: 100vh;
}

image {
  width: 100vw;
  height: 100vh;
}

腾讯视频插件，需要注册企业微信公众号（需要花钱），才可以使用，仅学习使用可忽略

video.wxml

<view class="video-list" wx:for="{{movieList}}" wx:key="user">
  <view class="video-title">标题：{{item.title}}</view>
  <view class="video-time">时间：{{formatData(item.create_time)}}</view>
  <video src="{{item.src}}" objectFit="fill"></video> 
</view>
<view class="video-list">
  <view class="video-title">标题：腾讯视频插件演示</view>
  <view class="video-time">时间：2019-1-1 10:11:12</view>
  <txv-video vid="y0371c5p9cc" playerid="txv1"></txv-video>
</view>
<wxs module="formatData">
  module.exports = function(timestamp) {
    var date = getDate(timestamp)
    var y = date.getFullYear()
    var m = date.getMonth() + 1
    var d = date.getDate()
    var h = date.getHours()
    var i = date.getMinutes()
    var s = date.getSeconds()
    return y + '-' + m + '-' + d + ' ' + h + ':' + i + ':' + s
  }
</wxs>

vide.wxss

.video-list {
  box-shadow: 0 8rpx 17rpx 0 rgba(7, 17, 27, 0.1);
  margin: 10rpx 25rpx;
  padding: 20rpx;
  border-radius: 10rpx;
  margin-bottom: 30rpx;
  background: #fff;
}

.video-title {
  font-size: 35rpx;
  color: #333;
}

.video-time {
  font-size: 13px;
  color: #979797;
}

.video-list video {
  width: 100%;
  margin-top: 20rpx;
}

配置文件

project.config.json

{
  "description": "项目配置文件",
  "packOptions": {
    "ignore": [],
    "include": []
  },
  "setting": {
    "urlCheck": false,
    "es6": true,
    "enhance": false,
    "postcss": true,
    "preloadBackgroundData": false,
    "minified": true,
    "newFeature": true,
    "coverView": true,
    "nodeModules": false,
    "autoAudits": false,
    "showShadowRootInWxmlPanel": true,
    "scopeDataCheck": false,
    "uglifyFileName": false,
    "checkInvalidKey": true,
    "checkSiteMap": true,
    "uploadWithSourceMap": true,
    "compileHotReLoad": false,
    "useMultiFrameRuntime": true,
    "useApiHook": true,
    "useApiHostProcess": true,
    "babelSetting": {
      "ignore": [],
      "disablePlugins": [],
      "outputPath": ""
    },
    "enableEngineNative": false,
    "bundle": false,
    "useIsolateContext": true,
    "useCompilerModule": true,
    "userConfirmedUseCompilerModuleSwitch": false,
    "userConfirmedBundleSwitch": false,
    "packNpmManually": false,
    "packNpmRelationList": [],
    "minifyWXSS": true
  },
  "compileType": "miniprogram",
  "libVersion": "2.14.1",
  "appid": "wx0298165ccea56bb4",
  "projectname": "invitation",
  "condition": {},
  "editorSetting": {
    "tabIndent": "insertSpaces",
    "tabSize": 2
  }
}

效果截图

 

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/885400.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

JAVA并发编程系列(11)线程池底层原理架构剖析

JAVA并发编程系列(11)线程池底层原理架构剖析

面试官&#xff1a;说说JAVA线程池的几个核心参数&#xff1f; 之前我们用了10篇文章详细剖析了synchronized、volatile、CAS、AQS、ReentrantLock、Semaphore、CountDownLatch、CyclicBarrier、并发锁、Condition等各个核心基础原理&#xff0c;今天开始我们说说并发领域的各种…
阅读更多...
信息安全数学基础（24）模为奇数的平方剩余与平方非剩余

信息安全数学基础（24）模为奇数的平方剩余与平方非剩余

前言 在信息安全数学基础中&#xff0c;模为奇数的平方剩余与平方非剩余是数论中的一个重要概念&#xff0c;特别是在密码学和安全协议中扮演着关键角色。当模数为奇数时&#xff0c;我们通常关注的是模为奇素数的平方剩余与平方非剩余&#xff0c;因为奇合数的情况更为复杂且…
阅读更多...
自己做个国庆75周年头像生成器

自己做个国庆75周年头像生成器

版权声明&#xff1a;本文为博主原创文章&#xff0c;转载请在显著位置标明本文出处以及作者网名&#xff0c;未经作者允许不得用于商业目的。 下载相关代码&#xff1a;【免费】《自己做个国庆75周年头像生成器》代码资源-CSDN文库 又是一年国庆节&#xff0c;今年使用国旗做…
阅读更多...
智慧城市交通管理中的云端多车调度与控制

智慧城市交通管理中的云端多车调度与控制

城市交通管理中的云端多车调度与控制 智慧城市是 21世纪的城市基本发展方向&#xff0c;为了实现智慧城市建设的目标&#xff0c;人们需要用现代化的手段去管理和控制城市中的各种资源和设施。智能交通控制与管理是智慧城市中不可缺少的一部分&#xff0c;因为现代城市交通系统…
阅读更多...
【2024工业3D异常检测文献】CMDIAD: 基于跨模态蒸馏驱动的多模态工业异常检测

【2024工业3D异常检测文献】CMDIAD: 基于跨模态蒸馏驱动的多模态工业异常检测

Incomplete Multimodal Industrial Anomaly Detection via Cross-Modal Distillation 1、Background 近年来&#xff0c;基于3D点云和RGB图像的多模态工业异常检测(IAD)研究强调了利用模态间的冗余性和互补性对于精确分类和分割的重要性。 在项目中&#xff0c;提出了CMDIAD方…
阅读更多...
亲身体验Llama 3.1：开源模型的部署与应用之旅

亲身体验Llama 3.1：开源模型的部署与应用之旅

文章目录 1 Llama 3.1系列的诞生2 大型模型的未来发展3 使用教程4 Llama 3.1在客户服务中的运用 1 Llama 3.1系列的诞生 在人工智能的浪潮中&#xff0c;大型语言模型&#xff08;LLM&#xff09;正以其独特的魅力和潜力&#xff0c;成为深度学习领域的一颗耀眼明星。 这些模…
阅读更多...
大模型增量训练--基于transformer制作一个大模型聊天机器人

大模型增量训练--基于transformer制作一个大模型聊天机器人

针对夸夸闲聊数据集&#xff0c;利用UniLM模型进行模型训练及测试&#xff0c;更深入地了解预训练语言模型的使用方法&#xff0c;完成一个生成式闲聊机器人任务。 项目主要结构如下&#xff1a; data 存放数据的文件夹 dirty_word.txt 敏感词数据douban_kuakua_qa.txt 原始语…
阅读更多...
【算法篇】二叉树类（2）（笔记）

【算法篇】二叉树类（2）（笔记）

目录 一、Leetcode 题目 1. 左叶子之和 &#xff08;1&#xff09;迭代法 &#xff08;2&#xff09;递归法 2. 找树左下角的值 &#xff08;1&#xff09;广度优先算法 &#xff08;2&#xff09;递归法 3. 路径总和 &#xff08;1&#xff09;递归法 &#xff08;2…
阅读更多...
JavaScript类型转换和相等性详解

JavaScript类型转换和相等性详解

类型转换 10"objects" //10objects,数字10转换为字符串 "7"*"4" //28&#xff0c;两个字符串均转为数字,只要不是加&#xff0c;其他都按两个数字算 var n 1-"x"// NaN&#xff0c;字符串x无法转化为数字 n"objects"//…
阅读更多...
大模型训练：K8s 环境中数千节点存储最佳实践

大模型训练：K8s 环境中数千节点存储最佳实践

今天这篇博客来自全栈工程师朱唯唯&#xff0c;她在前不久举办的 KubeCon 中国大会上进行了该主题分享。 Kubernetes 已经成为事实的应用编排标准&#xff0c;越来越多的应用在不断的向云原生靠拢。与此同时&#xff0c;人工智能技术的迅速发展&#xff0c;尤其是大型语言模型&…
阅读更多...
通信工程学习：什么是CSMA/CD载波监听多路访问/冲突检测

通信工程学习：什么是CSMA/CD载波监听多路访问/冲突检测

CSMA/CD&#xff1a;载波监听多路访问/冲突检测 CSMA/CD&#xff08;Carrier Sense Multiple Access/Collision Detect&#xff09;&#xff0c;即载波监听多路访问/冲突检测&#xff0c;是一种用于数据通信的介质访问控制协议&#xff0c;广泛应用于局域网&#xff08;特别是以…
阅读更多...
rpm方式安装jdk1.8

rpm方式安装jdk1.8

1、查询系统中是否已经安装jdk rpm -qa |grep java 或 rpm -qa |grep jdk 2、卸载已有的openjdk rpm -e --nodeps java-1.7.0-openjdk rpm -e --nodeps java-1.7.0-openjdk-headless rpm -e --nodeps java-1.8.0-openjdk rpm -e --nodeps java-1.8.0-openjdk-headless3、安装j…
阅读更多...
考拉悠然携手中国系统打造城市智能中枢，让城市更聪明更智慧

考拉悠然携手中国系统打造城市智能中枢，让城市更聪明更智慧

在21世纪的科技浪潮中&#xff0c;智慧城市建设已成为推动城市现代化进程的重要引擎。随着人工智能技术的飞速发展&#xff0c;AI正以前所未有的速度融入智慧城市管理的每一个角落&#xff0c;从交通出行到公共安全&#xff0c;从环境保护到城市管理&#xff0c;无一不彰显着智…
阅读更多...
2.1 HuggingFists系统架构(二)

2.1 HuggingFists系统架构(二)

部署架构 上图为HuggingFists的部署架构。从架构图可知&#xff0c;HuggingFists主要分为服务器(Server)、计算节点(Node)以及数据库(Storage)三部分。这三部分可以分别部署在不同的机器上&#xff0c;以满足系统的性能需求。为部署方便&#xff0c;HuggingFists社区版将这三部…
阅读更多...
生产环境升级mysql流程及配置主从服务

生产环境升级mysql流程及配置主从服务

之前写到过mysql升级8.4的文章, 因此不再介绍mysql的安装过程 避免服务器安装多个mysql引起冲突的安装方法_安装两个mysql会冲突吗-CSDN博客 生产环境升级mysql8.4.x流程 安装mysql 参考之前文章: 避免服务器安装多个mysql引起冲突的安装方法_安装两个mysql会冲突吗-CSDN博客…
阅读更多...
尚硅谷MyBatis笔记

尚硅谷MyBatis笔记

Mybatis简介 MyBatis历史 MyBatis最初是Apache的一个开源项目iBatis, 2010年6月这个项目由Apache Software Foundation迁移到了Google Code。随着开发团队转投Google Code旗下&#xff0c;iBatis3.x正式更名为MyBatis。代码于2013年11月迁移到GithubiBatis一词来源于“intern…
阅读更多...
yolov8/9/10模型在仪表盘、指针表检测中的应用【代码+数据集+python环境+训练/应用GUI系统】

yolov8/9/10模型在仪表盘、指针表检测中的应用【代码+数据集+python环境+训练/应用GUI系统】

可视化训练系统 可视化应用系统 yolov8/9/10模型在仪表盘、指针表检测中的应用【代码数据集python环境训练/应用GUI系统】 背景意义 随着科学技术的快速发展&#xff0c;机器视觉以及人工智能等技术逐渐从理论走向实践&#xff0c;并在各个领域得到广泛应用。机器视觉检测系统…
阅读更多...
使用powershell的脚本报错:因为在此系统中禁止执行脚本

使用powershell的脚本报错:因为在此系统中禁止执行脚本

1.添加powershell功能环境&#xff1a; 2.启动powershell的执行策略 因为在此系统中禁止执行脚本。 set-executionpolicy unrestricted
阅读更多...
若依生成主子表

若依生成主子表

一、准备工作 确保你已经部署了若依框架&#xff0c;并且熟悉基本的开发环境配置。同时&#xff0c;理解数据库表结构对于生成代码至关重要。 主子表代码结构如下&#xff08;字表中要有一个对应主表ID的字段作为外键&#xff0c;如下图的customer_id&#xff09; -- ------…
阅读更多...
springboot 集成 camunda

springboot 集成 camunda

项目地址&#xff1a; stormlong/springboot-camundahttps://gitee.com/stormlong/springboot-camunda 官网集成引导 进入官网 https://camunda.com/ 选择 camunda7 滑倒页面底部 进入 getStart 页面 https://start.camunda.com/ 点击 GENERATE 下载导入 idea 即可 流程设计…
阅读更多...
最新文章

Copyright @ 2022~2023