欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用vue3實(shí)現(xiàn)一個(gè)人喵交流小程序

 更新時(shí)間:2021年11月09日 10:01:05   作者:我是胖虎  
Vue3 在經(jīng)過多個(gè)開發(fā)版本的迭代后,終于迎來了它的正式版本,下面這篇文章主要給大家介紹了關(guān)于如何使用vue3實(shí)現(xiàn)一個(gè)人喵交流小程序的相關(guān)資料,需要的朋友可以參考下

前言

相信很多養(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)文章

  • Vue?展示.md文件的方法詳解

    Vue?展示.md文件的方法詳解

    這篇文章主要介紹了Vue?展示.md文件的方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2023-05-05
  • element表格行列的動(dòng)態(tài)合并示例詳解

    element表格行列的動(dòng)態(tài)合并示例詳解

    這篇文章主要為大家介紹了element表格行列的動(dòng)態(tài)合并示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-07-07
  • vue3的基本使用方法詳細(xì)教程

    vue3的基本使用方法詳細(xì)教程

    這篇文章主要介紹了vue3的基本使用方法,結(jié)合實(shí)例形式詳細(xì)分析了vue3功能、組件、生命周期、TypeScript結(jié)合運(yùn)用等相關(guān)概念與使用方法,需要的朋友可以參考下
    2023-06-06
  • 基于Vue 實(shí)現(xiàn)一個(gè)中規(guī)中矩loading組件

    基于Vue 實(shí)現(xiàn)一個(gè)中規(guī)中矩loading組件

    這篇文章主要介紹了基于Vue 實(shí)現(xiàn)一個(gè)中規(guī)中矩loading組件,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2019-04-04
  • 在Vue.js中使用Mixins的方法

    在Vue.js中使用Mixins的方法

    本篇文章主要介紹了在Vue.js中使用Mixins的方法,Vue的Mixins是非常實(shí)用的編程方式,可以使代碼變得容易理解,有興趣的一起來了解一下
    2017-09-09
  • 在Vue中使用deep深度選擇器修改element UI組件的樣式

    在Vue中使用deep深度選擇器修改element UI組件的樣式

    這篇文章主要介紹了在Vue中使用deep深度選擇器修改element UI組件的樣式,本文分為兩種方法給大家介紹,在這小編比較推薦使用第二種使用 deep 深度選擇器,感興趣的朋友跟隨小編一起看看吧
    2022-12-12
  • 淺談vue中computed屬性對data屬性賦值為undefined的原因

    淺談vue中computed屬性對data屬性賦值為undefined的原因

    本文主要介紹了淺談vue中computed屬性對data屬性賦值為undefined的原因,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-02-02
  • vue-cli腳手架初始化項(xiàng)目各個(gè)文件夾用途

    vue-cli腳手架初始化項(xiàng)目各個(gè)文件夾用途

    這篇文章主要介紹了vue-cli腳手架初始化項(xiàng)目各個(gè)文件夾用途,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2023-01-01
  • vue?cli?局部混入mixin和全局混入mixin的過程

    vue?cli?局部混入mixin和全局混入mixin的過程

    這篇文章主要介紹了vue?cli?局部混入mixin和全局混入mixin的過程,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-05-05
  • vue項(xiàng)目開發(fā)環(huán)境工具node搭建過程

    vue項(xiàng)目開發(fā)環(huán)境工具node搭建過程

    最近在開始接觸做vue框架的前端項(xiàng)目,以前用的前端比如html,js,css等都是比較原生的,寫好后直接瀏覽器打開就行,今天就先記錄一下vue的開發(fā)運(yùn)行搭建過程,感興趣的朋友一起看看吧
    2023-09-09

最新評論