JS实现一个微信录音功能过程示例详解
功能原型图
其实就是微信发送语音的功能。没有转文字的功能。
拆解需求
根据原型图可以很容易的得出我们需要做的内容包括下面三个部分：
- 接入微信的语音SDK
- 调用微信SDK的API逻辑
- 界面和交互的实现
其中第一点和第二点属于业务逻辑部分，第三点属于交互逻辑部分。对于业务逻辑和交互逻辑的关系在我的另外一篇文章描述过，我在vue中是这样拆分组件的
从原型图可以分析出如下的流程图：
评估时间
第三事情是评估时间。在接到这个需求的时候，我们需要假设我们在此之前没有接入过微信相关的SDK，并以此为前提进行工期的评估。
可以将该用户故事拆分为如下任务：
- 微信语音SDK的技术调研（0.5天）
- 输出开发设计文档（0.5天）
- 接入微信语音SDK（0.5天）
- 编码（1天）
- 自测（0.5天）
随后将上面的时间都乘以2！ 自此才可以将估算的工期上报给产品。多年的经验告诉自己，自己一开始估算的工期从来没够过。自行估算的时候，幻想的是在工作的时候能够一直保持专注。
就我自己而言，做不到，上班不可能不摸鱼！也是必须要摸鱼的。乘以2才是刚够而已。
代码实现
都说在实现代码之前要先设计，谋定而后动。我是这样做的，先想好文件夹创建，然后到文件的创建，再到具体文件中写出大体的框架。
需求并不复杂，只是一个界面中的一个模块。所以我只需要一个Record.vue来承载界面，一个use-record-layout.js来承载业务逻辑，以及一个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: { }, // 默认样式/确定发送录音
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 = () => {}
}
交互逻辑和业务逻辑的联动通过recordStyle对象的存取属性来实现,代码片段如下：
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()
}
}
},
//...
}
实现了业务逻辑和交互逻辑的分离。
以上就是JS实现一个微信录音功能过程示例详解的详细内容，更多关于JS微信录音功能的资料请关注脚本之家其它相关文章！
相关文章
在JavaScript中所有的异常都是Error对象，遇到异常就会抛出一个Error对象,这个对象中包含错误的描述信息，通过JavaScript提供的异常处理语句,我们可以用结构化的方式来捕捉发生的错误,让异常处理代码与核心业务代码实现分离,需要的朋友可以参考一下2021-12-12
这篇文章主要介绍了微信小程序 页面之间传参实例详解的相关资料,需要的朋友可以参考下2017-01-01
这篇文章主要为大家介绍了JavaScript 键盘事件的处理及属性详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
这篇文章主要为大家介绍了异步观察目标元素方式完成分页加载示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要给大家介绍的是JavaScript中的单例模式，设计模式代表了最佳的实践，通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案,需要的朋友可以参考一下2021-09-09
这篇文章主要介绍了前端JavaScript大管家 package.json，在每个前端项目中，都有package.json文件，它是项目的配置文件，常见的配置有配置项目启动、打包命令，声明依赖包等，下面我们就来学习 package.json的详细内容,需要的朋友可以参考一下2021-10-10
这篇文章主要介绍了微信小程序 Mustache语法详细介绍的相关资料,需要的朋友可以参考下2016-10-10
这篇文章主要为大家介绍了js基于div丝滑实现贝塞尔曲线示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要介绍了微信小程序page的生命周期和音频播放及监听实例详解的相关资料,需要的朋友可以参考下2017-04-04
这篇文章主要为大家介绍了TypeScript获取二叉树的镜像实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
最新评论