序文WeChat ミニプログラムのネイティブ UI が少し物足りないと感じることがあるので、サードパーティのフレームワークを導入することはできますか?この記事では、合計 8 つのステップを含む Vant の導入を例に説明します。クラウド開発プロジェクトであるかどうかに関係なく使用されます。 実装手順1. WeChat アプレット開発ツールを開き、プロジェクトに入ります。プロジェクトのルート フォルダーを右クリックします。 「ターミナルで開く」を選択します。 (ルートディレクトリであることに注意してください) 2. コマンド ウィンドウに「npm init」と入力します。その後、すべての構成はデフォルト構成に従って実行されるので、Enter キーをクリックするだけです。 3. コマンド ウィンドウに npm install と入力してビルドします。成功すると、ルート ディレクトリに package.json ファイルと package-lock.json ファイルが生成されます。 4. 次に、Vant フレームワークのインストールを続行します。手順は、公式 Web サイト vant-contrib.gitee.io/vant-weapp/… に従ってください。 4.1 npm i @vant/weapp -S --production 4.2 npm と vant-weapp -S --production 4.3 app.jsonを変更する 4.4 project.config.jsonを変更する 5. WeChat 開発者ツールに戻り、「ツール」列で「Build npm」を見つけます。ビルドが成功するまで待ちます。 6. 最後に、npm モジュールを使用する必要があります。「詳細」で、「npm モジュールを使用する」を見つけてチェックします。 7. Vantコンポーネントを使用し、app.jsonまたはindex.jsonに導入します。詳細については、Vant公式サイトのクイックスタートを参照してください。 8. ページ内で使用するには、コンポーネントを直接インポートするだけです。 ··· 幕間···これはテスト AppId で構築されたプロジェクトなので、クラウド開発は使用しませんでした。その結果、後続の手順が完了した後にエラー メッセージが報告されます。エラーメッセージは下図(1)の通りです。そこで気づいたのですが、プロジェクトディレクトリが、私がクラウドで開発した別のプロジェクトのファイルディレクトリと異なっており、ファイルが見つからない状態でした。具体的な理由はわかりません。しかし、下の図(2)に示すように、クラウド開発プロジェクトでは成功しました。手順は上記とまったく同じです。 このことから、誰もが公式 AppId (つまり、ミニプログラムのパブリック プラットフォームへの登録が成功した後の AppId) を使用するように努めるべきであると結論付けることができます。後でさらにトラブルに巻き込まれないようにしてください。 本来は、問題のあるメモを記録するのではなく、クラウド開発プロジェクトを利用して再度運用し、最終的な成功した結果を載せたいと考えていました。しかし、よく考えてみると、これは悪い考えではありません。次回同じ間違いを繰り返さないように自分に言い聞かせています。ということで、最後にこのブログを皆さんに紹介したいと思います。これが、皆さんにとって、細部に注意を払い、不注意にならないようにするためのリマインダーとしても役立つことを願っています。 ··· 魔法のような光景···翌日、WeChat 開発者ツールを開くと、テスト番号 AppId のプロジェクトが再び動作し、コンソールのエラー メッセージが表示されなくなっていました。とても恥ずかしいです!何が起こっているのかよく分かりません(誰か知っていたら、答えを教えてください!話すのが怖いです…)。下図(3)のように写真の上に直接置きます。 図(1)エラーメッセージ 図(2):Vantコンポーネントを使用したクラウド開発プロジェクトの成功 図(3):テスト番号AppIdはVantフレームワークを正常に使用しています 要約するこれで、VantフレームワークをWeChatミニプログラムに導入する方法についての記事は終わりです。VantフレームワークをWeChatミニプログラムに導入する方法についてさらに詳しく知りたい場合は、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも123WORDPRESS.COMをよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: CentOS 7.2 は uniapp プロジェクトを展開するための nginx Web サーバーを構築します
>>: MySQL でのフィルター条件なしのカウントの詳細な説明
デフォルトでは、テーブルの境界線は 0 ですが、テーブルの境界線を設定できます。基本的な構文<...
目次1. 完全なSQLクエリステートメントの記述順序2. 完全なSQL文の実行順序3. select...
1. 何ですか マークアップ言語として、CSSは比較的シンプルな構文とユーザーに対する要件が低いが、...
目次背景: Nginx スムーズ アップグレード ソリューションフォールバック手順要約する背景:負荷...
目次1. ルーティング構成2. Vueページのネスト3. ネストされた関係1. ルーティング構成 定...
日常業務では、次のようなレイアウトに遭遇することがあります。親要素のフレーム (ブラウザのサイズに応...
目次1. DateTimePickerの日付選択範囲は現在時刻とそれ以前です2. DateTimeP...
この記事では、例を使用して、MySQL 外部キーの基本的な機能と使用方法を説明します。ご参考までに、...
【はじめに】: Handtrack.jsは、ブラウザ上で直接リアルタイムの手の動きの追跡と検出を実...
コンテンツ1. 読者に留まる理由を与える。ウェブページを面白く魅力的なものにしましょう。しかし、まず...
目次1. はじめに2. スケジューラの基本概念2.1. 実行キュー (rq) 2.2 スケジューリン...
Ubuntu環境におけるPHP関連パスPHP パス /usr/bin/php phpize5 /us...
node を D ドライブにインストールしましたが、C ドライブのスペースを占有したくなかったため、...
1. はじめにresolv.conf は、さまざまなオペレーティング システムのドメイン ネーム シ...
1. Concat関数。よく使用される接続文字列: concat 関数。たとえば、SQLクエリ条件...