微信小程序 #项目笔记#

2024-07-06 15:56| 来源: 网络整理| 查看: 265

学习目标：1.开发前准备1.1 项目展示1.2 项目分析1.3 项目初始化 2. 邀请函页面2.1 任务分析2.2 背景音乐播放2.3 页面结构和样式2.4 一键拨打电话 3. 照片页面3.1 任务分析3.2 实现纵向轮播图 4. 美好时光页面4.1 任务分析4.2 前导知识4.3 编写页面结构和样式4.4 利用WXS增强页面功能 5. 婚礼地点页面5.1 任务分析5.2 前导知识5.3 编写婚礼地点页面 6.宾客信息页面6.1 任务分析6.2 前导知识6.3 编写页面结构和样式6.4 表单验证6.5 发送婚礼请帖回复通知总结成果展示

学习目标：掌握小程序常用组件的使用掌握腾讯视频插件的使用掌握模板消息的使用掌握背景音乐API、地图API的使用 1.开发前准备 1.1 项目展示

婚礼邀请函小程序由5个页面组成，分别是邀请函页面、照片页面、美好时光页面、婚礼地点页面、宾客信息页面。效果图如下：

在这里插入图片描述

下面针对5个页面的功能作简要介绍：

邀请函页面：新郎和新娘的电话、婚礼地点、婚礼时间。照片页面：新郎和新娘的幸福照。美好时光页面：采用视频的方式记录一对新人的相爱历程。地图页面：通过导航查看婚礼地点的路线图。宾客信息页面：参加婚礼的宾客填写个人信息，送一些祝福语等。 1.2 项目分析

婚礼邀请函项目目录结构

路径说明app.js应用程序的逻辑文件app.json应用程序的配置文件app.wxss定义公共样式pages/index/“邀请函”页面文件保存目录pages/picture“照片”页面文件保存目录 1.3 项目初始化

在微信开发者工具中创建一个空白项目。创建成功后，新建 app.json文件，在该文件中定义本项目中的页面路径，代码如下：

{"pages": [ “pages/index/index”, // 邀请函页面 … “pages/guest/guest“ // 宾客信息页面 ]}

在app.json文件中定义项目导航栏样式，代码如下：

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

在app.json文件中定义项目底部标签栏，代码示例如下：

"tabBar": { "list": [ { "pagePath": "pages/index/index", "iconPath": "images/invite.png", "selectedIconPath": "images/invite.png", "text": "邀请函" }…] } 2. 邀请函页面 2.1 任务分析

邀请函页面的任务需求如下：

背景音乐播放：页面的右上角有一个背景音乐播放按钮，用于控制音乐播放状态，单击按钮播放音乐，再次- 单击按钮暂停音乐。新人信息：页面中展示新娘和新郎的头像、姓名信息。婚礼信息：页面展示婚礼时间及地点。

页面结构图：在这里插入图片描述

2.2 背景音乐播放

功能控制音频播放，小程序切入后台时，如果音频当前处于播放状态，可以继续播放。 index.wxml

【本文地址】

微信小程序 #项目笔记#

微信小程序 #项目笔记#

今日新闻

推荐新闻