微信小程序——婚礼邀请函页面-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序——婚礼邀请函页面。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

<!-- 显示歌曲播放暂停的小图标 -->
<view class="player player-{{isPlayingMusic ? 'play':'pause'}}" bindtap="play">
   <image src="/images/music_icon.jpg"></image>
   <image src="/images/music_play.png"></image>
</view>
<!-- 背景图片 -->
<image class="bg" src="/images/bg_1.png"></image>
<!-- 内容区域 -->
<view class="content">
<!-- 顶部图片区域 -->
   <image class="content-gif" src="/images/save_the_date.gif"></image>
   <!-- 标题 -->
   <view class="content-title">邀请函</view>
   <!-- 新郎和新娘合照 -->
   <view class="content-avatar">
      <image src="/images/avatar.png"></image>
   </view>
   <!-- 新郎和新娘的名字 -->
   <view class="content-info">
      <view class="content-name" bindtap="callGroom">
         <image src="/images/tel.png"></image>
         <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"></image>
         <view>张小红</view>
         <view>新娘</view>
      </view>
   </view>
   <!-- 婚礼信息 -->
   <view class="content-address">
         <view>我们曾邀你来参加我们的婚礼</view>
         <view>时间：2021年10月11</view>
         <view>地点：河南省周口市曦皇大酒店</view>
      </view>

</view>

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、页面最终运行效果如图

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