您好,登錄后才能下訂單哦!
今天小編給大家分享一下JS怎么實現(xiàn)一個微信錄音功能的相關知識點,內容詳細,邏輯清晰,相信大部分人都還太了解這方面的知識,所以分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后有所收獲,下面我們一起來了解一下吧。
根據(jù)原型圖可以很容易的得出我們需要做的內容包括下面三個部分:
接入微信的語音SDK
調用微信SDK的API邏輯
界面和交互的實現(xiàn)
其中第一點和第二點屬于業(yè)務邏輯部分,第三點屬于交互邏輯部分。對于業(yè)務邏輯和交互邏輯的關系在我的另外一篇文章描述過,我在vue中是這樣拆分組件的
從原型圖可以分析出如下的流程圖:
第三事情是評估時間。在接到這個需求的時候,我們需要假設我們在此之前沒有接入過微信相關的SDK,并以此為前提進行工期的評估。
可以將該用戶故事拆分為如下任務:
微信語音SDK的技術調研(0.5天)
輸出開發(fā)設計文檔(0.5天)
接入微信語音SDK(0.5天)
編碼(1天)
自測(0.5天)
隨后將上面的時間都乘以2! 自此才可以將估算的工期上報給產品。多年的經驗告訴自己,自己一開始估算的工期從來沒夠過。自行估算的時候,幻想的是在工作的時候能夠一直保持專注。
就我自己而言,做不到,上班不可能不摸魚!也是必須要摸魚的。乘以2才是剛夠而已。
都說在實現(xiàn)代碼之前要先設計,謀定而后動。我是這樣做的,先想好文件夾創(chuàng)建,然后到文件的創(chuàng)建,再到具體文件中寫出大體的框架。
需求并不復雜,只是一個界面中的一個模塊。所以我只需要一個Record.vue
來承載界面,一個use-record-layout.js
來承載業(yè)務邏輯,以及一個use-record-interact.js
來承接交互邏輯。
|__im-record |__Record.vue |__use-record-layout.js |__use-record-interact.js
為了便于說明,將這個聊天的界面簡化如下:
<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> 按住 說話 </span> </button> </footer> </template>
通過上面的代碼片段可知,我們的主要的界面在section
標簽的record
部分。
use-record-layout.js
的主題代碼如下:
const recordStyle = { default: { }, // 默認樣式/確定發(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, // 初始化起點坐標 posMove: 0 // 初始化滑動坐標 } 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是交互的結果,在這個需求當中,我們的界面的四種變化都對應其中一個的樣式。
use-record-interact.js
也很簡單,注冊微信錄音功能 ??
const wx = 'wx' const useRecordInteract = () => { const isAuth = localStorage.getItem('allowWxRecord') // 獲取錄音權限 const authRecord = () => { if (!isAuth) { wx.startRecord() return } return isAuth } // 停止錄音 const stopRecord = () => {} // 上傳錄音 const uploadRecord = () => {} }
交互邏輯和業(yè)務邏輯的聯(lián)動通過recordStyle
對象的存取屬性來實現(xiàn),代碼片段如下:
const interact = useRecordInteract() const recordStyle = { default: { _is: false, get is() { return this._is }, set is(value) { this._is = value if (value) { this.recording.is = false this.pause.is = false this.cancel.is = false interact.uploadRecord() } } }, //... }
實現(xiàn)了業(yè)務邏輯和交互邏輯的分離。
以上就是“JS怎么實現(xiàn)一個微信錄音功能”這篇文章的所有內容,感謝各位的閱讀!相信大家閱讀完這篇文章都有很大的收獲,小編每天都會為大家更新不同的知識,如果還想學習更多的知識,請關注億速云行業(yè)資訊頻道。
免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經查實,將立刻刪除涉嫌侵權內容。