查看“"婚礼邀请函"小程序：邀请函页面”的源代码

==任务分析==
页面右上角有一个背景音乐播放按钮，用于控制音乐播放状态

邀请函页面上显示了新娘和新郎的头像、姓名以及婚礼时间和地点

page、bg(背景图片）和content(内容容器）具有相同的宽度和高度，

它们是层叠在一起的，占满了整个显示区域

content和player将通过在WXSS样式中设置position：fixed进行定位，

==背景音乐播放==
===WXML===
 <nowiki>
<view class="player player-{{isPlayingMusic ? 'play' : 'pause'}}" bindtap="play">
  <image src="/images/music_icon.png" />
  <image src="/images/music_play.png" />
</view></nowiki>
===WXSS===
 <nowiki>
/* 音乐播放图标 */

.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(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.player > image:last-child {
  width: 28rpx;
  height: 80rpx;
  margin-left: -5px;
}
</nowiki>

[[文件:wexin21081803.png]]

===播放和暂停效果===

index.js:

 <nowiki>
  data: {
    isPlayingMusic: false
  },</nowiki>

index.css:

 <nowiki>
/* 播放状态 class为.player-play */

.player-play > image:first-child {
  animation-play-state: running;
}

.player-play > image:last-child {
  animation: musicStart 0.2s linear forwards;
}

/* 暂停状态 class为.player-pause */

.player-pause > image:first-child {
  animation-play-state: paused;
}

.player-pause > 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);
  }
}
</nowiki>

*animation-play-state: running/paused 播放器的播放和暂停
*animation: musicStart 0.2s linear forwards/musicStop 0.2s linear forwards;  控制唱臂的移入和移出

===背景音乐播放===
除了第三章介绍的音频接口，

微信还提供了wx.getBackgroundAudioManager()

这种即使在小程序切入后台时，也可以继续播放。

app.json中添加如下配置：

 <nowiki>
 "requiredBackgroundModes": [
    "audio"
  ],
</nowiki>

然后在pages/index/index.js文件中编写背景音频播放的代码：

 <nowiki>
  bgm: null,
  music_url: 'https://www.ytmp3.cn/down/64665.mp3',
  music_coverImgUrl: 'http://localhost:3000/cover.jpg',
  onReady: function() {
    // 创建getBackgroundAudioManager实例对象
    this.bgm = wx.getBackgroundAudioManager()
    // 音频标题
    this.bgm.title = '因为爱情e'
    // 专辑名称
    this.bgm.epname = 'wedding'
    // 歌手名
    this.bgm.singer = '王菲'
    // 专辑封面
    this.bgm.coverImgUrl = this.music_coverImgUrl
    this.bgm.onCanplay(() => {
      this.bgm.pause()
    })
    // 指定音频的数据源
    this.bgm.src = this.music_url
  },</nowiki>

继续在index.js中编写代码，实现单击事件：

 <nowiki>
 // 播放器的单击事件
  play: function() {
    if (this.data.isPlayingMusic) {
      this.bgm.pause()
    } else {
      this.bgm.play()
    }
    this.setData({
      isPlayingMusic: !this.data.isPlayingMusic
    })
  },</nowiki>

===效果===
[[文件:wexin21081804.png]]

运行程序、点击右上角按钮，可以看到播放和暂停功能是否实现

==页面结构和样式==

===WXML===
 <nowiki>
<!-- 背景图片 -->
<image class="bg" src="/images/bg_1.png" />
<!-- 内容区域 -->
<view class="content">
  <!-- 顶部GIF图片 -->
  <image class="content-gif" src="/images/save_the_date.gif" />
  <!-- 标题 -->
  <view class="content-title">邀请函</view>
  <!-- 新郎和新娘的合照 -->
  <view class="content-avatar">
    <image src="/images/avatar.png" />
  </view>
  <!-- 新娘和新郎的名字 -->
  <view class="content-info">
    <view class="content-name" bindtap="callGroom">
      <image src="/images/tel.png" />
      <view>王辉辉</view>
      <view>新郎</view>
    </view>
    <view class="content-wedding">
      <image src="/images/wedding.png"></image>
    </view>
    <view class="content-name" bindtap="callBride">
      <image src="/images/tel.png" />
      <view>张琳琳</view>
      <view>新娘</view>
    </view>
  </view>
  <!-- 婚礼信息 -->
  <view class="content-address">
    <view>我们诚邀您来参加我们的婚礼</view>
    <view>时间：2019年1月28日</view>
    <view>地点：北京市海淀区XX路XX酒店</view>
  </view>
</view></nowiki>

*小程序中不能在WXSS中通过background引入本地图片，因此第6行代码使用image组件
*小程序体积有限，在实际开发中推荐使用URL方式引入图片资源


===CSS===
背景图要铺满整个页面，页面各元素高度不超过页面高度，

可以使用viewport单位（vw和vh)

===vw、vh适配===

vw和vh是css3中的新单位，是一种视窗单位，在小程序中也同样适用。

    ①小程序中，窗口宽度固定为100vw，将窗口宽度平均分成100份，1份是1vw
    ②小程序中，窗口高度固定为100vh ，将窗口高度平均分成100份，1份是1vh

所以，在小程序中也可以使用vw、vh作为尺寸单位使用在布局中进行布局，但是一般情况下，百分比+rpx就已经足够使用了,所以它们的出场机会很少。
————————————————
原文链接：https://blog.csdn.net/zuomengjia/article/details/103186585

 <nowiki>
/* 背景图 */

.bg {
  width: 100vw;
  height: 100vh;
}

/* 内容区域 */

.content {
  width: 100vw;
  height: 100vh;
  position: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 顶部gif图 */

.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: 3px solid #ff4c91;
  border-radius: 50%;
}

/* 新郎新娘信息 */

.content-info {
  width: 45vw;
  text-align: center;
  margin-top: 4vh;
  display: flex;
  align-items: center;
}

.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-wedding {
  flex: 1;
}

.content-wedding > image {
  width: 5.5vh;
  height: 5.5vh;
  margin-left: 20rpx;
}

/* 婚礼信息 */

.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;
}
</nowiki>