序文猫を飼っている人の多くは、猫とコミュニケーションを取りたいと思っていると思います。猫がさまざまな鳴き声を出すのは、どうしたのか、お腹が空いているのか、など猫に何かを聞いていることが多いです。ペット翻訳ソフトも探して、自分で作ってみます[手動犬頭]。 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クエリ文の実行プロセスを理解するための記事
目次問題分析なぜカプセル化なのかパッケージの内容は何ですか?テーブルコンポーネントをカプセル化するデ...
このタグはHTML3.2の一部ではなく、MSIE3以降のカーネルのみをサポートしています。そのため、...
目次1. ファイルをインポートする2. HTMLページ3. メインコード4. 画像をbase64に変...
Linux で実行可能プログラムまたは so の依存ライブラリを表示します。 Linux の実行可能...
目次序文yarn create は何をしますか?ソースコード分析プロジェクトの依存関係テンプレート構...
1. cuda10.1をダウンロードします。 NVIDIA 公式ウェブサイト リンク: https:...
SQL ステートメント内の単語が mysql のキーワードと競合する場合は、`` (タブ キーの上)...
1. 分割スクリプト (splitNginxLog.sh) を作成します。 * この例では、ログ分割...
目次1 コンテナクラウドとは何ですか? 2 Dockerの紹介3 dockerを使ってMySQLをイ...
目次需要背景Nginx を使用する理由は何ですか? Nginx によるポート転送依存関係をインストー...
コンテンツ プロパティは CSS 2.1 で導入され、:before および :after 疑似要素...
MySQL はインストールが簡単で、高速で、豊富な機能を備えています。これはオープンソース運動のベン...
導入MySQL データベースの読み取りと書き込みの分離を設定すると、データベースに対する書き込み操作...
図書館運営クエリ1.SHOW DATABASE; ----すべてのデータベースを照会する2. SHO...
1. 準備例: 2 台のマシン: 192.168.219.146 (マスター)、192.168.21...