Personal information: users upload short videos. Source code: https://github.com/limingios/wxProgram.git wx-springboot and No.15
Business Process
- User selects video (10 second limit), can also shoot through the camera
- Open to select background music.
- You can choose music or not enter the description of the video.
- controller upload video
- Save a screenshot of the video
- Whether the user chooses background music
7.1 Yes: directly save video
7.2 No: merge video and background music, save video
WeChat plugin
Official introduction: https://developers.weixin.qq.com/miniprogram/dev/api/media-video.html#wxchoosevideoobject
- Code modification
> You can get the length, width, height, screenshot of the video, the temporary path and duration of the video obtained through the WeChat component. Then you can judge whether uploading is allowed for these.
// pages/mine/mine.js
const app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
faceImage: "../../resource/images/noneface.png",
nickname: "昵称",
fansCounts: 0,
followCounts: 0,
receiveLikeCounts: 0,
},
/**
* 用户注销
*/
logout:function(e){
var user = app.userInfo;
wx.showLoading({
title: '正在注销中。。。'
});
wx.request({
url: app.serverUrl + "/logout?userId="+user.id,
method: "POST",
header: {
'content-type': 'application/json' // 默认值
},
success: function (res) {
console.log(res.data);
var status = res.data.status;
wx.hideLoading();
if (status == 200) {
wx.showToast({
title: "用户注销成功~！",
icon: 'none',
duration: 3000
})
app.userInfo = null;
wx.redirectTo({
url: '../userRegister/userRegister',
})
} else if (status == 500) {
wx.showToast({
title: res.data.msg,
icon: 'none',
duration: 3000
})
}
}
})
},
/**
* 头像上传
*/
uploadFace:function(e){
var user = app.userInfo;
var me = this;
wx.chooseImage({
count: 1, // 默认9
sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {
// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
var tempFilePaths = res.tempFilePaths
if (tempFilePaths.length>0){
console.log(tempFilePaths[0]);
wx.uploadFile({
url: app.serverUrl + "/user/uploadFace?userId=" + user.id, //仅为示例，非真实的接口地址
filePath: tempFilePaths[0],
name: 'file',
success: function (res) {
var data = JSON.parse(res.data);
console.log(data);
wx.hideLoading();
if (data.status == 200) {
wx.showToast({
title: "用户上传成功~！",
icon: 'none',
duration: 3000
})
me.setData({
faceUrl: app.serverUrl+data.data
})
} else if (data.status == 500) {
wx.showToast({
title: data.msg,
icon: 'none',
duration: 3000
})
}
}
})
}
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var me = this;
wx.showLoading({
title: '正在获取用户信息。。。'
});
wx.request({
url: app.serverUrl + "/user/queryByUserId?userId=" + app.userInfo.id,
method: "POST",
header: {
'content-type': 'application/json' // 默认值
},
success: function (res) {
console.log(res.data);
var status = res.data.status;
var userInfo = res.data.data;
wx.hideLoading();
var faceImage = me.data.faceUrl;
if (userInfo.faceImage != null && userInfo.faceImage != '' && userInfo.faceImage!=undefined){
faceImage = app.serverUrl +userInfo.faceImage;
}
me.setData({
faceImage: faceImage,
fansCounts: userInfo.fansCounts,
followCounts: userInfo.followCounts,
receiveLikeCounts: userInfo.receiveLikeCounts,
nickname: userInfo.nickname
})
}
})
},
uploadVideo:function(e){
var me = this
wx.chooseVideo({
sourceType: ['album', 'camera'],
success: function (res) {
console.log(res);
var tempDuration = res.duration;
var tempHeight = res.height;
var tempWidth = res.width;
var tempSize = res.size;
var tempFilePath = res.tempFilePath;
var tempFilePath = res.thumbTempFilePath;
if (tempDuration>20){
wx.showToast({
title: "视频太长了老铁不稳~",
icon: 'none',
duration: 3000
})
} else if (tempDuration <5){
wx.showToast({
title: "视频太短了不到5秒。老铁不稳~",
icon: 'none',
duration: 3000
})
} else{
//进行上传
}
}
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
- Add interface to select background music
Users can choose videos, and then we choose the interface of Beijing Music. The user selects music, or the user can submit without selecting music or submitting without selecting music. Official interface: https://developers.weixin.qq.com/miniprogram/dev/component/audio.html
- New page
// pages/mine/mine.js
const app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
faceImage: "../../resource/images/noneface.png",
nickname: "昵称",
fansCounts: 0,
followCounts: 0,
receiveLikeCounts: 0,
},
/**
* 用户注销
*/
logout:function(e){
var user = app.userInfo;
wx.showLoading({
title: '正在注销中。。。'
});
wx.request({
url: app.serverUrl + "/logout?userId="+user.id,
method: "POST",
header: {
'content-type': 'application/json' // 默认值
},
success: function (res) {
console.log(res.data);
var status = res.data.status;
wx.hideLoading();
if (status == 200) {
wx.showToast({
title: "用户注销成功~！",
icon: 'none',
duration: 3000
})
app.userInfo = null;
wx.redirectTo({
url: '../userRegister/userRegister',
})
} else if (status == 500) {
wx.showToast({
title: res.data.msg,
icon: 'none',
duration: 3000
})
}
}
})
},
/**
* 头像上传
*/
uploadFace:function(e){
var user = app.userInfo;
var me = this;
wx.chooseImage({
count: 1, // 默认9
sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {
// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
var tempFilePaths = res.tempFilePaths
if (tempFilePaths.length>0){
console.log(tempFilePaths[0]);
wx.uploadFile({
url: app.serverUrl + "/user/uploadFace?userId=" + user.id, //仅为示例，非真实的接口地址
filePath: tempFilePaths[0],
name: 'file',
success: function (res) {
var data = JSON.parse(res.data);
console.log(data);
wx.hideLoading();
if (data.status == 200) {
wx.showToast({
title: "用户上传成功~！",
icon: 'none',
duration: 3000
})
me.setData({
faceUrl: app.serverUrl+data.data
})
} else if (data.status == 500) {
wx.showToast({
title: data.msg,
icon: 'none',
duration: 3000
})
}
}
})
}
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var me = this;
wx.showLoading({
title: '正在获取用户信息。。。'
});
wx.request({
url: app.serverUrl + "/user/queryByUserId?userId=" + app.userInfo.id,
method: "POST",
header: {
'content-type': 'application/json' // 默认值
},
success: function (res) {
console.log(res.data);
var status = res.data.status;
var userInfo = res.data.data;
wx.hideLoading();
var faceImage = me.data.faceUrl;
if (userInfo.faceImage != null && userInfo.faceImage != '' && userInfo.faceImage!=undefined){
faceImage = app.serverUrl +userInfo.faceImage;
}
me.setData({
faceImage: faceImage,
fansCounts: userInfo.fansCounts,
followCounts: userInfo.followCounts,
receiveLikeCounts: userInfo.receiveLikeCounts,
nickname: userInfo.nickname
})
}
})
},
uploadVideo:function(e){
var me = this
wx.chooseVideo({
sourceType: ['album', 'camera'],
success: function (res) {
console.log(res);
var tempDuration = res.duration;
var tempHeight = res.height;
var tempWidth = res.width;
var tempSize = res.size;
var tempFilePath = res.tempFilePath;
var thumbTempFilePath = res.thumbTempFilePath;
if (tempDuration>20){
wx.showToast({
title: "视频太长了老铁不稳~",
icon: 'none',
duration: 3000
})
} else if (tempDuration <5){
wx.showToast({
title: "视频太短了不到5秒。老铁不稳~",
icon: 'none',
duration: 3000
})
} else{
wx.navigateTo({
url: '../chooseBgm/chooseBgm?tempDuration=' + tempDuration
+ '&tempHeight=' + tempHeight
+ '&tempWidth=' + tempWidth
+ '&tempSize=' + tempSize
+ '&tempFilePath=' + tempFilePath
+ '&thumbTempFilePath=' + thumbTempFilePath
})
}
}
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
- chooseBgm.wxml
<view>
<form bindsubmit='upload'>
<radio-group name="bgmId">
<block wx:for="{{bgmList}}">
<view class='container'>
<audio name="{{item.name}}" author="{{item.author}}" src="{{serverUrl}}{{item.path}}" style='width:300px' id="myAudio" controls loop></audio>
<radio style='margin-top:20px;' value='{{item.id}}'></radio>
</view>
</block>
</radio-group>
<view class="inputView">
<label class="loginLabel">视频描述：</label>
<input name="desc" class="inputText" placeholder="说点什么吧" />
</view>
<!-- 提交 -->
<button class="submitBtn" type="primary" form-type='submit'>上传视频</button>
<button class="gobackBtn" type="warn" form-type='reset'>重置</button>
</form>
</view>
- chooseBgm.js
const app = getApp()
Page({
data: {
poster: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000',
name: '此时此刻',
author: '许巍',
src: 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46',
serverUrl:"",
videoParams:{}
},
onLoad:function(params){
var me = this;
console.log(params);
me.setData({
videoParams:params
})
wx.showLoading({
title: '请等待...',
});
var serverUrl = app.serverUrl;
// 调用后端
wx.request({
url: serverUrl + '/bgm/list',
method: "POST",
header: {
'content-type': 'application/json', // 默认值
},
success: function (res) {
console.log(res.data);
wx.hideLoading();
if (res.data.status == 200) {
var bgmList = res.data.data;
me.setData({
bgmList: bgmList,
serverUrl: serverUrl
});
} else if (res.data.status == 502) {
wx.showToast({
title: res.data.msg,
duration: 2000,
icon: "none",
success: function () {
wx.redirectTo({
url: '../userLogin/login',
})
}
});
}
}
})
},
upload:function(e){
var me = this;
var datasParams = me.data.videoParams;
var bgmId = e.detail.value.bgmId;
var desc = e.detail.value.desc;
console.log("bgmId:"+bgmId);
console.log("desc:" + desc);
var tempDuration = datasParams.tempDuration;
var tempHeight = datasParams.tempHeight;
var tempWidth = datasParams.tempWidth;
var tempSize = datasParams.tempSize;
var tempFilePath = datasParams.tempFilePath;
var thumbTempFilePath = datasParams.thumbTempFilePath;
var userId = app.userInfo.id;
debugger;
wx.showLoading({
title: '请等待...',
});
var serverUrl = app.serverUrl;
// 调用后端
wx.uploadFile({
url: serverUrl + '/video/upload',
filePath: tempFilePath,
formData:{
userId: userId,
bgmId: bgmId,
videoSeconds: tempDuration,
videoWidth: tempWidth,
videoHeight: tempHeight,
desc: desc,
},
name: 'file',
success:function(res){
console.log(res);
wx.hideLoading();
}
})
}
})
Backend development
The back-end interface is on a server, and the back-end web is on a server. The back-end web upload applet needs to be synchronized to a server where the back-end interface is located. We choose zokeeper. Talk later
- add in service
BgmService.java
package com.idig8.service;
import java.util.List;
import com.idig8.pojo.Bgm;
public interface BgmService {
/**
* 获取所有的Bgm列表
* @return
*/
public List<Bgm> queryBgmList();
}
BgmServiceImpl.java
package com.idig8.service.Impl;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Propagation;
import org.springframework.transaction.annotation.Transactional;
import com.idig8.mapper.BgmMapper;
import com.idig8.pojo.Bgm;
import com.idig8.service.BgmService;
@Service
public class BgmServiceImpl implements BgmService {
@Autowired
private BgmMapper bgmMapper;
@Transactional(propagation =Propagation.SUPPORTS)
@Override
public List<Bgm> queryBgmList(){
return bgmMapper.selectAll();
}
}
BgmController.java
package com.idig8.controller;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import com.idig8.service.BgmService;
import com.idig8.utils.JSONResult;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
@RestController
@Api(value="背景音乐接口",tags={"背景音乐接口的controller"})
@RequestMapping(value = "/bgm")
public class BgmController extends BasicController{
@Autowired
private BgmService bgmService;
@ApiOperation(value="获取所有背景音乐",notes="通过获取所有背景音乐")
@PostMapping("/list")
public JSONResult list() {
return JSONResult.ok(bgmService.queryBgmList());
}
}
The interface has been verified by swagger.
The error of net :: ERR_INSUFFICIENT_RESOURCES will be reported in the applet development environment. In the real machine, this error will not occur, just ignore it.
PS: Pass the video information through the personal page, develop the background music and description of the new interface, and finally upload the file information to the background function has been developed.
