前言

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

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

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

初始化項目

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

npm install -g @tarojs/cli

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

taro init catApp

這里選擇了 vue3-nutUI 框架，這個框架功能沒有 taro-ui 多，但 taro-ui 只支持 react，無奈只能用了。

設(shè)計

畢竟沒有視覺出圖，一切只能靠自己。馬上打開 PPT，簡簡單單畫個草圖。

主要有兩塊功能組成：

• 輸入想對貓咪說的話，轉(zhuǎn)成喵語進(jìn)行播放
• 錄音，錄下喵叫聲，轉(zhuǎn)成文字，也可以播放錄音

代碼實現(xiàn)

按需加載

按需引入 vue3-nutUI 框架，剛才在初始化項目時已經(jīng)是按需引入了，在 app.js 中，按需引入項目所需要用到的組件即可

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 是錄音文件的臨時路徑
	// duration 是錄音時長
	// 這里需要播放時，設(shè)置錄音文件地址，則可以播放錄音
	innerAudioContext.src = tempFilePath;
	innerAudioContext.play();
});

長按事件

錄音可能大家都習(xí)慣了長按時開始錄音，松手時完成錄音。vue3-nutUI 框架中并沒有給按鈕提供長按事件，所以需要用小程序原生提供的 longpress 事件，這個事件是手指觸摸后，超過350ms時就會觸發(fā)該事件，并且不會觸發(fā)到 tap 事件。想要松手結(jié)束錄音，需要結(jié)合 touchend 事件，才能完成長按錄音，松手結(jié)束的需求。

<nut-button block type="info" icon="microphone" @longpress="handleLongpress" @touchend="handleTouchend">
	錄音
</nut-button>

運行調(diào)試

執(zhí)行 npm run dev:weapp 項目，會一直監(jiān)聽文件修改并實時編譯成小程序，然后打開微信開發(fā)者工具，導(dǎo)入項目，選擇打開 catApp 根目錄即可，就可以進(jìn)行預(yù)覽了。

總結(jié)

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

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

完整代碼放在 github 倉庫，有興趣的可以下載玩玩。

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

最新評論