怎么使用vue3實現一個人喵交流小程序

本篇內容主要講解“怎么使用vue3實現一個人喵交流小程序”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“怎么使用vue3實現一個人喵交流小程序”吧!

前言

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

微信小程序是不支持直接使用 vue 進行開發的，但目前行業中已經有不少解決方案去支持用各種開發框架開發跨端應用了。

Taro 3.0版本開始支持使用 Vue3 進行開發，那就用 Taro 來實現我們的微信小程序吧。

初始化項目

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

npm install -g @tarojs/cli

安裝成功后用 taro 命令來創建模板項目：

taro init catApp

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

設計

畢竟沒有視覺出圖，一切只能靠自己。

主要有兩塊功能組成：

• 輸入想對貓咪說的話，轉成喵語進行播放

• 錄音，錄下喵叫聲，轉成文字，也可以播放錄音

代碼實現

按需加載

按需引入 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.css';

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,
});

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 } = 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 項目，會一直監聽文件修改并實時編譯成小程序，然后打開微信開發者工具，導入項目，選擇打開 catApp 根目錄即可，就可以進行預覽了。

到此，相信大家對“怎么使用vue3實現一個人喵交流小程序”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！