目錄

• 功能原型圖
• 拆解需求
• 評(píng)估時(shí)間
• 代碼實(shí)現(xiàn)

功能原型圖

其實(shí)就是微信發(fā)送語(yǔ)音的功能。沒(méi)有轉(zhuǎn)文字的功能。

拆解需求

根據(jù)原型圖可以很容易的得出我們需要做的內(nèi)容包括下面三個(gè)部分：

• 接入微信的語(yǔ)音SDK
• 調(diào)用微信SDK的API邏輯
• 界面和交互的實(shí)現(xiàn)

其中第一點(diǎn)和第二點(diǎn)屬于業(yè)務(wù)邏輯部分，第三點(diǎn)屬于交互邏輯部分。對(duì)于業(yè)務(wù)邏輯和交互邏輯的關(guān)系在我的另外一篇文章描述過(guò)，我在vue中是這樣拆分組件的

從原型圖可以分析出如下的流程圖：

評(píng)估時(shí)間

第三事情是評(píng)估時(shí)間。在接到這個(gè)需求的時(shí)候，我們需要假設(shè)我們?cè)诖酥皼](méi)有接入過(guò)微信相關(guān)的SDK，并以此為前提進(jìn)行工期的評(píng)估。

可以將該用戶故事拆分為如下任務(wù)：

• 微信語(yǔ)音SDK的技術(shù)調(diào)研（0.5天）
• 輸出開(kāi)發(fā)設(shè)計(jì)文檔（0.5天）
• 接入微信語(yǔ)音SDK（0.5天）
• 編碼（1天）
• 自測(cè)（0.5天）

隨后將上面的時(shí)間都乘以2！ 自此才可以將估算的工期上報(bào)給產(chǎn)品。多年的經(jīng)驗(yàn)告訴自己，自己一開(kāi)始估算的工期從來(lái)沒(méi)夠過(guò)。自行估算的時(shí)候，幻想的是在工作的時(shí)候能夠一直保持專注。

就我自己而言，做不到，上班不可能不摸魚(yú)！也是必須要摸魚(yú)的。乘以2才是剛夠而已。

代碼實(shí)現(xiàn)

都說(shuō)在實(shí)現(xiàn)代碼之前要先設(shè)計(jì)，謀定而后動(dòng)。我是這樣做的，先想好文件夾創(chuàng)建，然后到文件的創(chuàng)建，再到具體文件中寫(xiě)出大體的框架。

需求并不復(fù)雜，只是一個(gè)界面中的一個(gè)模塊。所以我只需要一個(gè)Record.vue來(lái)承載界面，一個(gè)use-record-layout.js來(lái)承載業(yè)務(wù)邏輯，以及一個(gè)use-record-interact.js來(lái)承接交互邏輯。

|__im-record    |__Record.vue    |__use-record-layout.js    |__use-record-interact.js

為了便于說(shuō)明，將這個(gè)聊天的界面簡(jiǎn)化如下：

<script setup>import { useNamespace } from "@/use-namespace";const ns = useNamespace("chat")</script><template>  <header :class="ns.b("header")"></header>  <main :class="ns.b("main")">    <section :class="[ns.b("record"), ns.w("record", "toast")]">      <div :class="ns.w("record", "speak")"></div>      <div :class="ns.w("record", "pause")"></div>    </section>  </main>  <footer :class="ns.w("button", "wrap")">    <button :class="ns.b("button")">      <span>按住 說(shuō)話      </span>    </button>  </footer></template>

通過(guò)上面的代碼片段可知，我們的主要的界面在section標(biāo)簽的record部分。

use-record-layout.js的主題代碼如下：

  const recordStyle = {    default: { }, // 默認(rèn)樣式/確定發(fā)送錄音    recording: { }, // 錄音中    pause: { }, // 暫停錄音    cancel: { } // 取消錄音  }  const init = () => {    initEvent()    initStyle()  }  const initStyle = () => {    recordStyle.default.is = true  }  const initEvent = () => {    el.addEventListener("touchstart", handleTouchstart)    el.addEventListener("touchmove", handleTouchmove)    el.addEventListener("touchend", handleTouchend)  }  const axis = {    posStart: 0, // 初始化起點(diǎn)坐標(biāo)    posMove: 0 // 初始化滑動(dòng)坐標(biāo)  }  const handleTouchstart = (event) => {    event.preventDefault()    axis.posStart = event.touches[0].pageY    recordStyle.recording.is = true  }  const handleTouchmove = (event) => {    event.preventDefault()    axis.posMove = event.targetTouches[0].pageY    const diffMove = axis.posMove - axis.posStart    if (diffMove > DEFAULT_AXIS) {      recordStyle.recording.is = true    }  }  const handleTouchend = (event) => {    event.preventDefault()    recordStyle.default.is = true  }  init()

其中recordStyle是交互的結(jié)果，在這個(gè)需求當(dāng)中，我們的界面的四種變化都對(duì)應(yīng)其中一個(gè)的樣式。

use-record-interact.js也很簡(jiǎn)單，注冊(cè)微信錄音功能 ??

const wx = "wx"const useRecordInteract = () => {  const isAuth = localStorage.getItem("allowWxRecord")  // 獲取錄音權(quán)限  const authRecord = () => {    if (!isAuth) {      wx.startRecord()      return    }    return isAuth  }  // 停止錄音  const stopRecord = () => {}  // 上傳錄音  const uploadRecord = () => {}}

交互邏輯和業(yè)務(wù)邏輯的聯(lián)動(dòng)通過(guò)recordStyle對(duì)象的存取屬性來(lái)實(shí)現(xiàn),代碼片段如下：

const interact = useRecordInteract()const recordStyle = {    default: {      _is: false,      get is() {return this._is      },      set is(value) {this._is = valueif (value) {  this.recording.is = false  this.pause.is = false  this.cancel.is = false  interact.uploadRecord()}      }    },    //...}

實(shí)現(xiàn)了業(yè)務(wù)邏輯和交互邏輯的分離。

以上就是JS實(shí)現(xiàn)一個(gè)微信錄音功能過(guò)程示例詳解的詳細(xì)內(nèi)容，更多關(guān)于JS微信錄音功能的資料請(qǐng)關(guān)注其它相關(guān)文章！