微信小程序?qū)崿F(xiàn)點(diǎn)擊拍照長按錄像功能
發(fā)布時(shí)間：2021-07-08 08:51 所屬欄目：小程序開發(fā)教程
代碼里面注釋寫的都很詳細(xì)，直接上代碼。官方的組件屬性中有觸摸開始和觸摸結(jié)束屬性。本功能依靠這些屬性實(shí)現(xiàn)。
.wxml代碼：
<!-- 相機(jī) pages/camera/camera.wxml-->
<!-- 相機(jī) -->
<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>
<!-- 拍照按鈕 -->
<button id='btn-photo-video' bindtouchstart="handleTouchStart" bindtouchend="handleTouchEnd" bindlongpress="handleLongPress" bindtap="handleClick">
點(diǎn)擊/長按</button>
</cover-view>
</camera>
<video wx:if="{{videoSrc}}" src="{{videoSrc}}" controls></video>
|
.wxss代碼：
/* pages/camera/camera.wxss */
cover-image,video {
margin-top:100%;
position: absolute;
width: 200rpx;
height: 200rpx;
}
#btn-photo-video{
/* position: absolute; */
margin-top:100%;
width: 242rpx;
left: 2%;
}
|
.js代碼:
// pages/camera/camera.js
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
cameraHeight: '',
cameraWidth: '',
image1Src: '',
videoSrc: '',
num: 0,
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad: function(options) {
//調(diào)用設(shè)置相機(jī)大小的方法
this.setCameraSize();
this.ctx = wx.createCameraContext();
console.log(this.lijiajun)
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
*/
onReady: function() {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面顯示
*/
onShow: function() {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面隱藏
*/
onHide: function() {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面卸載
*/
onUnload: function() {
},
/**
* 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作
*/
onPullDownRefresh: function() {
},
/**
* 頁面上拉觸底事件的處理函數(shù)
*/
onReachBottom: function() {
},
/**
* 用戶點(diǎn)擊右上角分享
*/
onShareAppMessage: function() {
},
/**
* 獲取系統(tǒng)信息 設(shè)置相機(jī)的大小適應(yīng)屏幕
*/
setCameraSize() {
//獲取設(shè)備信息
const res = wx.getSystemInfoSync();
//獲取屏幕的可使用寬高，設(shè)置給相機(jī)
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() {
//拍照失敗
console.log("拍照失敗");
}
})
},
/**
* 開始錄像的方法
*/
startShootVideo() {
console.log("========= 調(diào)用開始錄像 ===========")
this.ctx.startRecord({
success: (res) => {
wx.showLoading({
title: '正在錄像',
})
},
fail() {
console.log("========= 調(diào)用開始錄像失敗 ===========")
}
})
},
/**
* 結(jié)束錄像
*/
stopShootVideo() {
console.log("========= 調(diào)用結(jié)束錄像 ===========")
this.ctx.stopRecord({
success: (res) => {
wx.hideLoading();
this.setData({
videoSrc: res.tempVideoPath,
})
},
fail() {
wx.hideLoading();
console.log("========= 調(diào)用結(jié)束錄像失敗 ===========")
}
})
},
//touch start 手指觸摸開始
handleTouchStart: function(e) {
this.startTime = e.timeStamp;
console.log(" startTime = " + e.timeStamp);
console.log(" 手指觸摸開始 " , e);
console.log(" this " , this);
},
//touch end 手指觸摸結(jié)束
handleTouchEnd: function(e) {
this.endTime = e.timeStamp;
console.log(" endTime = " + e.timeStamp);
console.log(" 手指觸摸結(jié)束 ", e);
//判斷是點(diǎn)擊還是長按 點(diǎn)擊不做任何事件，長按 觸發(fā)結(jié)束錄像
if (this.endTime - this.startTime > 350) {
//長按操作 調(diào)用結(jié)束錄像方法
this.stopShootVideo();
}
},
/**
* 點(diǎn)擊按鈕 - 拍照
*/
handleClick: function(e) {
console.log("endTime - startTime = " + (this.endTime - this.startTime));
if (this.endTime - this.startTime < 350) {
console.log("點(diǎn)擊");
//調(diào)用拍照方法
this.takePhoto();
}
},
/**
* 長按按鈕 - 錄像
*/
handleLongPress: function(e) {
console.log("endTime - startTime = " + (this.endTime - this.startTime));
console.log("長按");
// 長按方法觸發(fā)，調(diào)用開始錄像方法
this.startShootVideo();
},
})
|
易優(yōu)小程序（企業(yè)版）+靈活api+前后代碼開源
碼云倉庫:
本文地址：http://www.u-renovate.com/wxmini/doc/course/27071.html 復(fù)制鏈接
如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢：800182392 點(diǎn)擊咨詢
