JS怎么实现一个微信录音功能(JS,开发技术)

时间:2024-05-03 18:38:52 作者 : 石家庄SEO 分类 : 开发技术
  • TAG :

    JS%E6%80%8E%E4%B9%88%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%E5%BE%AE%E4%BF%A1%E5%BD%95%E9%9F%B3%E5%8A%9F%E8%83%BD

根据原型图可以很容易的得出我们需要做的内容包括下面三个部分:

接入微信的语音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来承接交互逻辑。

为了便于说明,将这个聊天的界面简化如下:

通过上面的代码片段可知,我们的主要的界面在section标签的record部分。

use-record-layout.js的主题代码如下:

其中recordStyle是交互的结果,在这个需求当中,我们的界面的四种变化都对应其中一个的样式。

use-record-interact.js也很简单,注册微信录音功能 ➡️

交互逻辑和业务逻辑的联动通过recordStyle对象的存取属性来实现,代码片段如下:

实现了业务逻辑和交互逻辑的分离。

本文:JS怎么实现一个微信录音功能的详细内容,希望对您有所帮助,信息来源于网络。
上一篇:Pycharm项目代码怎么同步到Gitee中下一篇:

10 人围观 / 0 条评论 ↓快速评论↓

(必须)

(必须,保密)

阿狸1 阿狸2 阿狸3 阿狸4 阿狸5 阿狸6 阿狸7 阿狸8 阿狸9 阿狸10 阿狸11 阿狸12 阿狸13 阿狸14 阿狸15 阿狸16 阿狸17 阿狸18