微信小程序实现点击拍照长按录像功能

代码里面注释写的都很详细，直接上代码。官方的组件属性中有触摸开始和触摸结束属性。本功能依靠这些属性实现。

.wxml代码：

<!-- 相机 pages/camera/camera.wxml-->
<!-- 相机 -->
<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">点击/长按</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({/*** 页面的初始数据*/data: {cameraHeight: '',cameraWidth: '',image1Src: '',videoSrc: '',num: 0,},/*** 生命周期函数--监听页面加载*/onLoad: function(options) {//调用设置相机大小的方法this.setCameraSize();this.ctx = wx.createCameraContext();console.log(this.lijiajun)},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function() {},/*** 生命周期函数--监听页面显示*/onShow: function() {},/*** 生命周期函数--监听页面隐藏*/onHide: function() {},/*** 生命周期函数--监听页面卸载*/onUnload: function() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function() {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function() {},/*** 用户点击右上角分享*/onShareAppMessage: function() {},/*** 获取系统信息 设置相机的大小适应屏幕*/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() {//拍照失败console.log("拍照失败");}})},/*** 开始录像的方法*/startShootVideo() {console.log("========= 调用开始录像 ===========")this.ctx.startRecord({success: (res) => {wx.showLoading({title: '正在录像',})},fail() {console.log("========= 调用开始录像失败 ===========")}})},/*** 结束录像*/stopShootVideo() {console.log("========= 调用结束录像 ===========")this.ctx.stopRecord({success: (res) => {wx.hideLoading();this.setData({videoSrc: res.tempVideoPath,})},fail() {wx.hideLoading();console.log("========= 调用结束录像失败 ===========")}})},//touch start 手指触摸开始handleTouchStart:   function(e)  {    this.startTime  =  e.timeStamp;    console.log(" startTime = "  +  e.timeStamp);  console.log(" 手指触摸开始 " ,  e);  console.log(" this " , this);  },//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();},
})

----------------------------- end -----------------------------

微信小程序实现点击拍照长按录像功能相关推荐

微信小程序实现点击拍照以及长按录像功能
话不多说,直接上代码,代码里面注释写的都很详细 wxml文件:  <camera wx:if="{{!videoSrc}}" device- ...
微信小程序结合SpringBoot实现WebSocket长链接
微信小程序结合SpringBoot实现WebSocket长链接引入 WebSocket 微信小程序部分实现 js部分页面部分后端SpringBoot实现 WebSocketConfig.java ...
【uni-app】UniApp实现微信小程序中拨打手机电话和长按加微信客服好友（完整代码示例）
UniApp实现微信小程序中拨打手机电话和长按加微信客服好友(完整代码示例) 一.service.Vue <template><view>& ...
微信小程序开发——点击按钮获取用户授权没反应或反应很慢的解决方法
微信小程序开发--点击按钮获取用户授权没反应或反应很慢的解决方法参考文章: (1)微信小程序开发--点击按钮获取用户授权没反应或反应很慢的解决方法 (2)https://www.cnblogs.co ...
微信小程序实现点击导航条切换页面
本文实例为大家分享了微信小程序实现点击导航条切换页面的具体代码,供大家参考,具体内容如下我录制了个gif如下,黄色部分是不可以滑动的,蓝色部分可以滑动. 代码解说: 首先我在js自定义了navSta ...
微信小程序——绑定点击事件
微信小程序出来了那么长时间了,之前一直准备升学和毕业设计(过段时间我要写一写我的毕业设计),最近马上毕业了,终于有时间来研究一下了,先从最简单的点击事件开始吧! 首先我们在test.wxml中加入以下 ...
微信小程序 map 点击图标回到自己的位置（不使用controls控件）
先上效果图: 原由(必看): 本来微信小程序的map 里面的 controls控件可以轻松实现,但是官方说要废弃了,说采用 cover-view代替,其实就是一个点击事件.用不用cover-view ...
按钮点击_如何设置微信小程序按钮点击事件？
当我们需要点击按钮实现一个操作时,我们应该怎么设置?这里给大家介绍两种方法: 方法一:使用小程序模板,无需懂技术. 这种方法比较简单,你只需要选一个比较简单的小程序模板,比如「上线了」sxl.cn,在 ...
微信开发工具button跳转页面_微信小程序按钮点击跳转页面详解
微信小程序中,按钮也是标签,它通过bindtap属性绑定点击事件: 然后在js里面注册这个回调函数: 回调函数里面通过 wx.navigateTo({ url: '/pages/index/talkP ...

微信小程序实现点击拍照长按录像功能

微信小程序实现点击拍照长按录像功能

.wxml代码：

.wxss代码：

.js代码:

微信小程序实现点击拍照长按录像功能相关推荐

最新文章

热门文章