第7章 ：视频展示页开发（7-37 微信api菜单操作 — 7-41 下载视频到本地）
学习目标：
7-37 微信api菜单操作
7-38 保存举报信息接口讲解
7-39 举报前端开发与联调
7-40 分享给好友或微信群
7-41 下载视频到本地
学习内容：
7-37 微信api菜单操作
使用API：显示操作菜单
1、videoInfo.wxml中代码如下：绑定了shareMe事件：
<!-- 分享按钮 -->
<cover-image class="size-me" src='../resource/images/share.png' style='margin-top:30rpx;' bindtap='shareMe'></cover-image>
2、在videoInfo.js中写shareMe的有关函数：
shareMe: function() {
var me = this;
var user = app.getGlobalUserInfo();
wx.showActionSheet({
itemList: ['下载到本地', '举报用户', '分享到朋友圈', '分享到QQ空间', '分享到微博'],
success: function(res) {
console.log(res.tapIndex);
}
})
},
7-38 保存举报信息接口讲解
1、在UserController.java编写举报接口：
@PostMapping("/reportUser")
public IMoocJSONResult reportUser(@RequestBody UsersReport usersReport) throws Exception {
// 保存举报信息
userService.reportUser(usersReport);
return IMoocJSONResult.errorMsg("举报成功...有你平台变得更美好...");
}
2、可以看到之前使用逆向生成工具所创建的pojo实体类：UsersReport.java的代码如下：
package com.asayi.pojo;
import java.util.Date;
import javax.persistence.*;
@Table(name = "users_report")
public class UsersReport {
@Id
private String id;
/**
* 被举报用户id
*/
@Column(name = "deal_user_id")
private String dealUserId;
@Column(name = "deal_video_id")
private String dealVideoId;
/**
* 类型标题，让用户选择，详情见 枚举
*/
private String title;
/**
* 内容
*/
private String content;
/**
* 举报人的id
*/
private String userid;
/**
* 举报时间
*/
@Column(name = "create_date")
private Date createDate;
/**
* @return id
*/
public String getId() {
return id;
}
/**
* @param id
*/
public void setId(String id) {
this.id = id;
}
public String getDealUserId() {
return dealUserId;
}
public void setDealUserId(String dealUserId) {
this.dealUserId = dealUserId;
}
public String getDealVideoId() {
return dealVideoId;
}
public void setDealVideoId(String dealVideoId) {
this.dealVideoId = dealVideoId;
}
public String getTitle() {
return title;
}
public void setTitle(String title) {
this.title = title;
}
/**
* @return content
*/
public String getContent() {
return content;
}
/**
* @param content
*/
public void setContent(String content) {
this.content = content;
}
/**
* @return userid
*/
public String getUserid() {
return userid;
}
/**
* @param userid
*/
public void setUserid(String userid) {
this.userid = userid;
}
/**
* @return create_date
*/
public Date getCreateDate() {
return createDate;
}
/**
* @param createDate
*/
public void setCreateDate(Date createDate) {
this.createDate = createDate;
}
}
title是前端进行选择的，然后传入到后端：
在app.js中定义了：
reportReasonArray: [
"色情低俗",
"政治敏感",
"涉嫌诈骗",
"辱骂谩骂",
"广告垃圾",
"诱导分享",
"引人不适",
"过于暴力",
"违法违纪",
"其它原因"
]
3、在UserService.java代码如下：
/**
* @Description: 举报用户
*/
public void reportUser(UsersReport userReport);
UserServiceImpl.java代码如下：
@Transactional(propagation = Propagation.REQUIRED)
@Override
public void reportUser(UsersReport userReport) {
String urId = sid.nextShort();
userReport.setId(urId);
userReport.setCreateDate(new Date());
usersReportMapper.insert(userReport);
}
7-39 举报前端开发与联调
举报的页面如下：
report.wxml代码如下：
<view>
<form bindsubmit='submitReport'>
<view class='container-reason'>
<label class='label'>举报理由:</label>
<picker name="reasonIndex" value="{
{index}}" range="{
{reportReasonArray}}" bindchange="changeMe">
<view class="picker">
{
{
reasonType}}
</view>
</picker>
</view>
<view class='container-content'>
<label class='label'>举报描述（选填）:</label>
<textarea name="reasonContent" class='content' placeholder='请详细说明举报原因...'>
</textarea>
</view>
<view class='container-tips'>
<image src='../resource/images/report_face.png' class='report-face'></image>
收到举报后，我们会在12小时内处理，感谢您的举报，互联网环境因你更美好！~~
</view>
<view>
<button class="submitBtn" type="" form-type='submit'>提 交</button>
</view>
</form>
</view>
在report.js中编写举报代码进行前后端联调：
submitReport:function(e) {
var me = this;
var reasonIndex = e.detail.value.reasonIndex;
var reasonContent = e.detail.value.reasonContent;
var user = app.getGlobalUserInfo();
var currentUserId = user.id;
if (reasonIndex == null || reasonIndex == '' || reasonIndex == undefined) {
wx.showToast({
title: '选择举报理由',
icon: "none"
})
return;
}
var serverUrl = app.serverUrl;
wx.request({
url: serverUrl + '/user/reportUser',
method: 'POST',
data: {
dealUserId: me.data.publishUserId,
dealVideoId: me.data.videoId,
title: app.reportReasonArray[reasonIndex],
content:reasonContent,
userid: currentUserId
},
header: {
'content-type': 'application/json', // 默认值
'userId':user.id,//用于安全验证的信息
'userToken':user.userToken,
},
success:function(res) {
wx.showToast({
title: res.data.msg,
duration: 2000,
icon: 'none',
success: function() {
wx.navigateBack();
}
})
}
})
}
在举报完成后会在后面的管理平台对举报视频进行禁播，这样就显示不了了。
7-40 分享给好友或微信群
接口被微信刪除了。。。
7-41 下载视频到本地
在videoinfo.js代碼如下：
if (res.tapIndex == 0) {
//下载
wx.showLoading({
title: '下载中...',
})
wx.downloadFile({
url: app.serverUrl + me.data.videoInfo.videoPath,
success: function (res) {
// 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
if (res.statusCode === 200) {
console.log(res.tempFilePath);
wx.saveVideoToPhotosAlbum({
filePath: res.tempFilePath,
success:function(res) {
console.log(res.errMsg)
wx.hideLoading();
}
})
}
}
})