婚礼邀请函首页

一、学习目标

1.掌握小程序常用组件的使用

2.掌握腾讯视频插件的使用

3.掌握模板消息的使用

4.掌握背景音乐API、地图API的使用

二、邀请函首页

1.邀请函页面展示

2.婚礼邀请函项目目录

标签	功能
app.js	应用程序的逻辑文件
app.json	应用程序的配置文件
app.wxss	定义公共样式
pages/index/	“邀请函”页面文件保存目录
pages/picture	“照片”页面文件保存目录

3. 项目初始化

4.页面结构图

5.背景音乐播放

• 在pages/index/index.wxml中实现背景音乐播放

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

• 在pages/index/index.js中实现背景音乐播放逻辑

onReady: function () {
  this.bgm = wx.getBackgroundAudioManager()
  this.bgm.onCanplay(()=> {
    this.bgm.pause()
  })
  this.bgm.src = this.music_url
},
play: function (e) {
  if (this.data.isPlayingMusic) {
    this.bgm.pause()
  } else { this.bgm.play() }
  this.setData({
isPlayingMusic:!this.data.isPlayingMusic })
},

6.背景音乐播放页面

####6.1在pages/index/index.wxml中实现背景音乐播放页面

<image class="content-gif" src= "/images/save_the_date.gif" /> 
<view class="content-title">邀请函</view> 
<view class=“content-avatar">头像</view>
<view class="content-address">
    <view>我们诚邀您来参加我们的婚礼</view>
    <view>时间：2019年1月28日</view>
    <view>地点：北京市海淀区XX路XX酒店</view>
  </view>

7.一键拨打电话

7.1页面结构图

7.2在pages/index/index.wxml中实现一键拨打电话页面

<view class="content-info">
  <view bindtap="callGroom">
  <view bindtap="callBride">
</view>
callGroom: function () {wx.makePhoneCall({})},
callBride: function () {wx.makePhoneCall({})}

7.3在pages/index/index.wxss中实现一键拨打电话页面样式

swiper { height: 100vh; }
image { width: 100vw; height: 100vh; }