vue3を使用して人間と猫のコミュニケーションアプレットを実装する

vue3を使用して人間と猫のコミュニケーションアプレットを実装する

序文

猫を飼っている人の多くは、猫とコミュニケーションを取りたいと思っていると思います。猫がさまざまな鳴き声を出すのは、どうしたのか、お腹が空いているのか、など猫に何かを聞いていることが多いです。ペット翻訳ソフトも探して、自分で作ってみます[手動犬頭]。

WeChat ミニプログラムは Vue を使用した直接的な開発をサポートしていませんが、さまざまな開発フレームワークを使用したクロスエンドアプリケーションの開発をサポートするソリューションは業界ですでに数多く存在します。

Taro バージョン 3.0 では Vue3 を使用した開発がサポートされるようになったので、Taro を使用して WeChat アプレットを実装してみましょう。

プロジェクトを初期化する

Taroの詳しい使い方については公式ドキュメントを参照してください。まず@tarojs/cliをグローバルにインストールします

npm をインストール -g @tarojs/cli

インストールが成功したら、taro コマンドを使用してテンプレート プロジェクトを作成します。

taro init catApp

ここではvue3-nutUIフレームワークを選択しています。このフレームワークはtaro-uiほど多くの機能はありませんが、taro-uiはreactしかサポートしていないため、これを使用するしかありません。

デザイン

結局、視覚的な出力がなければ、自分自身に頼らなければなりません。すぐに PPT を開いて簡単なスケッチを描きます。

主な機能コンポーネントは 2 つあります。

  • 猫に伝えたいことを入力し、それをニャー言語に変換して再生します
  • 録音して、鳴き声を録音し、それをテキストに変換して再生します

コードの実装

オンデマンドロード

vue3-nutUI フレームワークをオンデマンドで導入します。先ほどプロジェクトの初期化時にオンデマンドで導入しました。app.js では、プロジェクトに必要なコンポーネントをオンデマンドで導入するだけです。

'vue' から {createApp} をインポートします。
'@nutui/nutui-taro' から Button、Toast、Tabbar、TabbarItem、Icon、Avatar、Input } をインポートします。
'@nutui/nutui-taro/dist/style.css' をインポートします。

定数App = createApp()
アプリ.use(ボタン).use(トースト).use(タブバー).use(タブバーアイテム).use(アイコン).use(アバター).use(入力)

デフォルトアプリをエクスポート

オーディオを再生

飼い主に伝えたい内容を入力し、ニャー言語に変換した後、再生するには、Taro が提供するオーディオ再生インターフェースを使用する必要があります。オーディオ再生では、より公式な Taro.createInnerAudioContext インターフェイスが使用されるようになりました。元の Taro.stopVoice と Taro.playVoice はメンテナンスされなくなりました。

const innerAudioContext = Taro.createInnerAudioContext();
太郎.setInnerAudioOption({
	obeyMuteSwitch: false、
});

innerAudioContext.src = 'xxx.mp3';
内部オーディオコンテキストを再生します。

innerAudioContext.onPlay(()=>{
	console.log('プレイを開始')
})
インナーオーディオコンテキスト.onEnded(()=>{
	console.log('再生終了')
})

obeyMuteSwitch 設定は、ミュートスイッチに従うかどうかです (iOS でのみ有効)。false に設定すると、サイレント モードでもサウンドを再生できます。デフォルトは true です。ここに注意を払わず、長い間混乱していました。オーディオの再生に問題があると思っていましたが、ミュートされていることが判明しました。

録音

猫の飼い主を記録するには、Taro.getRecorderManager記録インターフェースを使用する必要があります。

const レコーダーマネージャー = Taro.getRecorderManager();
レコーダーマネージャー.onStart(() => {
	console.log("レコーダー開始");
});
レコーダーマネージャー.onStop((res) => {
	console.log("レコーダー停止", res);
	const { tempFilePath, 期間 } = res;
	// tempFilePath は録音ファイルの一時パスです //duration は録音の長さです // ここで再生する必要がある場合は、録音ファイルのアドレスを設定すると、録音を再生できます innerAudioContext.src = tempFilePath;
	内部オーディオコンテキストを再生します。
});

長押しイベント

録音するときは、長押しして録音を開始し、放して録音を完了することに慣れているかもしれません。 vue3-nutUI フレームワークはボタンの長押しイベントを提供しないため、アプレットによってネイティブに提供される longpress イベントを使用する必要があります。このイベントは、指が 350 ミリ秒以上タッチするとトリガーされ、タップ イベントはトリガーされません。手を離して録画を終了する場合は、touchend イベントと組み合わせて、長押しして録画し、手を離して終了するという要件を満たす必要があります。

<nut-button ブロック type="info" icon="microphone" @longpress="handleLongpress" @touchend="handleTouchend">
	録音中</nut-button>

デバッグを実行

npm run dev:weapp project を実行すると、ファイルの変更が監視され、リアルタイムでミニプログラムにコンパイルされます。次に、WeChat 開発者ツールを開き、プロジェクトをインポートし、catApp ルート ディレクトリを開くことを選択すると、プレビューできます。

要約する

Taro の利点は、一度コードを書いて複数の端末に適応できることです。WeChat アプレットの開発に使うだけだと、まだまだ道のりは長いです。ネイティブで開発したほうが良いのではないでしょうか。しかし、開発に Vue3 を使用できることは依然として非常に魅力的ですが、Vue3 は内部で Proxy を使用しており、下位バージョンのシステム (iOS 9、Android 6) では直接使用できません。現時点では、これらのユーザーを直接放棄することは不可能であるため、まだあまり実用的ではありません。

この時点で、猫の言語変換をどのように実現するかと疑問に思う人もいるかもしれません。 ?正直に言うと、猫とコミュニケーションをとる能力はまだ世界には存在しません。ここでは、ローカル リソース ファイルとハードコードされたデータを使用するだけです。娯楽として遊んで、あまり真剣に考えないでください。業界がこの機能を備え、インターフェースを提供すれば、アクセスを通じて機能が真に実現されるようになります。 Megviiが人工知能やディープラーニングの分野で取り組みを深めているように、さまざまな鳴き声を訓練し、さまざまな鳴き声のシナリオを組み合わせることで、このようなシンプルなコミュニケーション機能を開発することは可能でしょうか?

完全なコードは github リポジトリにあり、興味のある方はダウンロードして試すことができます。

これで、vue3 を使用して人間と猫のコミュニケーション アプレットを実装する方法に関するこの記事は終了です。vue3 人間と猫のコミュニケーション アプレットに関する関連コンテンツをさらにご覧になりたい場合は、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JD Vue3コンポーネントライブラリはミニプログラム開発の詳細なプロセスをサポートします

<<:  ソースコード分析からTomcatがサーブレットの初期化を呼び出す方法の詳細な説明

>>:  MySQLクエリ文の実行プロセスを理解するための記事

推薦する

元のPATHを上書きしてコマンドが見つからないというメッセージが表示されるコマンド失敗の問題を解決する方法

同僚から、LINUX サーバー上の多くのコマンドが (コマンドが見つかりません) というプロンプトで...

css-loader を使用して vue-cli で css モジュールを実装する

【序文】 Vue と React の CSS モジュール ソリューションはどちらも、実装にローダーに...

CentOS7 インストール Zabbix 4.0 チュートリアル (イラストとテキスト)

SeLinuxを無効にするsetenforce 0永久に閉店: vi /etc/selinux/c...

Dockerカスタムネットワーク実装

目次1. コンテナ相互接続を実現するためにネットワークをカスタマイズする2. ネットワーク接続1. ...

CSSスコープ(スタイル分割)の使用の概要

1. CSSスコープの使用(スタイル分割) Vue では、CSS スタイルを現在のコンポーネントでの...

VMware ESXi 6.0 および仮想マシンのインストール チュートリアルの展開 (画像とテキスト)

社内には以前からアイドル状態だった、構成の整ったサーバーがあったので、EXSI 6.0 を使って複数...

子コンポーネントを通じて親コンポーネントのプロパティを変更するための Vue のさまざまな実装方法

目次序文一般的な方法1. 親コンポーネントを介して子コンポーネントの発行イベントをリッスンしてpro...

Vue で変数式セレクターを実装する方法

目次HTML構造の定義入力タグのバインディング属性入力タグはキーダウンイベントをリッスンしますli ...

winx64 での mysql5.7.19 の基本的なインストール プロセス (詳細)

1. ダウンロード参考: https://www.jb51.net/softs/451120.ht...

Centos は chrony 時間同期サーバー プロセス図を構築します

私の環境: 3 centos7.5 1804マスター 192.168.100.140ノード1 192...

SQL 結合クエリの内部結合、外部結合、クロス結合の違いの詳細な説明

データベースを使用するアプリケーションを開発する場合、必然的にユニオンクエリを使用する必要があります...

MySQL の昇順および降順データソートの実装

データの昇順、降順ソート1. フィールド名による単一フィールドのソート順機能:どのフィールドを基準に...

MySQL準備原理の詳細な説明

準備のメリットPrepare SQL が生成される理由。まず、MySQL サーバー上で SQL を実...

node.js グローバル変数の具体的な使用法

グローバルオブジェクトすべてのモジュールは呼び出すことができますglobal: ブラウザの wind...

Vue 2つのフィールドの共同検証によりパスワード変更機能を実現

目次1. はじめに2. ソリューションの実装2.1 実装コード2.2 コードの説明2.3 検証結果1...