微信小程序实战-第4章 邀请函项目

微信小程序实战-第4章 邀请函项目

4.1 开发前准备

4.1.1项目展示

婚礼邀请函小程序由5个页面组成，分别是邀请函页面、照片页面、美好时光页面、婚礼地点页面、宾客信息页面。效果展示图如下：

下面针对5个页面的功能作简要介绍：

• 邀请函页面：新郎和新娘的电话、婚礼地点、婚礼时间。
• 照片页面：新郎和新娘的幸福照。
• 美好时光页面：采用视频的方式记录一对新人的相爱历程。
• 地图页面：通过导航查看婚礼地点的路线图。
• 宾客信息页面：参加婚礼的宾客填写个人信息，送一些祝福语等。

4.1.2项目分析

4.1.3项目初始化

在微信开发者工具中创建一个空白项目。创建成功后，新建app.json文件，在该文件中定义本项目中的页面路径，代码如下：

 {
   "pages": [
    “pages/index/index”,   // 邀请函页面
        …
    “pages/guest/guest“   // 宾客信息页面
  ]}

在app.json文件中定义项目导航栏样式，代码如下：

"window": {
   
    "backgroundTextStyle": "light", 
    "navigationBarBackgroundColor": "#ff4c91", 
    "navigationBarTextStyle": "white", 
    "enablePullDownRefresh": false
  }

在app.json文件中定义项目底部标签栏，代码示例如下：

"tabBar": {
   
"list": [
    {
   
      "pagePath": "pages/index/index",
      "iconPath": "images/invite.png", 
      "selectedIconPath": "images/invite.png",
      "text": "邀请函"
    }…]
}

4.2 邀请函页面

4.2.1任务分析

邀请函页面的任务需求如下：

• 背景音乐播放：页面的右上角有一个背景音乐播放按钮，用于控制音乐播放状态，单击按钮播放音乐，再次单击按钮暂停音乐。
• 新人信息：页面中展示新娘和新郎的头像、姓名信息。
• 婚礼信息：页面展示婚礼时间及地点。

4.2.2背景音乐播放

index.wxml

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

index.js

index.js

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

4.2.3页面结构和样式

4.2.4一键拨打电话

index.wxml

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

4.3 照片页面

4.3.1任务分析

在本任务中，将会完成照片页面的开发，该页面采用纵向轮播的方式展示图片，可以通过单击指示面板的圆点切换到相对应的图片。
功能需求如下：

• 每一张轮播的图片都占满显示区域，滑动屏幕可以实现图片的纵向切换。
• 在右侧纵向显示指点面板，单击圆点可切换显示状态。
• 在用户无操作时，可以实现自动无缝轮播。

4.3.2实现纵向轮播图

picture.wxml

 <swiper indicator-color="white" indicator-active-color="#ff4c91"
indicator-dots autoplay interval="3500" duration="1000" vertical circular>
  <swiper-item wx:for="{
   {imgUrls}}" wx:key="*this">
    <image src="{
   {item}}" mode="aspectFill" />
  </swiper-item>
</swiper>

picture.wxss

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

picture.js

data: {
   
    imgUrls: [
      '/images/timg1.jpg', '/images/timg2.jpg',
      '/images/timg3.jpg', '/images/timg4.jpg'
    ]
  }

4.4 美好时光页面

4.4.1任务分析

在本任务中，将会完成美好时光页面的开发，该页面采用视频的方式来记录一对新人的难忘时光。
任务需求如下：

• 使用video组件实现视频播放。
• 使用腾讯视频插件实现视频播放。

4.4.2前导知识

video.wxml

<video id="myVideo" src="{
   {src}}" danmu-list="{
   {danmuList}}"
enable-danmu danmu-btn controls></video>
<input bindblur="bindInputBlur&