使用vue3實現一個人喵交流小程式
目錄
- 前言
- 初始化專案
- 設計
- 程式碼實現
- 按需載入
- 播放音訊
- 錄音
- 長按事件
- 執行除錯
- 總結
前言
相信很多養貓的人都很想跟自己的貓進行溝通，當貓咪發出各種不同聲音的喵喵叫時，通常都會問貓咪怎麼了啊，是不是餓了啊，還是怎樣怎樣的。我也曾經搜尋過有沒有寵物翻譯的軟體，現在自己來實現一個吧[手動狗頭]。
微信小程式是不支援直接使用 進行開發的，但目前行業中已經有不少解決方案去支援用各種開發框架開發跨端應用了。
Taro 3.0版本開始支援使用 Vue3 進行開發，那就用 Taro 來實現我們的微信小程式吧。
初始化專案
Taro 的詳細使用可以參考官方文件，先全域性安裝 @taro/cli
npm install -g @tarojs/cli
安裝成功後用 taro 命令來建立模板專案：
taro init catApp
這裡選擇了 vue3-nutUI 框架，這個框架功能沒有 taro-ui 多，但 taro-ui 只支援 react，無奈只能用了。
設計
畢竟沒有視覺出圖，一切只能靠自己。馬上開啟 PPT，簡簡單單畫個草圖。
主要有兩塊功能組成：
- 輸入想對貓咪說的話，轉成喵語進行播放
- 錄音，錄下喵叫聲，轉成文字，也可以播放錄音
程式碼實現
按需載入
按需引入 vue3-nutUI 框架，剛才在初始化專案時已經是按需引入了，在 app.js 中，按需引入專案所需要用到的元件即可
import { createApp } from 'vue'
import { Button,Toast,Tabbar,TabbarItem,Icon,Avatar,Input } from '@nutui/nutui-taro';
import '@nutui/nutui-taro/dist/style.';
const App = createApp()
App.use(Button).use(Toast).use(Tabbar).use(TabbarItem).use(Icon).use(Avatar).use(Input)
export default App
播放音訊
當輸入想對貓主人的話，轉成喵語後，想要播放，就得使用 Taro 提供的播放音訊介面。播放音訊現在使用官方更加推薦的 Taro.createInnerAudioContext 介面了，原先的 Taro.stopVoice 和 Taro.playVoice 不再維護了。
const innerAudioContext = Taro.createInnerAudioContext();
Taro.setInnerAudioOption({
obeyMuteSwitch: false,})http://www.cppcns.com;
innerAudioContext.src = 'xxx.mp3';
innerAudioContext.play();
innerAudioContext.onPlay(()=>{
console.log('開始播放')
})
innerAudioContext.onEnded(()=>{
console.log('播放結束')
})
obeyMuteSwitch 配置是（僅在 iOS 生效）是否遵循靜音開關，設定為 false 之後，即使是在靜音模式下，也能播放聲音，預設是true的，這裡沒注意，疑惑了好久，還以為我自己播放音訊有問題，原來是給靜音了。
錄音
要給貓主人錄音就需要用到 Taro.getRecorderManager 錄音介面
const recorderManager = Taro.getRecorderManager();
recorderManager.onStart(() => {
console.log("recorder start");
});
recorderManager.onStop((res) => {
console.log("recorder stop",res);
const { tempFilePath,duration IicIcHZdmz} = res;
// tempFilePath 是錄音檔案的臨時路徑
// duration 是錄音時長
// 這裡需要播放時，設定錄音檔案地址，則可以播放錄音
innerAudioContext.src = tempFilePath;
innerAudioContext.play();
});
長按事件
錄音可能大家都習慣了長按時開始錄音，鬆手時完成錄音。vue3-nutUI 框架中並沒有給按鈕提供長按事件，所以需要用小程式原生提供的 longpress 事件，這個事件是手指觸控後，超過350ms時就會觸發該事件，並且不會觸發到 tap 事件。想要鬆手結束錄音，需要結合 touchend 事件，才能完成長按錄音，鬆手結束的需求。
<nut-button block type="info" icon="microphone" @longpress="handleLongpress" @touchend="handleTouchend"> 錄音 </nut-button>
執行除錯
執行 npm run dev:weapp 專案，會一直監聽檔案修改並實時編譯http://www.cppcns.com成小程式，然後開啟微信開發者工具，匯入專案，選擇開啟 catApp 根目錄即可，就可以進行預覽了。
總結
Taro 的優勢在寫一次程式碼適配多端，如果只是單純的用來開發一個微信小程式，那還是繞得遠了，直接原生開發不香嗎。不過能夠使用 Vue3 來進行開發，這點還是比較香的，但是 Vue3 內部實現使用了 Proxy ，在低版本的系統（iOS 9、 6）下還是無法直接使用，而目前也不可能直接拋棄這些使用者，所以還是不是很實際。
到了這裡可能有的人就要問了，怎麼實現喵語轉換呢？？港真，目前全球也沒研究出這種能跟貓進行交流的能力吧，這裡只是用的一些本地資原始檔，寫死的資料，大家玩玩娛樂一下就好別太當真。等到行業中有了這種能力，提供介面，再接入就真正實現了功能。就像 曠視 一直在往人工智慧、深度學習的領域深耕，有沒有可能在訓練各種喵叫聲以及結合各種喵叫場景，能研發出這種簡單交流的能力，也是有可能的吧。
完整程式碼放在 倉庫，有興趣的可以下載玩玩。
到此這篇關於使用vue3實現一個人喵交流小程式的文章就介紹到這了,更多相關vue3人喵交流小程式內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！