Verwenden Sie vue3, um ein Mensch-Katze-Kommunikations-Applet zu implementieren

Vorwort

Ich glaube, dass viele Katzenhalter mit ihren Katzen kommunizieren möchten. Wenn Katzen mit verschiedenen Lauten miauen, fragen sie die Katzen meist, was los ist, ob sie Hunger haben oder ähnliches. Ich habe auch nach einer Übersetzungssoftware für Haustiere gesucht und werde jetzt selbst eine erstellen [manueller Hundekopf].

WeChat-Miniprogramme unterstützen die direkte Entwicklung mit Vue nicht, aber es gibt in der Branche bereits viele Lösungen, die die Entwicklung plattformübergreifender Anwendungen mithilfe verschiedener Entwicklungsframeworks unterstützen.

Taro Version 3.0 unterstützt nun die Entwicklung mit Vue3. Verwenden wir also Taro zur Implementierung unseres WeChat-Applets.

Initialisieren des Projekts

Für detaillierte Informationen zur Verwendung von Taro lesen Sie bitte die offizielle Dokumentation. Installieren Sie zunächst @tarojs/cli global

npm install -g @tarojs/cli

Verwenden Sie nach der erfolgreichen Installation den Befehl taro, um ein Vorlagenprojekt zu erstellen:

Taro init catApp

Hier wird das Framework vue3-nutUI gewählt. Dieses Framework hat zwar nicht so viele Funktionen wie taro-ui, aber taro-ui unterstützt nur React, sodass mir nichts anderes übrigbleibt, als es zu verwenden.

Design

Denn ohne visuelle Ausgabe sind Sie auf sich selbst gestellt. Öffnen Sie sofort PPT und zeichnen Sie eine einfache Skizze.

Es gibt zwei Hauptfunktionskomponenten:

• Geben Sie ein, was Sie der Katze sagen möchten, und konvertieren Sie es zur Wiedergabe in die Miau-Sprache
• Aufnehmen, das Miauen aufzeichnen, in Text umwandeln und die Aufnahme abspielen

Code-Implementierung

Laden nach Bedarf

Führen Sie das vue3-nutUI-Framework bei Bedarf ein. Es wurde gerade bei der Initialisierung des Projekts bei Bedarf eingeführt. Führen Sie in app.js einfach bei Bedarf die für das Projekt benötigten Komponenten ein.

importiere { createApp } von 'vue'
importiere { Button, Toast, Tabbar, TabbarItem, Icon, Avatar, Input } von '@nutui/nutui-taro';
importiere '@nutui/nutui-taro/dist/style.css';

const App = createApp()
App.use(Button).use(Toast).use(Tabbar).use(TabbarItem).use(Icon).use(Avatar).use(Eingabe)

Standard-App exportieren

Audio abspielen

Nachdem Sie eingegeben haben, was Sie dem Katzenbesitzer sagen möchten, und es in Miau-Sprache umgewandelt haben, müssen Sie, wenn Sie es abspielen möchten, die von Taro bereitgestellte Audiowiedergabeschnittstelle verwenden. Die Audiowiedergabe verwendet jetzt die offiziellere Schnittstelle Taro.createInnerAudioContext. Die ursprünglichen Schnittstellen Taro.stopVoice und Taro.playVoice werden nicht mehr gepflegt.

const innerAudioContext = Taro.createInnerAudioContext();
Taro.setInnerAudioOption({
	obeyMuteSwitch: falsch,
});

innerAudioContext.src = "xxx.mp3";
innerAudioContext.play();

innerAudioContext.onPlay(()=>{
	console.log('Starten Sie die Wiedergabe')
})
innerAudioContext.onEnded(()=>{
	console.log('Wiedergabe endet')
})

Die Konfiguration obeyMuteSwitch gibt an (nur unter iOS wirksam), ob der Stummschalter befolgt werden soll. Nachdem Sie sie auf „false“ gesetzt haben, kann der Ton auch im Lautlosmodus abgespielt werden. Die Standardeinstellung ist „true“. Ich habe hier nicht aufgepasst und war lange verwirrt. Ich dachte, mit meiner Audiowiedergabe stimmt etwas nicht, aber es stellte sich heraus, dass sie stummgeschaltet war.

Aufnahme

Um den Katzenbesitzer aufzuzeichnen, müssen Sie die Aufzeichnungsschnittstelle Taro.getRecorderManager verwenden

const recorderManager = Taro.getRecorderManager();
recorderManager.onStart(() => {
	console.log("Rekorder starten");
});
recorderManager.onStop((res) => {
	console.log("Recorder stoppen", res);
	const { tempFilePath, Dauer } = res;
	// tempFilePath ist der temporäre Pfad der Aufnahmedatei // Dauer ist die Dauer der Aufnahme // Wenn Sie es hier abspielen müssen, legen Sie die Adresse der Aufnahmedatei fest, dann können Sie die Aufnahme abspielen innerAudioContext.src = tempFilePath;
	innerAudioContext.play();
});

Langes Drücken des Ereignisses

Beim Aufnehmen sind Sie es möglicherweise gewohnt, die Taste lange zu drücken, um die Aufnahme zu starten, und sie loszulassen, um sie abzuschließen. Das vue3-nutUI-Framework bietet kein Ereignis für langes Drücken von Schaltflächen. Sie müssen daher das vom Applet nativ bereitgestellte Ereignis „Longpress“ verwenden. Dieses Ereignis wird ausgelöst, wenn der Finger länger als 350 ms berührt, und löst kein Tippereignis aus. Wenn Sie die Aufnahme durch Loslassen beenden möchten, müssen Sie dies mit dem Touchend-Ereignis kombinieren, um die Anforderung des langen Drückens zum Aufnehmen und Loslassens zum Beenden zu erfüllen.

<nut-button block type="info" icon="Mikrofon" @longpress="Longpress-Griff" @touchend="GriffTouchend">
	Aufnahme</nut-button>

Debug ausführen

Führen Sie npm run dev:weapp project aus, das Dateiänderungen überwacht und in Echtzeit in ein Miniprogramm kompiliert. Öffnen Sie dann das WeChat-Entwicklertool, importieren Sie das Projekt, öffnen Sie das catApp-Stammverzeichnis und Sie können es in der Vorschau anzeigen.

Zusammenfassen

Der Vorteil von Taro ist, dass man Code einmal schreiben und ihn dann an mehrere Endgeräte anpassen kann. Wenn man damit nur ein WeChat-Applet entwickelt, ist das noch ein weiter Weg. Wäre es nicht besser, es einfach nativ zu entwickeln? Die Möglichkeit, Vue3 für die Entwicklung zu verwenden, ist zwar immer noch recht attraktiv, aber Vue3 verwendet intern Proxy und kann nicht direkt unter Systemen mit niedrigeren Versionen (iOS 9, Android 6) verwendet werden. Derzeit ist es unmöglich, diese Benutzer direkt aufzugeben, daher ist es immer noch nicht sehr praktisch.

An dieser Stelle fragen sich manche vielleicht, wie man eine Konvertierung in die Katzensprache erreicht? ? Ehrlich gesagt ist die Fähigkeit, mit Katzen zu kommunizieren, noch nicht entwickelt. Hier verwenden wir nur einige lokale Ressourcendateien und fest codierte Daten. Spielen Sie einfach zum Spaß damit und nehmen Sie es nicht zu ernst. Sobald die Branche über diese Fähigkeit verfügt und eine Schnittstelle bereitstellt, wird die Funktion durch Zugriff tatsächlich realisiert. So wie Megvii seine Bemühungen in den Bereichen künstliche Intelligenz und Deep Learning verstärkt hat, stellt sich die Frage, ob es möglich ist, diese Art einfacher Kommunikationsfähigkeit durch das Trainieren verschiedener Miau-Laute und die Kombination verschiedener Miau-Szenarien zu entwickeln.

Der vollständige Code befindet sich im GitHub-Repository und Interessierte können ihn herunterladen und damit spielen.

Damit ist dieser Artikel über die Verwendung von vue3 zur Implementierung eines Mensch-Katze-Kommunikations-Applets abgeschlossen. Weitere relevante Inhalte zum Mensch-Katze-Kommunikations-Applet von vue3 finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!