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

（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"],

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"}
]},

（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>

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

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

（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

微信小程序-婚礼邀请函页面相关推荐

微信小程序 - 婚礼邀请函
marry 微信小程序端 + 服务端扫码体验免费制作流程点我查看主页面展示项目说明服务端架构:SpringMvc 服务器:阿里云服务域名:pengmaster.com 数据库:在服务器 ...
微信小程序“婚礼邀请函”首页显示
成品展示: 首页开发默认开始播放背景音乐,这个背景音乐点击右上角图标可以暂停(有动画),然后点击新郎和新娘文字可以调到拨号页面拨打电话给新娘或新郎. 1.背景音乐开发: 背景音乐的开发主要用到 ...
微信小程序点击页面tab栏切换
微信小程序点击页面tab栏切换 wxml <view class="container"><view class="swiper-tab"&g ...
微信小程序开发教程第七章：微信小程序编辑名片页面开发
前面我们更新了六篇的微信小程序开发教程,现在更新第七章:微信小程序编辑名片页面开发,(第一二章:微信小程序开发教程,第三四章:微信小程序项目结构以及配置&微信小程序首页面开发,第五章:微信小程 ...
Java Web项目，Android和微信小程序的初始页面配置
Java Web项目我们在Eclipse里开了Java Web项目之后,Run As Tomcat或者Apache服务器,本地运行,如果直接用http://localhost:8080访问项目,会发 ...
手机按三角返回页面上一页_小猿圈微信小程序跳转页面都有哪些？
随着科技的进步互联网的发展,微信小程序逐渐成为了很多推广渠道的入口,但是因为很多做前端的小伙伴们不知道怎么去实现跳转页面,弄得不知所措,今天小猿圈前端讲师就给你讲解几种微信小程序跳转页面方法. 微信小 ...
微信小程序跳转页面问题
微信小程序跳转页面的方式: 1.跳转至tabBar页面,并关闭其他所有非 tabBar页面 wx.switchTab({ url: '路径' //url同app.json中配置的tabBar路径 }) ...
微信小程序获取当前页面url
微信小程序获取当前页面url 微信小程序获取当前页面的URL地址
微信小程序个人中心页面开发
目录微信小程序创建项目配置底部导航栏微信小程序滚动播放内容微信小程序功能中心模块开发微信小程序个人中心页面开发微信小程序获取电话号码微信小程序显示列表数据微信小程序显示分页列表微信小程 ...
微信小程序--订单查询页面
微信小程序–订单查询页面包含功能点: 订单查询结构:order.wxml <tabs tabList="{{tabList}}" binditemChange=" ...

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

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

（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）获取源码：

微信小程序-婚礼邀请函页面相关推荐

最新文章

热门文章