序文猫を飼っている人の多くは、猫とコミュニケーションを取りたいと思っていると思います。猫がさまざまな鳴き声を出すのは、どうしたのか、お腹が空いているのか、など猫に何かを聞いていることが多いです。ペット翻訳ソフトも探して、自分で作ってみます[手動犬頭]。 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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: ソースコード分析からTomcatがサーブレットの初期化を呼び出す方法の詳細な説明
>>: MySQLクエリ文の実行プロセスを理解するための記事
同僚から、LINUX サーバー上の多くのコマンドが (コマンドが見つかりません) というプロンプトで...
【序文】 Vue と React の CSS モジュール ソリューションはどちらも、実装にローダーに...
SeLinuxを無効にするsetenforce 0永久に閉店: vi /etc/selinux/c...
目次1. コンテナ相互接続を実現するためにネットワークをカスタマイズする2. ネットワーク接続1. ...
1. CSSスコープの使用(スタイル分割) Vue では、CSS スタイルを現在のコンポーネントでの...
社内には以前からアイドル状態だった、構成の整ったサーバーがあったので、EXSI 6.0 を使って複数...
目次序文一般的な方法1. 親コンポーネントを介して子コンポーネントの発行イベントをリッスンしてpro...
目次HTML構造の定義入力タグのバインディング属性入力タグはキーダウンイベントをリッスンしますli ...
1. ダウンロード参考: https://www.jb51.net/softs/451120.ht...
私の環境: 3 centos7.5 1804マスター 192.168.100.140ノード1 192...
データベースを使用するアプリケーションを開発する場合、必然的にユニオンクエリを使用する必要があります...
データの昇順、降順ソート1. フィールド名による単一フィールドのソート順機能:どのフィールドを基準に...
準備のメリットPrepare SQL が生成される理由。まず、MySQL サーバー上で SQL を実...
グローバルオブジェクトすべてのモジュールは呼び出すことができますglobal: ブラウザの wind...
目次1. はじめに2. ソリューションの実装2.1 実装コード2.2 コードの説明2.3 検証結果1...