微信小程序开发实战教程 第4章 婚礼邀请函项目
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
3 项目初始化
在app.json文件中定义项目导航栏样式，代码如下：
"window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#ff4c91", "navigationBarTextStyle": "white", "enablePullDownRefresh": false
}
✎ 4.1 开发前准备
3 项目初始化
在app.json文件中定义项目底部标签栏，代码示例如下：
"tabBar": { "list": [
{ "pagePath": "pages/index/index", "iconPath": "images/invite.png", "selectedIconPath": "images/invite.png", "text": "邀请函"
邀请函页面
照片页面
美好时光页面
✎ 4.1 开发前准备
1 项目展示
ቤተ መጻሕፍቲ ባይዱ
婚礼地点页面
宾客信息页面
✎ 4.1 开发前准备
1 项目展示
下面针对5个页面的功能作简要介绍： 邀请函页面：新郎和新娘的电话、婚礼地点、婚礼时间。 照片页面：新郎和新娘的幸福照。 美好时光页面：采用视频的方式记录一对新人的相爱历程。 地图页面：通过导航查看婚礼地点的路线图。 宾客信息页面：参加婚礼的宾客填写个人信息，送一些祝福语等。
第4章 婚礼邀请函项目
微信 小程序
• 开发前准备 • 照片页面 • 婚礼地点页面
• 邀请函页面 • 美好时光页面 • 宾客信息页面
✎
学习目标
1 掌握小程序常用组
件的使用
掌握腾讯视频插 2
件的使用
掌握背景音乐 API、地图API的
4 使用
掌握模板消息的使用
3
✎
目录
开发前准备
☞点击查看本节相关知识点
3 项目初始化
在微信开发者工具中创建一个空白项目。创建成功后，新建app.json文件，在 该文件中定义本项目中的页面路径，代码如下：
{"pages": [ “pages/index/index”, // 邀请函页面 … “pages/guest/guest“ // 宾客信息页面
]}
✎ 4.1 开发前准备
1 任务分析
页面结构图：
page .bg
.content
.content-gif .content-title
.contentavatar
.content-info
.content-address
.player
✎ 4.2 邀请函页面
2 背景音乐播放
index.wxml
<view class="player player-{{isPlayingMusic ? 'play' : 'pause'}}" bindtap="play">
<view>我们诚邀您来参加我们的婚礼</view> <view>时间：2019年1月28日</view> <view>地点：北京市海淀区XX路XX酒店</view> </view>
gif图 标题 头像
地点
✎ 4.2 邀请函页面
3 页面结构和样式
值得一提
页面内各元素的高度应满屏显示，为此，推荐使用viewport单位，即通 过vw和vh表示宽度和高度，确保.content内部的元素高度加起来不超 过100
邀请函页面
☞点击查看本节相关知识点
照片页面
☞点击查看本节相关知识点
✎
目录
美好时光页面
☞点击查看本节相关知识点
婚礼地点页面
☞点击查看本节相关知识点
宾客信息页面
☞点击查看本节相关知识点
✎ 4.1 开发前准备
1 项目展示
婚礼邀请函小程序由5个页面组成，分别是邀请函页面、照片页面、美好时光 页面、婚礼地点页面、宾客信息页面。效果展示图如下：
✎ 4.2 邀请函页面
3 页面结构和样式
index.wxml
<image class="content-gif" src= "/images/save_the_date.gif" /> <view class="content-title">邀请函</view> <view class=“content-avatar">头像</view> <view class="content-address">
✎ 4.2 邀请函页面
},
✎ 4.2 邀请函页面
2 背景音乐播放
index.js
play: function (e) { if (this.data.isPlayingMusic) { this.bgm.pause() } else { this.bgm.play() } this.setData({
isPlayingMusic:!this.data.isPlaying Music }) },
}…] }
✎ 4.2 邀请函页面
1 任务分析
邀请函页面的任务需求如下： 背景音乐播放：页面的右上角有一个背景音乐播放按钮，用于控制音乐播放
状态，单击按钮播放音乐，再次单击按钮暂停音乐。 新人信息：页面中展示新娘和新郎的头像、姓名信息。 婚礼信息：页面展示婚礼时间及地点。
✎ 4.2 邀请函页面
2 背景音乐播放
index.js
onReady: function () { this.bgm = wx.getBackgroundAudioManager() this.bgm.onCanplay(()=> { this.bgm.pause() }) this.bgm.src = this.music_url
✎ 4.1 开发前准备
2 项目分析
路径 app.js app.json app.wxss pages/index/ pages/picture/
婚礼邀请函项目目录结构
说明 应用程序的逻辑文件 应用程序的配置文件
定义公共样式 “邀请函”页面文件保存目录
“照片”页面文件保存目录
✎ 4.1 开发前准备
<image src="/images/music_icon.png" /> <image src="/images/music_play.png"/> </view>
✎ 4.2 邀请函页面
2 背景音乐播放
值得一提
功能控制音频播放，小程序切入后台时，如果音频当前处于播放状态， 可以继续播放。
✎ 4.2 邀请函页面
在app.json文件中定义项目导航栏样式，代码如下：
"window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#ff4c91", "navigationBarTextStyle": "white", "enablePullDownRefresh": false
}
✎ 4.1 开发前准备
3 项目初始化
在app.json文件中定义项目底部标签栏，代码示例如下：
"tabBar": { "list": [
{ "pagePath": "pages/index/index", "iconPath": "images/invite.png", "selectedIconPath": "images/invite.png", "text": "邀请函"
邀请函页面
照片页面
美好时光页面
✎ 4.1 开发前准备
1 项目展示
ቤተ መጻሕፍቲ ባይዱ
婚礼地点页面
宾客信息页面
✎ 4.1 开发前准备
1 项目展示
下面针对5个页面的功能作简要介绍： 邀请函页面：新郎和新娘的电话、婚礼地点、婚礼时间。 照片页面：新郎和新娘的幸福照。 美好时光页面：采用视频的方式记录一对新人的相爱历程。 地图页面：通过导航查看婚礼地点的路线图。 宾客信息页面：参加婚礼的宾客填写个人信息，送一些祝福语等。
第4章 婚礼邀请函项目
微信 小程序
• 开发前准备 • 照片页面 • 婚礼地点页面
• 邀请函页面 • 美好时光页面 • 宾客信息页面
✎
学习目标
1 掌握小程序常用组
件的使用
掌握腾讯视频插 2
件的使用
掌握背景音乐 API、地图API的
4 使用
掌握模板消息的使用
3
✎
目录
开发前准备
☞点击查看本节相关知识点
3 项目初始化
在微信开发者工具中创建一个空白项目。创建成功后，新建app.json文件，在 该文件中定义本项目中的页面路径，代码如下：
{"pages": [ “pages/index/index”, // 邀请函页面 … “pages/guest/guest“ // 宾客信息页面
]}
✎ 4.1 开发前准备
1 任务分析
页面结构图：
page .bg
.content
.content-gif .content-title
.contentavatar
.content-info
.content-address
.player
✎ 4.2 邀请函页面
2 背景音乐播放
index.wxml
<view class="player player-{{isPlayingMusic ? 'play' : 'pause'}}" bindtap="play">
<view>我们诚邀您来参加我们的婚礼</view> <view>时间：2019年1月28日</view> <view>地点：北京市海淀区XX路XX酒店</view> </view>
gif图 标题 头像
地点
✎ 4.2 邀请函页面
3 页面结构和样式
值得一提
页面内各元素的高度应满屏显示，为此，推荐使用viewport单位，即通 过vw和vh表示宽度和高度，确保.content内部的元素高度加起来不超 过100
邀请函页面
☞点击查看本节相关知识点
照片页面
☞点击查看本节相关知识点
✎
目录
美好时光页面
☞点击查看本节相关知识点
婚礼地点页面
☞点击查看本节相关知识点
宾客信息页面
☞点击查看本节相关知识点
✎ 4.1 开发前准备
1 项目展示
婚礼邀请函小程序由5个页面组成，分别是邀请函页面、照片页面、美好时光 页面、婚礼地点页面、宾客信息页面。效果展示图如下：
✎ 4.2 邀请函页面
3 页面结构和样式
index.wxml
<image class="content-gif" src= "/images/save_the_date.gif" /> <view class="content-title">邀请函</view> <view class=“content-avatar">头像</view> <view class="content-address">
✎ 4.2 邀请函页面
},
✎ 4.2 邀请函页面
2 背景音乐播放
index.js
play: function (e) { if (this.data.isPlayingMusic) { this.bgm.pause() } else { this.bgm.play() } this.setData({
isPlayingMusic:!this.data.isPlaying Music }) },
}…] }
✎ 4.2 邀请函页面
1 任务分析
邀请函页面的任务需求如下： 背景音乐播放：页面的右上角有一个背景音乐播放按钮，用于控制音乐播放
状态，单击按钮播放音乐，再次单击按钮暂停音乐。 新人信息：页面中展示新娘和新郎的头像、姓名信息。 婚礼信息：页面展示婚礼时间及地点。
✎ 4.2 邀请函页面
2 背景音乐播放
index.js
onReady: function () { this.bgm = wx.getBackgroundAudioManager() this.bgm.onCanplay(()=> { this.bgm.pause() }) this.bgm.src = this.music_url
✎ 4.1 开发前准备
2 项目分析
路径 app.js app.json app.wxss pages/index/ pages/picture/
婚礼邀请函项目目录结构
说明 应用程序的逻辑文件 应用程序的配置文件
定义公共样式 “邀请函”页面文件保存目录
“照片”页面文件保存目录
✎ 4.1 开发前准备
<image src="/images/music_icon.png" /> <image src="/images/music_play.png"/> </view>
✎ 4.2 邀请函页面
2 背景音乐播放
值得一提
功能控制音频播放，小程序切入后台时，如果音频当前处于播放状态， 可以继续播放。
✎ 4.2 邀请函页面