人工智能实战小程序之语音_前端开发
生活随笔
收集整理的這篇文章主要介紹了
人工智能实战小程序之语音_前端开发
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
1. 人工智能實(shí)戰(zhàn)小程序之準(zhǔn)備工作
2. 人工智能實(shí)戰(zhàn)小程序之語音_前端開發(fā)
今天這部分主要講小程序前端功能的開發(fā) 由于我偏后端,css是我的弱項(xiàng),可能很多人和我一樣開發(fā)小程序不知道如何下手,希望本篇文章對(duì)你有幫助 我的學(xué)習(xí)路線是: 大略看一遍小程序的api文檔 然后在github上找一些小程序(我傾向于找有readme附圖的那種) 然后download下來去跑起來 然后在看代碼。(最快速的學(xué)習(xí)是能夠?qū)W習(xí)別人優(yōu)秀的代碼這個(gè)我很贊同) 我收藏了一個(gè)代碼寫的不錯(cuò)的開源電影推薦的小程序 https://github.com/yuzd/wechat-weapp-movie(感謝作者) 作者的代碼目錄結(jié)構(gòu)我很喜歡(本次demo的開發(fā)我借鑒了) 本次demo的前端流程很簡(jiǎn)單: 錄音=>上傳=>展示返回結(jié)果 下手之前: 希望能找到一個(gè)開源的帶錄音功能的demo能幫助我快速上手, 終于找到一個(gè)比較適合的開源demo:https://github.com/WalkingFrog/SiYu-WX 雖然該項(xiàng)目的作者說項(xiàng)目年久失修,學(xué)習(xí)價(jià)值有限。。 但是ui ico部分,對(duì)我來說太有幫助啦(感謝作者) 自己寫css是避免不了的那么 我希望能找一個(gè)類似于bootstrap庫(kù)的css庫(kù)能幫助我快速排版布局 我在github搜索到了一個(gè)ZanUI小程序?qū)S玫腸ss庫(kù),https://www.youzanyun.com/zanui/weapp#/zanui/base/icon (果真很贊) 具體代碼我已經(jīng)放到了github上面了 https://github.com/yuzd/microsoft_ai 下面就說說我在開發(fā)過程中遇到的一些問題和解決方法 1.小程序的component功能我的理解像是asp.net mvc中的PartialView。使用的時(shí)候不要忘記將wxss文件也要引用到主wxss里面。 例如你自己寫了一個(gè)loading的組件。 如果你在index.wxml里面用到了message.wxml 不要忘記要將message.wxs import到index.wss,否則樣式就加載不進(jìn)來(不要認(rèn)為會(huì)默認(rèn)約定加載) 2.bindtouchstart 和 bindlongtap 的使用區(qū)別 剛開始的時(shí)候我用的是bindlongtap 但是測(cè)試發(fā)現(xiàn)多次我長(zhǎng)按了事件沒有被調(diào)用 然后我換成了bindtouchstart 但是又太靈敏了,然后采用的是settimeout 200毫秒,并在 bindtouchend方法進(jìn)行 clearTimeout的方式解決的。 3.動(dòng)畫效果,比如出現(xiàn)錄音的動(dòng)畫,用小程序自帶的動(dòng)畫功能對(duì)我來說有點(diǎn)難,我就用了多組圖片切換的方式解決 哈哈,這樣真的可行。 4.錄音和播放都采用了小程序最新的api 錄音對(duì)象:wx.getRecorderManager() 音頻播放對(duì)象:wx.createInnerAudioContext() 這2個(gè)對(duì)象都提供時(shí)間注冊(cè) 例如 onStart onStop onError等等。我原來以為是注冊(cè)多次會(huì)覆蓋,其實(shí)這個(gè)類似于c#的多播委托 其實(shí)是+=的概念?
下篇文章會(huì)講后端的代碼實(shí)現(xiàn)邏輯以及音頻轉(zhuǎn)換會(huì)遇到的坑,希望大家多多支持轉(zhuǎn)載于:https://www.cnblogs.com/yudongdong/p/8900270.html
總結(jié)
以上是生活随笔為你收集整理的人工智能实战小程序之语音_前端开发的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: CCTV直播源m3u8
- 下一篇: 前端解析返回的对象时json显示$ref