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

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

• • • （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"
  ],
1
2
3
4
5
6
7

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"
    }
]
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

（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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

（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_coverImgUrl
        this.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',
    })
  },

})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

（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;
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118

（6）重难点分析：

1.三目运算法和绑定事件：

i.例如

{{isPlayingMusic ‘play’:‘pause’}} 三目运算法：如果是true，则这样，否则那样

2.data：定义一些变脸的值：

i.例如：

isPlayingMusic:false,
bgm:null,
music_url:“image/song.mp3”,
music_coverImgUrl:“image/banner.jpg”,

3.绑定事件：

i.例如：

bindtap=“play” 绑定事件
play:function(e){ 添加一些方法 }, 相应写法

（7）总体页面图：

（8）获取源码：

https://pan.baidu.com/s/1bM9enMdXhuMJ8tttt7GxOA
提取码：cn79