中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

小程序如何實現長按錄音,上劃取消發送功能

發布時間:2022-03-14 10:21:21 來源:億速云 閱讀:756 作者:iii 欄目:開發技術

本篇內容主要講解“小程序如何實現長按錄音,上劃取消發送功能”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實用性強。下面就讓小編來帶大家學習“小程序如何實現長按錄音,上劃取消發送功能”吧!

1. html部分。

微信小程序事件接口:

小程序如何實現長按錄音,上劃取消發送功能


//html部分 class部分只是控制樣式 與功能無關分析:長按錄音需要longpress事件,松開發送需要touchend事件,上滑取消發送需要touchmove事件。由此可有以下html代碼

<div class="input weui-grid" hover-class="weui-grid_active" :class="record.type" @longpress="handleRecordStart" @touchmove="handleTouchMove" @touchend="handleRecordStop"><image class="weui-grid__icon"  :src="record.iconPath"/><div class="weui-grid__label">{{record.text}}</div>
</div>

2. JS部分

2.1. 首先定義錄音的數據結構:

舊版的小程序錄音接口wx.startRecord和wx.stopRecord在1.6.0版本后不再維護了,所以使用其建議的wx.getRecordManager接口。

注意:使用wx.getRecordManager接口的話,應調用相應的音頻控制接口wx.createInnerAudioContext()來播放和控制錄音.

data(){
          record: {
          text: "長按錄音",
          type: "record",
          iconPath: require("@/../static/icons/record.png"),
          handler: this.handleRecordStart
          }, //與錄音相關的數據結構
    recorderManager: wx.getRecorderManager(), //錄音管理上下文    
    startPoint: {}, //記錄長按錄音開始點信息,用于后面計算滑動距離。
          sendLock: true, //發送鎖,當為true時上鎖,false時解鎖發送},

2.2. 監聽錄音stop

onLoad(){
  this.recorderManager.onStop(res => {
            if (this.sendLock) {
              //上鎖不發送
            } else {//解鎖發送,發送網絡請求
              if (res.duration < 1000)
                    wx.showToast({
                          title: "錄音時間太短",
                          icon: "none",
                          duration: 1000
                    });
               else this.contents = [...this.contents,{ type: "record", content: res }];//contents是存儲錄音結束后的數據結構,用于渲染.
            }
          });
}

2.3. 長按錄音方法

在這個方法中需要做的事:

  • 記錄長按的點信息,用于后面計算手指滑動的距離,實現上滑取消發送.

  • 做一些界面樣式的控制.

  • 開始錄音

handleRecordStart(e) {
          //longpress時觸發
           this.startPoint = e.touches[0];//記錄長按時開始點信息,后面用于計算上劃取消時手指滑動的距離。
           this.record = {//修改錄音數據結構,此時錄音按鈕樣式會發生變化。
                text: "松開發送",
               type: "recording",
                 iconPath: require("@/../static/icons/recording.png"),
                   handler: this.handleRecordStart
              };
              this.recorderManager.start();//開始錄音
              wx.showToast({
                title: "正在錄音,上劃取消發送",
                icon: "none",
                duration: 60000//先定義個60秒,后面可以手動調用wx.hideToast()隱藏
              });
              this.sendLock = false;//長按時是不上鎖的。

      },

2.4. 松開發送

在這個方法中需要做的事:

  • 做一些樣式的控制.

  • 結束錄音.

  handleRecordStop() {
          // touchend(手指松開)時觸發
          this.record = {//復原在start方法中修改的錄音的數據結構
            text: "長按錄音",
            type: "record",
            iconPath: require("@/../static/icons/record.png"),
            handler: this.handleRecordStart
          };
          wx.hideToast();//結束錄音、隱藏Toast提示框
          this.recorderManager.stop();//結束錄音
      }

2.5. 上劃取消發送

在這個方法中需要做的事:

  • 計算手指上滑的距離

  • 根據距離判斷是否需要取消發送

  • 如果取消發送,最重要的是this.sendLock = true,上鎖不發送

  handleTouchMove(e) {
          //touchmove時觸發
          var moveLenght = e.touches[e.touches.length - 1].clientY - this.startPoint.clientY; //移動距離
          if (Math.abs(moveLenght) > 50) {
            wx.showToast({
                  title: "松開手指,取消發送",
                  icon: "none",
                  duration: 60000
            });
            this.sendLock = true;//觸發了上滑取消發送,上鎖
          } else {
            wx.showToast({
                  title: "正在錄音,上劃取消發送",
                  icon: "none",
                  duration: 60000
            });
            this.sendLock = false;//上劃距離不足,依然可以發送,不上鎖
          }
    },
  }

到此,相信大家對“小程序如何實現長按錄音,上劃取消發送功能”有了更深的了解,不妨來實際操作一番吧!這里是億速云網站,更多相關內容可以進入相關頻道進行查詢,關注我們,繼續學習!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

蚌埠市| 临泽县| 榆树市| 潞城市| 永嘉县| 汾西县| 双鸭山市| 集贤县| 平和县| 井冈山市| 四会市| 宣汉县| 休宁县| 新津县| 永清县| 吕梁市| 溧水县| 武夷山市| 韶山市| 东乡族自治县| 司法| 家居| 肥乡县| 元朗区| 治多县| 克什克腾旗| 湖北省| 宣城市| 沙河市| 依安县| 大埔区| 平安县| 闻喜县| 吴忠市| 崇左市| 琼结县| 义乌市| 康乐县| 宿迁市| 收藏| 灵璧县|