电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁(yè)技術(shù)文章
文章詳情頁(yè)

JS實(shí)現(xiàn)一個(gè)微信錄音功能過(guò)程示例詳解

瀏覽:112日期:2022-06-01 09:53:57
目錄
  • 功能原型圖
  • 拆解需求
  • 評(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)文章!

標(biāo)簽: JavaScript
主站蜘蛛池模板: 广西教师资格网-广西教师资格证考试网 | 医院专用门厂家报价-医用病房门尺寸大全-抗菌木门品牌推荐 | 涡轮流量计_LWGY智能气体液体电池供电计量表-金湖凯铭仪表有限公司 | 上海小程序开发-上海小程序制作公司-上海网站建设-公众号开发运营-软件外包公司-咏熠科技 | 除湿机|工业除湿机|抽湿器|大型地下室车间仓库吊顶防爆除湿机|抽湿烘干房|新风除湿机|调温/降温除湿机|恒温恒湿机|加湿机-杭州川田电器有限公司 | 威廉希尔WilliamHill·足球(中国)体育官方网站 | 龙门加工中心-数控龙门加工中心厂家价格-山东海特数控机床有限公司_龙门加工中心-数控龙门加工中心厂家价格-山东海特数控机床有限公司 | 底部填充胶_电子封装胶_芯片封装胶_芯片底部填充胶厂家-东莞汉思新材料 | 有声小说,听书,听小说资源库-听世界网 | 南京种植牙医院【官方挂号】_南京治疗种植牙医院那个好_南京看种植牙哪里好_南京茀莱堡口腔医院 尼龙PA610树脂,尼龙PA612树脂,尼龙PA1010树脂,透明尼龙-谷骐科技【官网】 | 鼓风干燥箱_真空烘箱_高温干燥箱_恒温培养箱-上海笃特科学仪器 | VOC检测仪-甲醛检测仪-气体报警器-气体检测仪厂家-深恒安科技有限公司 | 澳门精准正版免费大全,2025新澳门全年免费,新澳天天开奖免费资料大全最新,新澳2025今晚开奖资料,新澳马今天最快最新图库-首页-东莞市傲马网络科技有限公司 | 东莞画册设计_logo/vi设计_品牌包装设计 - 华略品牌设计公司 | 皮带机_移动皮带机_大倾角皮带机_皮带机厂家 - 新乡市国盛机械设备有限公司 | 齿辊分级破碎机,高低压压球机,立式双动力磨粉机-郑州长城冶金设备有限公司 | 液压中心架,数控中心架,自定心中心架-烟台恒阳机电设计有限公司 行星搅拌机,双行星搅拌机,动力混合机,无锡米克斯行星搅拌机生产厂家 | EFM 022静电场测试仪-套帽式风量计-静电平板监测器-上海民仪电子有限公司 | lcd条形屏-液晶长条屏-户外广告屏-条形智能显示屏-深圳市条形智能电子有限公司 | 制丸机,小型中药制丸机,全自动制丸机价格-甘肃恒跃制药设备有限公司 | 5nd音乐网|最新流行歌曲|MP3歌曲免费下载|好听的歌|音乐下载 免费听mp3音乐 | 新疆散热器,新疆暖气片,新疆电锅炉,光耀暖通公司 | 挤塑板-XPS挤塑板-挤塑板设备厂家[襄阳欧格] | 培训一点通 - 合肥驾校 - 合肥新亚驾校 - 合肥八一驾校 | 超声波破碎仪-均质乳化机(供应杭州,上海,北京,广州,深圳,成都等地)-上海沪析实业有限公司 | 沈阳庭院景观设计_私家花园_别墅庭院设计_阳台楼顶花园设计施工公司-【沈阳现代时园艺景观工程有限公司】 | 诚暄电子公司首页-线路板打样,pcb线路板打样加工制作厂家 | 气动调节阀,电动调节阀,自力式压力调节阀,切断阀「厂家」-浙江利沃夫自控阀门 | 河南彩印编织袋,郑州饲料编织袋定制,肥料编织袋加工厂-盛军塑业 河南凯邦机械制造有限公司 | 中央空调维修、中央空调保养、螺杆压缩机维修-苏州东菱空调 | 萃取箱-萃取槽-PVC萃取箱厂家-混合澄清槽- 杭州南方化工设备 | 黑田精工电磁阀-CAMMOZI气缸-ROSS电磁-上海茂硕机械设备有限公司 | 手持式3d激光扫描仪-便携式三维立体扫描仪-北京福禄克斯 | 碳化硅,氮化硅,冰晶石,绢云母,氟化铝,白刚玉,棕刚玉,石墨,铝粉,铁粉,金属硅粉,金属铝粉,氧化铝粉,硅微粉,蓝晶石,红柱石,莫来石,粉煤灰,三聚磷酸钠,六偏磷酸钠,硫酸镁-皓泉新材料 | 上海防爆真空干燥箱-上海防爆冷库-上海防爆冷柜?-上海浦下防爆设备厂家? | 盘煤仪,盘料仪,盘点仪,堆料测量仪,便携式激光盘煤仪-中科航宇(北京)自动化工程技术有限公司 | 老城街小面官网_正宗重庆小面加盟技术培训_特色面馆加盟|牛肉拉面|招商加盟代理费用多少钱 | 交通气象站_能见度检测仪_路面状况监测站- 天合环境科技 | 耐酸泵,耐腐蚀真空泵,耐酸真空泵-淄博华舜耐腐蚀真空泵有限公司 精密模具-双色注塑模具加工-深圳铭洋宇通 | 雷达液位计_超声波风速风向仪_雨量传感器_辐射传感器-山东风途物联网 | 巨野电机维修-水泵维修-巨野县飞宇机电维修有限公司 |