使用vue3實(shí)現(xiàn)一個(gè)人喵交流小程序
前言
相信很多養(yǎng)貓的人都很想跟自己的貓進(jìn)行溝通,當(dāng)貓咪發(fā)出各種不同聲音的喵喵叫時(shí),通常都會(huì)問貓咪怎么了啊,是不是餓了啊,還是怎樣怎樣的。我也曾經(jīng)搜索過有沒有寵物翻譯的軟件,現(xiàn)在自己來實(shí)現(xiàn)一個(gè)吧[手動(dòng)狗頭]。
微信小程序是不支持直接使用 vue 進(jìn)行開發(fā)的,但目前行業(yè)中已經(jīng)有不少解決方案去支持用各種開發(fā)框架開發(fā)跨端應(yīng)用了。
Taro 3.0版本開始支持使用 Vue3 進(jìn)行開發(fā),那就用 Taro 來實(shí)現(xiàn)我們的微信小程序吧。
初始化項(xiàng)目
Taro 的詳細(xì)使用可以參考官方文檔,先全局安裝 @tarojs/cli
npm install -g @tarojs/cli
安裝成功后用 taro 命令來創(chuàng)建模板項(xiàng)目:
taro init catApp
這里選擇了 vue3-nutUI 框架,這個(gè)框架功能沒有 taro-ui 多,但 taro-ui 只支持 react,無奈只能用了。
設(shè)計(jì)
畢竟沒有視覺出圖,一切只能靠自己。馬上打開 PPT,簡簡單單畫個(gè)草圖。
主要有兩塊功能組成:
- 輸入想對貓咪說的話,轉(zhuǎn)成喵語進(jìn)行播放
- 錄音,錄下喵叫聲,轉(zhuǎn)成文字,也可以播放錄音
代碼實(shí)現(xiàn)
按需加載
按需引入 vue3-nutUI 框架,剛才在初始化項(xiàng)目時(shí)已經(jīng)是按需引入了,在 app.js 中,按需引入項(xiàng)目所需要用到的組件即可
import { createApp } from 'vue' import { Button,Toast,Tabbar,TabbarItem,Icon,Avatar,Input } from '@nutui/nutui-taro'; import '@nutui/nutui-taro/dist/style.css'; const App = createApp() App.use(Button).use(Toast).use(Tabbar).use(TabbarItem).use(Icon).use(Avatar).use(Input) export default App
播放音頻
當(dāng)輸入想對貓主人的話,轉(zhuǎn)成喵語后,想要播放,就得使用 Taro 提供的播放音頻接口。播放音頻現(xiàn)在使用官方更加推薦的 Taro.createInnerAudioContext 接口了,原先的 Taro.stopVoice 和 Taro.playVoice 不再維護(hù)了。
const innerAudioContext = Taro.createInnerAudioContext(); Taro.setInnerAudioOption({ obeyMuteSwitch: false, }); innerAudioContext.src = 'xxx.mp3'; innerAudioContext.play(); innerAudioContext.onPlay(()=>{ console.log('開始播放') }) innerAudioContext.onEnded(()=>{ console.log('播放結(jié)束') })
obeyMuteSwitch 配置是(僅在 iOS 生效)是否遵循靜音開關(guān),設(shè)置為 false 之后,即使是在靜音模式下,也能播放聲音,默認(rèn)是true的,這里沒注意,疑惑了好久,還以為我自己播放音頻有問題,原來是給靜音了。
錄音
要給貓主人錄音就需要用到 Taro.getRecorderManager 錄音接口
const recorderManager = Taro.getRecorderManager(); recorderManager.onStart(() => { console.log("recorder start"); }); recorderManager.onStop((res) => { console.log("recorder stop", res); const { tempFilePath, duration } = res; // tempFilePath 是錄音文件的臨時(shí)路徑 // duration 是錄音時(shí)長 // 這里需要播放時(shí),設(shè)置錄音文件地址,則可以播放錄音 innerAudioContext.src = tempFilePath; innerAudioContext.play(); });
長按事件
錄音可能大家都習(xí)慣了長按時(shí)開始錄音,松手時(shí)完成錄音。vue3-nutUI 框架中并沒有給按鈕提供長按事件,所以需要用小程序原生提供的 longpress 事件,這個(gè)事件是手指觸摸后,超過350ms時(shí)就會(huì)觸發(fā)該事件,并且不會(huì)觸發(fā)到 tap 事件。想要松手結(jié)束錄音,需要結(jié)合 touchend 事件,才能完成長按錄音,松手結(jié)束的需求。
<nut-button block type="info" icon="microphone" @longpress="handleLongpress" @touchend="handleTouchend"> 錄音 </nut-button>
運(yùn)行調(diào)試
執(zhí)行 npm run dev:weapp 項(xiàng)目,會(huì)一直監(jiān)聽文件修改并實(shí)時(shí)編譯成小程序,然后打開微信開發(fā)者工具,導(dǎo)入項(xiàng)目,選擇打開 catApp 根目錄即可,就可以進(jìn)行預(yù)覽了。
總結(jié)
Taro 的優(yōu)勢在寫一次代碼適配多端,如果只是單純的用來開發(fā)一個(gè)微信小程序,那還是繞得遠(yuǎn)了,直接原生開發(fā)不香嗎。不過能夠使用 Vue3 來進(jìn)行開發(fā),這點(diǎn)還是比較香的,但是 Vue3 內(nèi)部實(shí)現(xiàn)使用了 Proxy ,在低版本的系統(tǒng)(iOS 9、Android 6)下還是無法直接使用,而目前也不可能直接拋棄這些用戶,所以還是不是很實(shí)際。
到了這里可能有的人就要問了,怎么實(shí)現(xiàn)喵語轉(zhuǎn)換呢??港真,目前全球也沒研究出這種能跟貓進(jìn)行交流的能力吧,這里只是用的一些本地資源文件,寫死的數(shù)據(jù),大家玩玩娛樂一下就好別太當(dāng)真。等到行業(yè)中有了這種能力,提供接口,再接入就真正實(shí)現(xiàn)了功能。就像 曠視 一直在往人工智能、深度學(xué)習(xí)的領(lǐng)域深耕,有沒有可能在訓(xùn)練各種喵叫聲以及結(jié)合各種喵叫場景,能研發(fā)出這種簡單交流的能力,也是有可能的吧。
完整代碼放在 github 倉庫,有興趣的可以下載玩玩。
到此這篇關(guān)于使用vue3實(shí)現(xiàn)一個(gè)人喵交流小程序的文章就介紹到這了,更多相關(guān)vue3人喵交流小程序內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
element表格行列的動(dòng)態(tài)合并示例詳解
這篇文章主要為大家介紹了element表格行列的動(dòng)態(tài)合并示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07基于Vue 實(shí)現(xiàn)一個(gè)中規(guī)中矩loading組件
這篇文章主要介紹了基于Vue 實(shí)現(xiàn)一個(gè)中規(guī)中矩loading組件,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04在Vue中使用deep深度選擇器修改element UI組件的樣式
這篇文章主要介紹了在Vue中使用deep深度選擇器修改element UI組件的樣式,本文分為兩種方法給大家介紹,在這小編比較推薦使用第二種使用 deep 深度選擇器,感興趣的朋友跟隨小編一起看看吧2022-12-12淺談vue中computed屬性對data屬性賦值為undefined的原因
本文主要介紹了淺談vue中computed屬性對data屬性賦值為undefined的原因,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-02-02vue-cli腳手架初始化項(xiàng)目各個(gè)文件夾用途
這篇文章主要介紹了vue-cli腳手架初始化項(xiàng)目各個(gè)文件夾用途,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-01-01vue?cli?局部混入mixin和全局混入mixin的過程
這篇文章主要介紹了vue?cli?局部混入mixin和全局混入mixin的過程,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-05-05vue項(xiàng)目開發(fā)環(huán)境工具node搭建過程
最近在開始接觸做vue框架的前端項(xiàng)目,以前用的前端比如html,js,css等都是比較原生的,寫好后直接瀏覽器打開就行,今天就先記錄一下vue的開發(fā)運(yùn)行搭建過程,感興趣的朋友一起看看吧2023-09-09