草庐IT

微信小程序 #项目笔记# | 从0到1实现婚礼邀请函小程序

学习目标: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、主体页面和导航栏样式app.json "pages":["pages/index/index","pages/picture/picture","pages/video/video","pages/map/map","pages/guest/guest"],"requiredBackgroundModes":["audio"],"window":{"navigationBarBackgroundColor":"#ff4c91","navigationBarTextStyle":"white","backgroundTextStyle":"light","enablePullDownRefr

微信小程序-婚礼邀请函页面

微信小程序-婚礼邀请函页面(1)pages文件中的文件创建:1.在app.json中进行创建文件,保存即可在pages中生成文件;(2)完成下导航:1.在app.json中新增tabBar方法,并t在abBar中的list中分别写入pagePath(文件路径)、text(导航标题)、iconPath(未选中时图标)、selectedIconPath(选中时图标);(3)index.wxml页面设计:1.显示歌曲播放暂停的小图标2.背景图片3.顶部图片区域4.标题5.新郎和新娘合照6.新郎和新娘的名字7.婚礼信息(4)index.js的设置:(5)index.wxss样式设置:(6)重难点分析:

微信小程序-婚礼邀请函页面

微信小程序-婚礼邀请函页面(1)pages文件中的文件创建:1.在app.json中进行创建文件,保存即可在pages中生成文件;(2)完成下导航:1.在app.json中新增tabBar方法,并t在abBar中的list中分别写入pagePath(文件路径)、text(导航标题)、iconPath(未选中时图标)、selectedIconPath(选中时图标);(3)index.wxml页面设计:1.显示歌曲播放暂停的小图标2.背景图片3.顶部图片区域4.标题5.新郎和新娘合照6.新郎和新娘的名字7.婚礼信息(4)index.js的设置:(5)index.wxss样式设置:(6)重难点分析:

微信小程序-婚礼邀请函页面

微信小程序-婚礼邀请函页面(1)pages文件中的文件创建:1.在app.json中进行创建文件,保存即可在pages中生成文件;(2)完成下导航:1.在app.json中新增tabBar方法,并t在abBar中的list中分别写入pagePath(文件路径)、text(导航标题)、iconPath(未选中时图标)、selectedIconPath(选中时图标);(3)index.wxml页面设计:1.显示歌曲播放暂停的小图标2.背景图片3.顶部图片区域4.标题5.新郎和新娘合照6.新郎和新娘的名字7.婚礼信息(4)index.js的设置:(5)index.wxss样式设置:(6)重难点分析:

微信小程序-婚礼邀请函页面

微信小程序-婚礼邀请函页面(1)pages文件中的文件创建:1.在app.json中进行创建文件,保存即可在pages中生成文件;(2)完成下导航:1.在app.json中新增tabBar方法,并t在abBar中的list中分别写入pagePath(文件路径)、text(导航标题)、iconPath(未选中时图标)、selectedIconPath(选中时图标);(3)index.wxml页面设计:1.显示歌曲播放暂停的小图标2.背景图片3.顶部图片区域4.标题5.新郎和新娘合照6.新郎和新娘的名字7.婚礼信息(4)index.js的设置:(5)index.wxss样式设置:(6)重难点分析:
12