微信小程序实验(三)

（六）婚礼邀请函（照片+宾客信息）

1. 实验目的：

通过本实验，学生将了解和掌握一般微信小程序的复杂页面结构设计方法，其中包括页面结构.wxml文件中元素的条件渲染+列表渲染方法，以及在.js文件中的代码里编写具体的事件处理函数。

2 实验平台：

硬件：个人笔记本电脑

软件：微信小程序开发工具 

3. 实验内容和步骤：

3.1 修改播放列表页面结构文件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>

3.2 修改主页面样式文件picture.wxss，从而实现照片页面的样式

swiper {
height: 100vh;
}

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

 3.3 修改播放列表页面结构文件guest.wxml，完成宾客页面结构设计

<!-- 页面的背景图片 -->
<image class="bg" src="/images/bj_2.png"></image>
<!-- 表单 -->
<form bindsubmit="formSubmit">
<!-- 表单内容 -->
<view class="content">
<!-- 姓名 -->
<view class="input">
<input name="name" bindblur="nameChange" bindtap="allowSubscribe" placeholder-class="phcolor" placeholder="输入您的姓名" />
</view>
<!-- 手机号码 -->
<view class="input">
<input name="phone" bindblur="phoneChange" placeholder-class="phcolor" placeholder="输入您的手机号码" />
</view>
<!-- 性别 -->
<view class="radio">
<text>请选择您的性别：</text>
<radio-group>
<radio>男</radio>
<radio>女</radio>
</radio-group>
</view>
<!-- 需要的点心 -->
<view class="check">
<text>请选择您需要的点心：</text>
<checkbox-group>
<checkbox>蛋糕</checkbox>
<checkbox>甜甜圈</checkbox>
<checkbox>巧克力</checkbox>
</checkbox-group>
</view>
<!-- 提交按钮 -->
<button form-type="submit">提交</button>
</view>
</form>

3.4 修改主页面样式文件guest.wxss，从而实现宾客页面的样式 

.bg {
width: 100vw;
height: 100vh;
}
.content {
width: 80vw;
position: fixed;
left: 10vw;
bottom: 6vh;
}
.content .input {
font-size: 2.8vh;
border: 1rpx solid #ff4c91;
border-radius: 10rpx;
padding: 1.5vh 40rpx;
margin-bottom: 1.5vh;
color: #ff4c91;
}
.content button {
font-size: 3vh;
height: 7.5vh;
line-height: 7.5vh;
background: #ff4c91;
color: #fff;
}
.content .phcolor {
color: #ff4c91;
}

3.5 修改页面逻辑文件guest.js，从而实现宾客表单的提交

submit: function(e) {
var name = e.detail.value.name
var phone = e.detail.value.phone
if (this.checkName(name) && this.checkPhone(phone)) {
// 在此处可编写代码将e.detail.value提交到服务器
wx.showToast({title:'提交成功',icon:'success',duration:1500})
}
}

（七）婚礼邀请函（美好时光+服务端）

1. 实验目的：

通过本实验，学生将了解和掌握一般微信小程序的复杂页面结构设计方法，其中包括页面结构.wxml文件中元素的条件渲染+列表渲染方法，在.js文件中的代码里编写具体的事件处理函数，以及在服务端编写处理小程序端相应请求的函数。

2 实验平台：

硬件：个人笔记本电脑

软件：微信小程序开发工具 

3. 实验内容和步骤：

3.1 修改播放列表页面结构文件video.wxml，完成美好时光页面结构设计

<view class="video-list" wx:for="{{movieList}}" wx:key="user">
<view class="video-title">标题：{{item.title}}</view>
<view class="video-time">时间：{{formatData(item.create_time)}}</view>
<video src="{{item.src}}" objectFit="fill"></video> 
</view>
<view class="video-list">
<view class="video-title">标题：腾讯视频插件演示</view>
<view class="video-time">时间：2019-1-1 10:11:12</view>
<txv-video vid="y0371c5p9cc" playerid="txv1"></txv-video>
</view>
<!--时间格式-->
<wxs module="formatData">
module.exports = function(timestamp) {
var date = getDate(timestamp)
var y = date.getFullYear()
var m = date.getMonth() + 1
var d = date.getDate()
var h = date.getHours()
var i = date.getMinutes()
var s = date.getSeconds()
return y + '-' + m + '-' + d + ' ' + h + ':' + i + ':' + s
}
</wxs>

3.2 修改主页面样式文件video.wxss，从而实现美好时光页面的样式

/* “美好时光”页面中的video-list组件的样式 */
.video-list {
box-shadow: 0 8rpx 17rpx 0 rgba(7, 17, 27, 0.1);
margin: 10rpx 25rpx;
padding: 20rpx;
border-radius: 10rpx;
margin-bottom: 30rpx;
background: #fff;
}
/* 标题和拍摄日期区域的样式 */
.video-title {
font-size: 35rpx;
color: #333;
}
.video-time {
font-size: 13px;
color: #979797;
}
/* 视频区域的样式 */
.video-list video {
width: 100%;
margin-top: 20rpx;
}

3.3 修改服务端逻辑文件index.js，从而实现美好时光页面中视频的发送以及参会宾客信息的收取。

bgm: null,
music_url: 'http://localhost:3000/1.mp3',
music_coverImgUrl: 'http://localhost:3000/cover.jpg',
onReady: function() {
// 创建getBackgroundAudioManager实例对象
this.bgm = wx.getBackgroundAudioManager()
// 音频标题
this.bgm.title = 'merry 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
},
// 播放器的单击事件
play: function() {
if (this.data.isPlayingMusic) {
this.bgm.pause()
} else {
this.bgm.play()
}
this.setData({
isPlayingMusic: !this.data.isPlayingMusic
})
},
// 一键拨打电话
// 新郎电话
callGroom: function() {
wx.makePhoneCall({
phoneNumber: '13700000000'
})
},