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

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",
    "enablePullDownRefresh": false
  },

其中"requiredBackgroundModes": ["audio"]为音乐播放配置

2、底部标签栏

tabBar用于实现页面底部的标签栏，主要属性如下，其中list是一个数组，数组中的每一个元素都是一个标签按钮对象，设置对应的属性时，可以跳转到对应的标签页。

属性	说明
color	未选择时，底部导航栏颜色
selectedColor	选中时，底部导航栏颜色
borderStyle	底部导航边框颜色
backgroundColor	底部导航背景色
list	导航配置数组
pagePath	页面访问地址
iconPath	未选择时图片路径
selectedIconPath	选中时图片路径
text	导航图标下方文字

3、在app.json中添加如下代码，完成标签栏的配置

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

4、页面的公共样式app.wxss

page{
  font-family: Helvetica Neue,Arial, Helvetica, sans-serif ;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}

 justify-content: space-between;使各项周围都留有空白

5、邀请函的内部结构index.wxss

   
   






   
   
   邀请函
   
   
      
   
   
   
      
         
         王小名
         新郎
      
      
         
      
      
         
         张小红
         新娘
      
   
   
   
         我们曾邀你来参加我们的婚礼
         时间：2021年10月11
         地点：河南省周口市曦皇大酒店
      

6、样式控制

/* 显示歌曲播放暂停的小图标 */
.player{
  position: fixed;
  top:20rpx;
  right:20rpx;
  /* 元素的堆叠顺序,防止被content中的内容覆盖在下面 */
  z-index: 1;
}
.player>image:first-child{
  width: 80rpx;
  height: 80rpx;
  border: 1rpx solid #ffffff;
  border-radius: 50%;
  /* 将动画与div绑定,musicRotate只是起的一个名字 */
 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;
}
/* 对唱胶图标设置旋转和暂停以及唱臂的移入和移出 */
.player-play>image:first-child{
  animation-play-state: running;
}
.player-pause>image:last-child{
  animation: musicStart 0.2s linear forwards;
}
.player-pause>image:first-child{
  animation-play-state: paused;
}
.player-pause>image:last-child{
  animation: musicStop 0.2 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;
}

 7、在index.js中编写背景音频播放的代码

  bgm:null,
  music_url:'http://localhost:3000/1.mp3',
  music_coverImgUrl:"http://localhost:3000/cover.jpg",
  onReady:function () {
    //用于播放背景音频
    this.bgm=wx.getBackgroundAudioManager()
    this.bgm.title="marry me"
    this.bgm.epname="wedding"
    this.bgm.singer="singer"
    this.bgm.coverImgUrl=this.music_coverImgUrl
    this.bgm.onCanplay(()=>{
      this.bgm.pause()
    })
    this.bgm.src=this.music_url
  },

8、实现单击播放器实现音乐的播放与暂停，在index.js中添加如下代码

  play:function(e){
    if(this.data.isPlayingMusic){
      this.bgm.pause()
    }else{
      this.bgm.play()
    }
    this.setData({
      isPlayingMusic: !this.data.isPlayingMusic
    })
  },

9、实现一键拨打电话的功能

 callGroom:function(){
    wx.makePhoneCall({
      phoneNumber: '15138726924',
    })
  },
  callBride:function(){
    wx.makePhoneCall({
      phoneNumber: '18236347304',
    })
  }

10、页面最终运行效果如图

婚礼邀请函图片获取资源

链接: https://pan.baidu.com/s/1OcI_KBEXx-WYJv9srXlWAw 提取码: jwwg