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

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

.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 -----------------------------

微信小程序实现点击拍照长按录像功能的更多相关文章

  1. 微信小程序区分点击,长按事件

    在上代码之前,微信小程序点击事件,长按事件的触发顺序需要我们了解一下下 事务分类 touchstart:手指触摸 longtap:手指触摸后后,超过350ms离开 touchend:手指触摸动作结束 ...

  2. 微信小程序开发——点击按钮获取用户授权没反应或反应很慢的解决方法

    异常描述: 点击按钮获取用户手机号码,有的时候会出现点击无反应或很久之后才弹出用户授权获取手机号码的弹窗,这种情况下,也会出现点击穿透的问题(详见:微信小程序开发——连续快速点击按钮调用小程序api返 ...

  3. 微信小程序ios点击状态栏返回顶部不好使

    最近做了一款微信小程序,各方面感觉都很完美(萝卜一直这么自信),今天设计总监告诉我你的小程序怎么返回顶部不好使呀,吓得我赶紧拿手机试试,没毛病啊,我手机(苦逼的安卓机)上点两下就回去了呀,遂去找他理论 ...

  4. 微信小程序开发——点击按钮退出小程序的实现

    微信小程序官方是没有提供退出的API的,但是在navigator这个组件中,是有退出这个功能的:详情参考官方文档:navigator.示例代码:1 navigator open-type=" ...

  5. 微信小程序:点击预览图片

    在开发微信小程序时,开发人员会参考着小程序api来开发小程序,但有的时候根据情况不同很容易出现bug,以下是我在开发小程序时出现的各种bug,在开发时有需要预览图片. 1.xml <view c ...

  6. 微信小程序开发——点击防重的解决方案

    对于一些涉及后端接口请求的单击事件,不论后端是否做了请求限制,前端还是有必要进行点击防重处理的. 这样既能减少对服务器端的压力,也能有效防止因重复请求而造成一些不可预期的异常. 尤其是接口请求结果处理 ...

  7. 微信小程序:点击预览大图功能

    点击预览大图功能 1. 给轮播图swiper-item绑定点击事件 2. 预览功能的本质是调用了小程序的api:previewImage 微信公众号----文档----开发----API----媒体- ...

  8. 微信小程序之点击列表的item带参数跳转界面

    1.在js文件里写个界面跳转的事件处理函数gotableinfo,var index = parseInt(e.currentTarget.dataset.index); 为获取当前点击列表的下脚标, ...

  9. 微信小程序--预览previewImage(长按保存图片)

    最近开发小程序,想实现二维码图片长按保存,发现无法保存,只能让图片先预览,再保存.注意:只有太阳码才有长按保存和识别功能,普通二维码只有长按保存功能. <image class='banner' ...

随机推荐

  1. 去除TextView设置lineSpacingExtra后,最后一行多出的空白

    转载请标明出处:https://www.cnblogs.com/tangZH/p/11985745.html 有些手机中,给TextView设置lineSpacingExtra后会出现最后一行的文字也 ...

  2. linux 删除.svn文件

    linux删除当前目录及其子目录下的.svn文件,linux下删除全部的.svn文件 find . -name "*.svn" -type d -print -exec rm -r ...

  3. webpack 配置babel-loader babel7

    babel 7版本配置 在webpack中 默认只能处理部分 ES6的新语法,一些更高级的ES6或ES7的语法,webpack是处理不了的这个时候就需要借助第三方的loader 来帮助webpack ...

  4. python3内置函数回忆

    1.数学运算类 # 1.数学运算类 # abs:计算绝对值 print(abs(-23)) # divmod,返回一个tuple,第一个值为商,第二个值为余数 print(divmod(10,4)) ...

  5. Java 8——重复注解和注解的作用范围的扩大化

    一.重复注解 在某些情况下,希望将相同的注解应用于声明或类型用途.从Java SE 8发行版开始,重复注解使可以执行此操作. 例如,正在编写代码以使用计时器服务,该服务使能够在给定时间或某个计划上运行 ...

  6. 利用Python写一个抽奖程序,解密游戏内抽奖的秘密

    前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者: 极客挖掘机 PS:如有需要Python学习资料的小伙伴可以加点击下 ...

  7. 如何使用CAD删除命令?怎么删除图纸中线段

    大家经常使用CAD制图软件来绘制图纸,那在绘制图纸的过程中有时候会出现一些问题,就是图纸中不小心多绘制了一个线段,那要怎么办呢?如何使用CAD删除命令?怎么删除图纸中线段呢?那下面小编就来教教大家具体 ...

  8. Hibernate 框架入门

    接着上一篇的 Hibernate 框架的了解,我们就继续学习 Hibernate 框架.这次就进入 Hibernate 框架的入门学习. 首先在学习 Hibernate 框架之前,我们要准备好我们需要 ...

  9. Nginx 入门学习

    什么是 Nginx Nginx 是一款轻量级高性能的web 和 反向代理服务器,类似于Apache,也是一个 IMAP/POP3/SMTP (电子邮件)代理服务器.由俄罗斯程序设计师 Igor Sys ...

  10. Android utils 之 日志工具类

    工具类 在开发的过程中,我们时常会对代码执行特定的处理,而这部分处理在代码中可能多次用到,为了代码的统一性.规范性等,通过建工具类的方式统一处理.接下来我会罗列各种工具类. 日志工具类 在utils文 ...