"婚礼邀请函"小程序：邀请函页面

任务分析

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

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

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

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

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

背景音乐播放

WXML

<view class="player player-{{isPlayingMusic ? 'play' : 'pause'}}" bindtap="play">
  <image src="/images/music_icon.png" />
  <image src="/images/music_play.png" />
</view>

WXSS

/* 音乐播放图标 */

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

播放和暂停效果

index.js:

  data: {
    isPlayingMusic: false
  },

index.css:

/* 播放状态 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);
  }
}

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

背景音乐播放

除了第三章介绍的音频接口，

微信还提供了wx.getBackgroundAudioManager()

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

app.json中添加如下配置：

 "requiredBackgroundModes": [
    "audio"
  ],

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

  bgm: null,
  music_url: 'https://downsc.chinaz.net/Files/DownLoad/sound1/201803/9825.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
     this.bgm.play()
  
  },

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

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

效果

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

页面结构和样式

WXML

<!-- 背景图片 -->
<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>

小程序中不能在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

背景图片设置

微信小程序设置背景图片，只支持线上图片和base64图片，不支持本地图片

参考文档：https://blog.csdn.net/weixin_42448623/article/details/102514933

图片云存储：七牛云：基本概念、七牛云：快速入门

代码

/* 内容区域 */

.content {
  width: 100vw;
  height: 100vh;
  position: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-image: url('http://qy2y9xnbj.hb-bkt.clouddn.com/bg_1.png');
  background-size: 100% 100%;

}
/* 顶部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;
}

效果

一键拨打电话

index.wxml中 content-info的标签中编写代码，

将新郎和新娘的名字显示在页面上，并添加电话图标。

WXML

 <!-- 新娘和新郎的名字 -->
  <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>

WXSS

pages/index/index.wxss:

/* 新郎新娘信息 */
.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;
}

JS

实现一键拨打电话功能

  // 一键拨打电话
  // 新郎电话
  callGroom: function() {
    wx.makePhoneCall({
      phoneNumber: '13700000000'
    })
  },
  // 新娘电话
  callBride: function() {
    wx.makePhoneCall({
      phoneNumber: '15600000000'
    })
  }

通过调用wx.makePhoneCall()接口实现呼叫功能。

"婚礼邀请函"小程序：邀请函页面

目录

任务分析

背景音乐播放

WXML

WXSS

播放和暂停效果

背景音乐播放

效果

页面结构和样式

WXML

CSS

vw、vh适配

背景图片设置

代码

效果

一键拨打电话

WXML

WXSS

JS

效果图

导航菜单

个人工具

命名空间

变种

视图

更多

搜索

导航

工具