【微信小程序开发(从零到一)【婚礼邀请函】制作】——任务分析和效果实现的前期准备(1)

在这里插入图片描述


👨‍💻个人主页:@开发者-曼亿点

👨‍💻 hallo 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅!

👨‍💻 本文由 曼亿点 原创

👨‍💻 收录于专栏:微信小程序开发

🅰


微信小程序开发【婚礼邀请函】——运行视频

项目所需的图片链接:https://pan.baidu.com/s/1gk3h8RFsNENzBzB4p5kw-g
提取码:8aon


文章目录

    • 🅰
    • 前言
    • 🎶 任务实现分析
      • (1)页面结构
      • (2)目录结构
      • (3)项目初始化
        • 结束语🥇


前言

  本项目是一个婚礼邀请函小程序,通过小程序向亲朋好友发送婚礼到场的邀请,相当于传统方式的请帖,他给人带来了不一样便捷的体验感,也更容易受到广大年群体的喜爱,通过电子版的邀请函,邀请来宾见证一对新人的幸福时刻。
本项目分为5个页面组成,分别是邀请函、图片、美好时光、婚礼地点、宾客情况。如下图所示:

1.邀请函页面
在这里插入图片描述

2.图片页面
在这里插入图片描述

3.美好时光页面
在这里插入图片描述

4.婚礼地点页面
在这里插入图片描述

5.宾客信息页面
在这里插入图片描述
下面对这5个页面的功能进行简要的介绍。
邀请函页面:新娘和新郎的名字、电话、婚礼地点、婚礼时间。
图片页面:新娘和新郎的幸福照。
美好时光页面:采用视频的方式记录一对新人的相爱历程。
婚礼地点页面:通过导航查看婚礼地点的路线。
宾客信息页面:通过婚礼的嘉宾填写个人信息,送一些祝福等。


🎶 任务实现分析


(1)页面结构

 从上图看出,页面底部都有标签栏,通过点击不同的标签按钮却换到对应的页面。
邀请函页面中:右上角有一个音乐播放按钮,中间是新娘和新郎的合照,合照下面是新娘和新郎的名字,点击旁边的电话图片呼叫。底部是婚礼时间和地点信息。
图片页面中:通过纵向轮播图展示了新人婚纱照片。
美好时光页面中:提供了视频在线播放功能。
婚礼地点页面中:提供了在线地图,点击导航图标可以定位婚礼酒店位置。
宾客信息页面中:提供了一个表单,用于填写宾客信息。

(2)目录结构

路径说明
app.js应用程序的逻辑文件
app.json应用程序的配置文件
app.wxss定义公共样式
pages/index邀请函页面保存目录
pages/picture图片页面保存目录
pages/video美好时光页面保存目录
pages/map婚礼地点页面保存目录
pages/guesr宾客信息页面保存目录
images图片文件

(3)项目初始化

  在微信开发者工具中创建一个空白项目。创建成功后,新建app.json文件,在该文件中定义本案列中的页面和导航栏样式,具体代码如下:

// A code block
var foo = 'bar';

  上述代码中,tabBar对象用于配置页面底部的标签,list是一个数组,数组的每个元素是一个标签按钮对象,通过该对象的属可以配置标签栏中的每个标签按钮。
在每个标签打开时,导航栏也需要随之发送改变。下面在每个页面的.json文件中配置页面标题,以pages/index/index.json文件为例,代码如下:

{
  "pages": [
    "pages/index/index",
    "pages/guest/guest",
    "pages/map/map",
    "pages/vido/vido",
    "pages/pictrue/pictrue",
    "pages/logs/logs"
  ],
  "tabBar": {
    "color": "#ccc",
    "selectedColor": "#ff4c91",
    "borderStyle":"white",
    "backgroundColor": "#fff",
    "list": [{
      "pagePath": "pages/index/index",
      "iconPath": "images/images/invite.png",
      "selectedIconPath": "images/images/invite.png",
      "text": "邀请函"
    },
  {
    "pagePath": "pages/pictrue/pictrue",
    "iconPath": "images/images/marry.png",
    "selectedIconPath": "images/images/marry.png",
    "text": "照片"
  },
  {
    "pagePath": "pages/vido/vido",
    "iconPath": "images/images/video.png",
    "selectedIconPath": "images/images/video.png",
    "text": "美好时光"
  },
  {
    "pagePath": "pages/map/map",
    "iconPath": "images/images/map.png",
    "selectedIconPath": "images/images/map.png",
    "text": "订婚地点"
  },
  {
    "pagePath": "pages/guest/guest",
    "iconPath": "images/images/guest.png",
    "selectedIconPath": "images/images/guest.png",
    "text": "宾客信息"
  }
  ]
  },
  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "邀请函",
    "navigationBarBackgroundColor": "#ff4c91",
    "enablePullDownRefresh": false
  },
  }

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

{
  "usingComponents": {
  },
  "navigationBarTitleText": "邀请函"
}

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

page{
font-family: Arial, Helvetica, sans-serif;
display: flex;
flex-direction: column;
justify-content: space-between;
box-sizing: border-box;
}
结束语🥇

以上就是微信小程序之列表渲染
持续更新微信小程序教程,欢迎大家订阅系列专栏🔥微信小程序
你们的支持就是曼亿点创作的动力💖💖💖
请添加图片描述

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

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

相关文章

【069】基于SpringBoot+Vue实现的企业资产管理系统

系统介绍 基于SpringBootVue实现的企业资产管理系统管理员功能有个人中心,用户管理,资产分类管理,资产信息管理,资产借出管理,资产归还管理,资产维修管理。用户可以对资产进行借出和归还操作。因而具有一定…

详解lighthouse通过命令行方式运行并生成html测试报告的方法

lighthouse可以通过命令行的方式运行并生成html报告,我们可以通过lighthouse --help 命令查看命令行的详细用法,在这里我仅列出最常用的命令行使用方法! 常用lighthouse命令行参数详解 * --chrome-flags:传递自定义标志给Chrome…

动态el-form表单以及动态禁用

当右侧下拉框选中为 长期有效,那么左侧输入框为禁用状态; <el-form-item label"证明有效期" class"is-required"><div v-for"(item,index) in form.arrayDat" :key"index" style"width: 100%;display: flex;justify-co…

记录一期Typecho WebShell木马渗透的经历

我创建了一个Typecho的轻量博客,之前一直是本地运行,最近才上了公网,平时自己也是粗心大意,把密码也写在第一篇博文里面 有一天,我突发奇想的想要提交更新,本博客是通过git进行代码版本管理的避免自己修改官方源码出现了问题,无法还原,也定时备份SQL, 然后莫名其妙的发现多了…

html--地图

<!DOCTYPE html> <html lang"en"> <head><meta charset"utf-8"><title>ECharts</title><!--Step:1 引入一个模块加载器&#xff0c;如esl.js或者require.js--><script src"js/esl.js"></scr…

【Doris的安装与部署】

1 集群规划和环境准备 Doris作为一款MPP架构的OLAP数据库&#xff0c;可以在绝大多数主流的商用服务器上运行。 1.1 环境要求 一般推荐使用Linux系统&#xff0c;版本要求是CentOS 7.1及以上或者Ubuntu 16.04及以上&#xff0c;这也是目前服务器市场最主流的操作系统。 操作…

3月份太阳镜行业线上市场销售数据分析

在消费者行为方面&#xff0c;太阳镜不仅仅是视力保护工具&#xff0c;更逐渐成为一种时尚单品。随着人们对健康和美容重视程度的提高&#xff0c;太阳镜作为体现个人风格的单品&#xff0c;其市场需求得到了进一步的推动。此外&#xff0c;全球旅行和旅游业的恢复&#xff0c;…

小程序|手写签名功能如何开启?

老师们可以利用易查分的手写签名功能&#xff0c;在发布查询后&#xff0c;让学生或家长签字确认知晓。下面教大家如何使用吧。 &#x1f4cc;使用教程 &#x1f50e;在哪里开启手写签名&#xff1f; 按照正常流程创建查询后&#xff0c;在查询管理页找到需要开启签名功能的查…

python实现读取串口数据-使用LibModbus库实现一个实时读取串口数据

在工业自动化领域&#xff0c;Modbus协议因其简单、可靠和广泛支持而备受青睐。其中&#xff0c;Modbus RTU&#xff08;串行通信&#xff09;以其低成本和易实施性在许多场景中发挥着重要作用。 01 Modbus RTU协议简介 Modbus RTU是一种基于串行通信的Modbus协议&#xff0c;…

SQL——SERVER的建表主要操作

目录 一&#xff1a;数据存储问题 1.表的相关数据 2.表&#xff0c;字段&#xff0c;记录 二&#xff1a;建表 1.创建表头 2. 数据类型 3.保存数据 4.数据冗余 5.使用命令重置表 7.设置主键 一&#xff1a;数据存储问题 1.表的概念 表是数据库的基本单位&#xff…

运维别卷系列 - 云原生监控平台 之 03.prometheus label 实践

文章目录 [toc]label 简介自定义标签relabel_configsregexrelabel_action metric_relabel_configs两者的区别 实践 label 简介 label 对于 Prometheus 来说&#xff0c;属于数据处理的方式&#xff0c;Prometheus 是通过指定的 label 来查询数据 Prometheus 的 target 中实例&…

elasticsearch-head 源码运行

1、下载安装nodejs 地址&#xff1a;Node.js — Run JavaScript Everywhere 2、git下载 elasticsearch-head 源码 地址&#xff1a;GitHub - mobz/elasticsearch-head: A web front end for an elastic search cluster 3、使用cmd 进入 elasticsearch-head 目录 4、依次执…

代码随想录算法训练营Day 42| 动态规划part04 | 01背包问题理论基础I、01背包问题理论基础II、416. 分割等和子集

代码随想录算法训练营Day 42| 动态规划part04 | 01背包问题理论基础I、01背包问题理论基础II、416. 分割等和子集 文章目录 代码随想录算法训练营Day 42| 动态规划part04 | 01背包问题理论基础I、01背包问题理论基础II、416. 分割等和子集01背包问题理论基础一、01背包问题二、…

Redis-如何保证与Mysql数据一致性

文章目录 Redis与Mysql数据一致性的情况有哪些&#xff1f;Redis与Mysql数据保持一致性的方案&#xff1f;同步双写机制删除缓存重新加载机制延迟双删机制利用MQ保持数据一致性 本篇小结 更多相关内容可查看 Redis与Mysql数据一致性的情况有哪些&#xff1f; Redis和MySQL是两…

Dart 3.4 发布:Wasm Native Macros(宏)

Google I/O 的结束&#xff0c;除了 Flutter 3.22 的发布 &#xff0c;Dart 3.4 也迎来了它是「史诗级」的更新&#xff0c;之所以这么说&#xff0c;就是因为 Wasm Native 的落地和 Macros 的实验性展示。 在此之前&#xff0c;其实我也提前整理过一些对应的内容&#xff0c;…

Web课外练习7

<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>照片墙</title><style>body {display: …

基于物联网、大数据的企业智能设备管理系统的实践解读

随着物联网、大数据的迅速发展&#xff0c;智能化设备管理系统已经渗透到我们工作的方方面面。然而&#xff0c;传统企业设备管理也迈入智能化、无纸化的管理趋势。因此&#xff0c;智能设备管理系统有了很大的应用需求&#xff0c;智能设备管理系统以数字化技术&#xff0c;为…

好文推荐:基于热红外的双源能量平衡(TSEB)模型--从植物到全球尺度的蒸散诊断简史

文献 近日&#xff0c;美国农业部农业研究服务局&#xff08;USDA-ARS&#xff09;的科学家们发表了一篇重要的研究论文——“Agricultural and Forest Meteorology” &#xff08;https://www.sciencedirect.com/journal/agricultural-and-forest-meteorology&#xff09;&…

ShellCode详解三

直接进入正题。 在完成正式的shellcode代码导出之前&#xff0c;我们先手动的对代码进行导出&#xff0c;以使各位同学更加了解其原理。 手动注入shellcode 1、我们利用DLE工具找到上一节中我们生成的PE文件的代码段位置 上述图片就是我们的代码段位置 2、利用WinHex工具我…

Kotlin协程实战指南:解锁Android开发高效能新时代

前言 在移动互联网的狂飙突进之中&#xff0c;Android开发领域如同站在风口的勇士&#xff0c;不断接受技术迭代与创新的双重洗礼。在这个快速变化的市场里&#xff0c;用户对应用性能和体验的期待水涨船高&#xff0c;开发者们面临的挑战也越来越大&#xff1a;如何在功能的丰…