前言

相信很多養(yǎng)貓的人都很想跟自己的貓進(jìn)行溝通，當(dāng)貓咪發(fā)出各種不同聲音的喵喵叫時(shí)，通常都會(huì)問(wèn)貓咪怎么了啊，是不是餓了啊，還是怎樣怎樣的。我也曾經(jīng)搜索過(guò)有沒(méi)有寵物翻譯的軟件，現(xiàn)在自己來(lái)實(shí)現(xiàn)一個(gè)吧[手動(dòng)狗頭]。

微信小程序是不支持直接使用 vue 進(jìn)行開(kāi)發(fā)的，但目前行業(yè)中已經(jīng)有不少解決方案去支持用各種開(kāi)發(fā)框架開(kāi)發(fā)跨端應(yīng)用了。

Taro 3.0版本開(kāi)始支持使用 Vue3 進(jìn)行開(kāi)發(fā)，那就用 Taro 來(lái)實(shí)現(xiàn)我們的微信小程序吧。

初始化項(xiàng)目

Taro 的詳細(xì)使用可以參考官方文檔，先全局安裝 @tarojs/cli

npm install -g @tarojs/cli

安裝成功后用 taro 命令來(lái)創(chuàng)建模板項(xiàng)目：

taro init catApp

這里選擇了 vue3-nutUI 框架，這個(gè)框架功能沒(méi)有 taro-ui 多，但 taro-ui 只支持 react，無(wú)奈只能用了。

設(shè)計(jì)

畢竟沒(méi)有視覺(jué)出圖，一切只能靠自己。馬上打開(kāi) PPT，簡(jiǎn)簡(jiǎn)單單畫(huà)個(gè)草圖。

主要有兩塊功能組成：

• 輸入想對(duì)貓咪說(shuō)的話(huà)，轉(zhuǎn)成喵語(yǔ)進(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)輸入想對(duì)貓主人的話(huà)，轉(zhuǎn)成喵語(yǔ)后，想要播放，就得使用 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('開(kāi)始播放')
})
innerAudioContext.onEnded(()=>{
	console.log('播放結(jié)束')
})

obeyMuteSwitch 配置是（僅在 iOS 生效）是否遵循靜音開(kāi)關(guān)，設(shè)置為 false 之后，即使是在靜音模式下，也能播放聲音，默認(rèn)是true的，這里沒(méi)注意，疑惑了好久，還以為我自己播放音頻有問(wèn)題，原來(lái)是給靜音了。

錄音

要給貓主人錄音就需要用到 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í)長(zhǎng)
	// 這里需要播放時(shí)，設(shè)置錄音文件地址，則可以播放錄音
	innerAudioContext.src = tempFilePath;
	innerAudioContext.play();
});

長(zhǎng)按事件

錄音可能大家都習(xí)慣了長(zhǎng)按時(shí)開(kāi)始錄音，松手時(shí)完成錄音。vue3-nutUI 框架中并沒(méi)有給按鈕提供長(zhǎng)按事件，所以需要用小程序原生提供的 longpress 事件，這個(gè)事件是手指觸摸后，超過(guò)350ms時(shí)就會(huì)觸發(fā)該事件，并且不會(huì)觸發(fā)到 tap 事件。想要松手結(jié)束錄音，需要結(jié)合 touchend 事件，才能完成長(zhǎng)按錄音，松手結(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)聽(tīng)文件修改并實(shí)時(shí)編譯成小程序，然后打開(kāi)微信開(kāi)發(fā)者工具，導(dǎo)入項(xiàng)目，選擇打開(kāi) catApp 根目錄即可，就可以進(jìn)行預(yù)覽了。

總結(jié)

Taro 的優(yōu)勢(shì)在寫(xiě)一次代碼適配多端，如果只是單純的用來(lái)開(kāi)發(fā)一個(gè)微信小程序，那還是繞得遠(yuǎn)了，直接原生開(kāi)發(fā)不香嗎。不過(guò)能夠使用 Vue3 來(lái)進(jìn)行開(kāi)發(fā)，這點(diǎn)還是比較香的，但是 Vue3 內(nèi)部實(shí)現(xiàn)使用了 Proxy ，在低版本的系統(tǒng)（iOS 9、Android 6）下還是無(wú)法直接使用，而目前也不可能直接拋棄這些用戶(hù)，所以還是不是很實(shí)際。

到了這里可能有的人就要問(wèn)了，怎么實(shí)現(xiàn)喵語(yǔ)轉(zhuǎn)換呢？？港真，目前全球也沒(méi)研究出這種能跟貓進(jìn)行交流的能力吧，這里只是用的一些本地資源文件，寫(xiě)死的數(shù)據(jù)，大家玩玩娛樂(lè)一下就好別太當(dāng)真。等到行業(yè)中有了這種能力，提供接口，再接入就真正實(shí)現(xiàn)了功能。就像 曠視 一直在往人工智能、深度學(xué)習(xí)的領(lǐng)域深耕，有沒(méi)有可能在訓(xùn)練各種喵叫聲以及結(jié)合各種喵叫場(chǎng)景，能研發(fā)出這種簡(jiǎn)單交流的能力，也是有可能的吧。

完整代碼放在 github 倉(cāng)庫(kù)，有興趣的可以下載玩玩。

到此這篇關(guān)于使用vue3實(shí)現(xiàn)一個(gè)人喵交流小程序的文章就介紹到這了,更多相關(guān)vue3人喵交流小程序內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論