【微信小程序】底部操作菜单与拍照录像
这篇文章要解决三个问题：
- 底部操作菜单
- 自定义按钮“点按拍照，长按拍摄”
- 调用朋友圈的API实现“点按拍照，长按拍摄”
第一部分
当点击“上传资料”按钮的时候，要从底部弹出操作菜单栏。
<button type="primary" bindtap="openActionsheet">上传资料button>
Page({
data: {
},
onLoad: function (options) {
},
openActionsheet: function () {
wx.showActionSheet({
itemList: ['上传图片', '上传视频'],
itemColor: '#007aff',
success: (res) => {
switch (res.tapIndex) {
case 0:
console.log('上传图片');
// 上传接口支持最大20M
this.chooseAndUploadPicture();
break;
case 1:
console.log('上传视频');
// 拍摄视频 支持最长60s 默认720p分辨率 视频大小12M左右
// 选择视频 微信支持最大200M 但我们公司上传接口支持最大20M
this.chooseAndUploadVideo();
break;
default:
break;
}
},
fail: (err) => {
console.log('失败：', err);
}
})
},
chooseAndUploadPicture: function() {
},
chooseAndUploadVideo: function() {
}
})
第二部分
虽然在我们的项目中，要求是上传图片与上传视频分成两个菜单选项操作。
但是我想着是否我也可以实现朋友圈那种“点按拍照，长按摄像”的效果。
原理很简单，点按调用拍照的API，长按调用摄像的API。直接上代码 ~
<camera wx:if="{
{!videoSrc}}" device-position="back" flash="off" binderror="error" style="width: {
{
cameraWidth}}px; height: {
{
cameraHeight}}px;">
<cover-image wx:if="{
{image1Src}}" src='{
{image1Src}}'>cover-image>
<cover-view id="cameraTip">轻触拍照，长按摄像cover-view>
<cover-view id="cameraBtn" bindtouchstart="handleTouchStart" bindtouchend="handleTouchEnd" bindlongpress="handleLongPress" bindtap="handleClick" disabled="true">cover-view>
camera>
<video wx:if="{
{videoSrc}}" src="{
{videoSrc}}" controls>video>
cover-image,video {
margin-top:100%;
position: absolute;
width: 200rpx;
height: 200rpx;
}
#cameraTip {
position: absolute;
right: 50%;
bottom: 25%;
transform: translateX(50%);
font-size: small;
color: aliceblue;
}
#cameraBtn {
position: absolute;
width: 120rpx;
height: 120rpx;
right: 50%;
bottom: 8%;
transform: translateX(50%);
border: 25rpx solid gainsboro;
border-radius: 50%;
background-color: ghostwhite;
}
Page({
/**
* 页面的初始数据
*/
data: {
cameraHeight: '',
cameraWidth: '',
image1Src: '',
videoSrc: ''
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
//调用设置相机大小的方法
this.setCameraSize();
this.ctx = wx.createCameraContext();
},
/**
* 获取系统信息 设置相机的大小适应屏幕
*/
setCameraSize() {
//获取设备信息
const res = wx.getSystemInfoSync();
//获取屏幕的可使用宽高，设置给相机
this.setData({
cameraHeight: res.windowHeight,
cameraWidth: res.windowWidth
})
console.log(res)
},
/**
*拍照的方法
*/
takePhoto() {
this.ctx.takePhoto({
quality: 'high',
success: (res) => {
this.setData({
image1Src: res.tempImagePath
})
},
fail: (err) => {
console.log("拍照失败 ", err);
}
})
},
/**
* 开始录像的方法
*/
startShootVideo() {
console.log("========= 调用开始录像 ===========")
this.ctx.startRecord({
success: (res) => {
wx.showLoading({
title: '正在录像',
})
},
fail: (err) => {
console.log("========= 调用开始录像失败 =========== ", err);
}
})
},
/**
* 结束录像
*/
stopShootVideo() {
console.log("========= 调用结束录像 ===========")
this.ctx.stopRecord({
success: (res) => {
wx.hideLoading();
this.setData({
videoSrc: res.tempVideoPath,
})
},
fail: (err) => {
wx.hideLoading();
console.log("========= 调用结束录像失败 =========== ", err);
}
})
},
//touch start 手指触摸开始
handleTouchStart: function(e) {
this.startTime = e.timeStamp;
console.log(" startTime = " + e.timeStamp);
console.log(" 手指触摸开始 " , e);
},
//touch end 手指触摸结束
handleTouchEnd: function(e) {
this.endTime = e.timeStamp;
console.log(" endTime = " + e.timeStamp);
console.log(" 手指触摸结束 ", e);
if (this.endTime - this.startTime > 350) {
// 长按操作 调用结束录像方法
this.stopShootVideo();
}
},
/**
* 点击按钮 - 拍照
*/
handleClick: function(e) {
console.log("endTime - startTime = " + (this.endTime - this.startTime));
if (this.endTime - this.startTime < 350) {
console.log("点击");
// 点按操作 调用拍照方法
this.takePhoto();
}
},
/**
* 长按按钮 - 录像
*/
handleLongPress: function(e) {
console.log("endTime - startTime = " + (this.endTime - this.startTime));
console.log("长按");
// 长按操作 调用开始录像方法
this.startShootVideo();
},
})
第三部分
上面虽然实现了“点按拍照，长按拍摄”，样式也差不多。
但是，“样式差不多”说明我并没有满意，考虑到长按摄影时还得加那个像进度条一样的东西。
如果能够直接调用朋友圈那个API就好了，后来多次查询搜索，还真有 ~
<button type="primary" bindtap="menu">上传资料button>
...
menu() {
wx.showActionSheet({
itemList: ['拍摄','从相册选择'],
success: (res) => {
switch (res.tapIndex) {
case 0:
this.camera();
break;
case 1:
this.album();
break;
default:
break;
}
}
})
},
// 拍摄时间范围 3s~30s
camera() {
wx.chooseMedia({
mediaType: ['image','video'],
sourceType: ['camera'],
success: (res) => {
console.log(res)
}
})
},
album() {
wx.chooseMedia({
count: 9,
mediaType: ['image','video'],
sourceType: ['album'],
success: (res) => {
console.log(res)
}
})
},