E企盈营销工具技术服务商 热线:4006-838-530

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

E企盈直播平台营销卖货系统

微信小程序实现点击拍照长按录像功能代码里面注释写的都很详细,直接上代码。官方的组件属性中有触摸开始和触摸结束属性。本功能依靠这些属性实现。.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.jsPage({  /**   * 页面的初始数据   */  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  —————————–

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序实现点击拍照长按录像功能
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏