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

- - （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.三目运算法和绑定事件：
    - 2.data：定义一些变脸的值：
    - 3.绑定事件：
  - （7）总体页面图：
  - （8）获取源码：

（1）pages文件中的文件创建：

1.在app.json中进行创建文件，保存即可在pages中生成文件；

i.app.json文件中的代码：

 "pages":["pages/index/index","pages/picture/picture","pages/video/video","pages/map/map","pages/guest/guest"],

ii.创建后如下：
在这里插入图片描述

（2）完成下导航：

1.在app.json中新增tabBar方法，并t在abBar中的list中分别写入pagePath（文件路径）、text（导航标题）、iconPath（未选中时图标）、selectedIconPath（选中时图标）；

i.tabBar中代码：

"tabBar":{"color": "#999","backgroundColor":"#fafafa","borderStyle": "black","position": "bottom","selectedColor": "#ff4c91","list": [{"pagePath": "pages/index/index","text": "邀请函","iconPath": "/image/invite.png","selectedIconPath": "/image/invite.png"},{"pagePath": "pages/picture/picture","text": "照片","iconPath": "/image/marry.png","selectedIconPath": "/image/marry.png"},{"pagePath": "pages/video/video","text": "美好时光","iconPath": "/image/video.png","selectedIconPath": "/image/video.png"},{"pagePath": "pages/map/map","text": "婚礼地点","iconPath": "/image/map.png","selectedIconPath": "/image/map.png"},{"pagePath": "pages/guest/guest","text": "宾客信息","iconPath": "/image/guest.png","selectedIconPath": "/image/guest.png"}
]},

（3）index.wxml页面设计：

1.显示歌曲播放暂停的小图标

2.背景图片

3.顶部图片区域

4.标题

5.新郎和新娘合照

6.新郎和新娘的名字

7.婚礼信息

i.代码：

<!-- 显示歌曲播放暂停的小图标 -->
<view class="player player-{{isPlayingMusic ? 'play':'pause'}}" bindtap="play"><image src="/image/music_icon.png"></image><image src="/image/music_play.png"></image>
</view>
<!-- 背景图片 -->
<image class="bg" src="/image/bg_1.png"></image>
<!-- 内容区域 -->
<view class="content">
<!-- 顶部图片区域 --><image class="content-gif" src="/image/save_the_date.gif"></image><!-- 标题 --><view class="content-title">邀请函</view><!-- 新郎和新娘合照 --><view class="content-avatar"><image src="/image/avatar.png"></image></view><!-- 新郎和新娘的名字 --><view class="content-info"><view class="content-name" bindtap="callGroom"><image src="/image/tel.png"></image><view>陈威威</view><view>新郎</view></view><view class="content-wedding"><image src="/image/wedding.png"></image></view><view class="content-name" bindtap="callBride"><image src="/image/tel.png"></image><view>余蕾蕾</view><view>新娘</view></view></view><!-- 婚礼信息 --><view class="content-address"><view>我们曾邀你来参加我们的婚礼！</view><view>时间：2022年2月22</view><view>地点：广东省天堂市玉皇大帝大酒店</view></view>
</view>

（4）index.js的设置：

i.代码：

Page({data: {isPlayingMusic:false,bgm:null,music_url:"image/song.mp3",music_coverImgUrl:"image/banner.jpg",onReady:function(){// 创建getBackgroundAudioManager 实例对象(接口播放音频)this.bgm=wx.getBackgroundAudioManager()// 音频标题this.bgm.title = "marry me"// 专辑封面this.bgm.epname = "wedding"// 歌手名this.bgm.singer = "singer"// 专辑封面this.bgm.coverImgUrl = this.music_coverImgUrlthis.bgmoncanplay(()=>{this.bgm.pause()})// 指定音频的数据源this.bgm.src = this.music_url}},  // 播放器的单击事件play:function(e){// 执行暂停或播放操作,如果值为true则暂停，值为 false则播放if(this.data.isPlayingMusic){this.bgm.pause()}else{this.bgm.play()}this.setData({//将data中的isPlayingMusic赋值给它isPlayingMusic: !this.data.isPlayingMusic})},//实现拨打电话功能callGroom:function(){wx.makePhoneCall({phoneNumber: '15138726924',})},callBride:function(){wx.makePhoneCall({phoneNumber: '18236347304',})},})

（5）index.wxss样式设置：

i.代码：

.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(0deeg);}to{transform: rotate(360deg);}
}
.player > image:last-child{width: 28rpx;height: 80rpx;margin-left: -5px;
}
/* 播放器的播放和暂停效果 */
.player-play > image:first-child{animation-play-state: running;
}
.player-play > image:last-child{animation: musicStart 0.2s linear forwards;
}
.player-play > image:first-child{animation-play-state: paused;
}
.player-play > 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;}.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: 3rpx solid #ff4c91;border-radius: 50%;}/* 新郎新郎电话区 */.content-info{width:45vh;text-align: center;margin-top: 4vh;display: flex;align-items: center;}.content-wedding{flex: 1;}.content-wedding>image{width:5.5vh;height:5.5vh;margin-left: 20rpx;}.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-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;}