Das WeChat Mini-Programm nutzt Simultanübersetzung zur Implementierung der Spracherkennung

Das WeChat Mini-Programm nutzt Simultanübersetzung zur Implementierung der Spracherkennung

Ich verwende die Funktion zur Spracherkennung mit Simultanübersetzung, um die Sprachsuchfunktion auf der Homepage des WeChat-Applets zu realisieren. Wenn Sie auch so sind, herzlichen Glückwunsch. Sie können Strg+C, Strg+V drücken, um es wieder zu ändern. Wenn Sie nicht so sind, gehen Sie nicht in Eile. Das Lesen meines Artikels wird Ihnen hilfreich sein!

Gehen Sie zunächst auf der öffentlichen WeChat-Plattform (die den Hintergrund des Miniprogramms bildet) in der linken Menüleiste zu Einstellungen --> Plugin-Verwaltung unter Drittanbietereinstellungen --> Hinzufügen --> Nach Simultandolmetschen suchen --> Klicken Sie auf Hinzufügen

Der nächste Schritt besteht darin, einige Einstellungen im Code hinzuzufügen.

Wenn Sie WeChat-Entwicklertools zum Entwickeln von Miniprogrammen verwenden, müssen Sie der Datei app.json den folgenden Code hinzufügen.

// app.json
{
    ...
    "Plugins": {
        ...
        "WechatSI": {
            "Version": "0.3.4", // Dies ist die Version der Simultanübersetzung (Sie können auch die neueste Version der Simultanübersetzung überprüfen, die der öffentlichen WeChat-Plattform hinzugefügt wurde)
            "provider": "wx069ba97219f66d99" // Dies ist die ID des Simultandolmetschers
        }
    }
}

Wenn Sie Hbuildex zum Entwickeln eines kleinen Programms verwenden, müssen Sie Änderungen in der Quellcodeansicht der Datei manifest.json vornehmen.

Suchen Sie in der Quellcodeansicht nach mp-weixin und fügen Sie es gemäß dem folgenden Code hinzu und ändern Sie es

// manifest.json
/* Mit Miniprogrammen verbunden*/
"mp-weixin": {
    "appid": "xxxxxxxxxx", // Dies ist die AppId Ihres Applets
    ...
    "Plugins": {
        "WechatSI": {
            "Version": "0.3.4", // Dies ist die Version der Simultanübersetzung (Sie können auch die neueste Version der Simultanübersetzung überprüfen, die der öffentlichen WeChat-Plattform hinzugefügt wurde)
            "provider": "wx069ba97219f66d99" // Dies ist die ID des Simultandolmetschers
        }
    }
}

Nach Abschluss der obigen Schritte können Sie gemäß der offiziellen Dokumentation entwickeln

Nachfolgend sehen Sie den Implementierungscode meiner Funktion

// index.vue Hier schreibe ich nur den Sprachbutton in mein Seitenlayout (vereinfacht)
<Vorlage>
    <div @click="yuyin" Klasse="yuyin-Symbol">
        <img :src="baseUrlImg+'/yuyin.png'" alt="" class="img" />
    </div>
</Vorlage>
<Skript>
    Standard exportieren {
        Daten() {
            zurückkehren {
                // Dies ist der Inhalt des Suchfeldes Suchwort: ''
            }
        },
        Methoden: {
            // Sprachklick-Ereignis: function() {
                var das = dies
                // Initiieren Sie eine Autorisierungsanfrage an den Benutzeruni.authorize({
                    scope: 'scope.record', // Ruft die Aufnahmefunktion ab, also die Mikrofonberechtigung success: (res) => {
                        // Benutzer mit der Berechtigung, das Mikrofon zu verwenden, um die Ereignisfunktion für die Sprachsuche that.plugin() aufzurufen
                    },
                    // Der Benutzer hat keine Berechtigung, das Mikrofon zu verwenden. Führen Sie den folgenden Code aus: fail(res) {
                        // Ein modales Popup-Fenster anzeigen, um den Benutzer daran zu erinnern, dass die Mikrofonberechtigung nicht aktiviert ist uni.showModal({
                            Inhalt: „Es wurde festgestellt, dass Sie die Mikrofonberechtigung nicht aktiviert haben. Bitte lassen Sie die Mikrofonberechtigung aktiviert“,
                            confirmText: 'Zum Öffnen gehen',
                            showCancel: false,
                            Erfolg: (res) => {
                                Konsole.log(res)
                                wenn(res.bestätigen) {
                                    // Öffnet die Einstellungsschnittstelle des Client-Applets und gibt das Ergebnis der Benutzereinstellungen zurück uni.openSetting({
                                        Erfolg: (res) => {
                                            Konsole.log(res)
                                            wenn(res.authSetting['scope.record'] == false) {
                                                das.plugin()
                                            }
                                        }
                                    })
                                } anders {
                                    uni.navigateBack({
                                        Delta: 1
                                    })
                                }
                            }
                        })
                    }
                })
            }
            // Plugin für die Sprachsuche () {
                var das = dies
                var plugin = requirePlugin('WechatSI')
                var manager = plugin.getRecordRecognitionManager()
                // Legen Sie die Aufnahmeparameter fest manager.start({
                    Dauer: 5000, // Zeit Sprache: "zh_CN" // Sprache })
                // Aufzeichnung starten manager.onStart = function(res) {
                    console.log("Aufnahmeerkennung erfolgreich gestartet", res)
                    wenn(res.msg == 'Ok') {
                        // Den Benutzer darüber informieren, dass die Aufzeichnung läuftuni.showToast({
                            Titel: „Stimme wird erkannt...“,
                            Dauer: 5000,
                            Symbol: „wird geladen“
                        })
                    }
                }
                // Aufnahme endet manager.onStop = function(res) {
                    // Den Benutzer darauf hinweisen, dass er zur Suchseite springt (da der Sprung bei mir 1 bis 2 Sekunden gedauert hätte, habe ich ein Eingabeaufforderungsfeld eingerichtet)
                    uni.showToast({
                        Titel: „Umleitung …“,
                        Dauer: 1500,
                        Symbol: „Erfolg“
                    })
                    // Die erkannte Sprache in Text übersetzen plugin.translate({
                        von: 'en_US',
                        lto: 'zh_CN',
                        Inhalt: Ergebnis.Ergebnis,
                        Erfolg: Funktion (Res) {
                            wenn(res.retcode == 0) {
                                // (Dies ist beim iPhone der Fall, bei Android bin ich mir nicht sicher) Die Spracherkennung fügt manchmal am Ende ein Symbol hinzu, wenn (res.result.charAt(res.result.length - 1) == '.' || res.result.charAt(res.result.length - 1) == '.') {
                                    res.result = res.result.substr(0, res.result.length - 1);
                                }
                                // Geben Sie den übersetzten Inhalt in das Suchfeld ein that.search_word = res.result
                                // Code, der die Suchfunktion that.searchName() ausführt
                            } anders {
                                console.log('Übersetzung fehlgeschlagen', res)
                            }
                        },
                        Fehler: Funktion (Res) {
                            console.log('Netzwerkfehler', res)
                            // Wenn der Benutzer leise spricht oder nicht spricht, werden diese beiden Fehler gemeldet if(res.retcode == -10001 || res.retcode == -10002) {
                                uni.showToast({
                                    Titel: „Ich habe nicht gehört, was du gesagt hast“,
                                    Dauer: 1000,
                                    Symbol: „Fehler“
                                })
                            }
                        }
                    })
                }
                 // Fehlerinformationen drucken manager.onError = function(res) {
                    console.error('Fehlermeldung', res.msg)
                }
            }
        }
    }
</Skript>

Dies ist das Ende dieses Artikels darüber, wie das WeChat Mini-Programm Simultanübersetzung zur Implementierung der Spracherkennung verwendet. Weitere relevante Inhalte zur Spracherkennung des Mini-Programms 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!

Das könnte Sie auch interessieren:
  • WeChat-Applet-Implementierungscode für Echtzeit-Spracherkennung über WebSocket
  • Das WeChat-Applet implementiert die Spracherkennung in die Textfunktion und die dabei auftretenden Fallstricke
  • Detaillierte Erläuterung des WeChat-Applets und der Spracherkennungsschnittstelle von Baidu
  • Schnelle Implementierung der Spracherkennungsfunktion des Miniprogramms in 30 Minuten

<<:  Mysql fragt die ausgeführten Transaktionen ab und wie auf Sperren gewartet werden soll

>>:  So installieren Sie MongoDB 4.2 mit Yum auf CentOS8

Artikel empfehlen

So isolieren Sie Benutzer in Docker-Containern

Im vorherigen Artikel „UID und GID in Docker-Cont...

Einige Tipps zur richtigen Verwendung des HTML-Titelattributs

Wenn Sie Inhalte vor Benutzern von Telefonen, Tabl...

Json-String + Cookie + lokaler Speicher in JS

Inhaltsverzeichnis 1.JSON-Zeichenfolge 1.1Json-Sy...

Beispiele für personalisiertes und kreatives Website-Design (30)

Aus diesem Grund haben wir eine Auswahl von 30 Kom...

Mit CSS3 implementierte Schaltfläche zum Hovern von Bildern

Ergebnis:Implementierungscode html <ul Klasse=...

CSS3 erzielt einen coolen Karusselleffekt mit geschnittenen Bildern

Heute lernen wir, wie man mit CSS eine coole Bild...

Detaillierte Erläuterung des MySQL-Mechanismus zur gemeinsamen Abfrageoptimierung

Inhaltsverzeichnis Strategie zur Ausführung föder...

So verwenden Sie das Modul-FS-Dateisystem in Nodejs

Inhaltsverzeichnis Überblick Dateideskriptoren Sy...

Mit wie vielen Pixeln sollte eine Webseite gestaltet werden?

Viele Webdesigner sind beim Entwurf des Webseitenl...

So installieren Sie Docker CE auf Ubuntu 18.04 (Community Edition)

Deinstallieren Sie alte Versionen Sollten Sie zuv...

So verwenden Sie die Debouce-Anti-Shake-Funktion in Vue

Inhaltsverzeichnis 1. Anti-Shake-Funktion 2. Verw...