小程序模板網(wǎng)

微信小程序?qū)崿F(xiàn)點(diǎn)擊拍照長(zhǎng)按錄像功能

發(fā)布時(shí)間:2021-07-08 08:51 所屬欄目:小程序開(kāi)發(fā)教程

代碼里面注釋寫(xiě)的都很詳細(xì),直接上代碼。官方的組件屬性中有觸摸開(kāi)始和觸摸結(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)擊/長(zhǎng)按</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({

  /**
   * 頁(yè)面的初始數(shù)據(jù)
   */
  data: {
    cameraHeight: '',
    cameraWidth: '',
    image1Src: '',
    videoSrc: '',
    num: 0,
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
   */
  onLoad: function(options) {
    //調(diào)用設(shè)置相機(jī)大小的方法
    this.setCameraSize();
    this.ctx = wx.createCameraContext();
    console.log(this.lijiajun)

  },

  /**
   * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面初次渲染完成
   */
  onReady: function() {

  },

  /**
   * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面顯示
   */
  onShow: function() {

  },

  /**
   * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面隱藏
   */
  onHide: function() {

  },

  /**
   * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面卸載
   */
  onUnload: function() {

  },

  /**
   * 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽(tīng)用戶(hù)下拉動(dòng)作
   */
  onPullDownRefresh: function() {

  },

  /**
   * 頁(yè)面上拉觸底事件的處理函數(shù)
   */
  onReachBottom: function() {

  },

  /**
   * 用戶(hù)點(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("拍照失敗");
      }
    })
  },

  /**
   * 開(kāi)始錄像的方法
   */
  startShootVideo() {

    console.log("========= 調(diào)用開(kāi)始錄像 ===========")
    this.ctx.startRecord({
      success: (res) => {
        wx.showLoading({
          title: '正在錄像',
        })
      },
      fail() {
        console.log("========= 調(diào)用開(kāi)始錄像失敗 ===========")
      }
    })
  },

  /**
   * 結(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 手指觸摸開(kāi)始
  handleTouchStart:   function(e)  {    
    this.startTime  =  e.timeStamp;    
    console.log(" startTime = "  +  e.timeStamp);  
    console.log(" 手指觸摸開(kāi)始 " ,  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)擊還是長(zhǎng)按 點(diǎn)擊不做任何事件,長(zhǎng)按 觸發(fā)結(jié)束錄像
    if (this.endTime - this.startTime > 350) {
      //長(zhǎng)按操作 調(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();    
    }
  },

  /**
   * 長(zhǎng)按按鈕 - 錄像
   */
  handleLongPress:   function(e)  {
    console.log("endTime - startTime = "  +  (this.endTime  -  this.startTime));
    console.log("長(zhǎng)按");
    // 長(zhǎng)按方法觸發(fā),調(diào)用開(kāi)始錄像方法
    this.startShootVideo();
  },
  
})


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開(kāi)源 碼云倉(cāng)庫(kù):starfork
本文地址:http://22321a.com/wxmini/doc/course/27071.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢(xún):800182392 點(diǎn)擊咨詢(xún)
QQ在線(xiàn)咨詢(xún)