VantフレームワークをWeChatアプレットに導入するプロセス全体の記録

序文

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）のように写真の上に直接置きます。

図（１）エラーメッセージ

図（2）：Vantコンポーネントを使用したクラウド開発プロジェクトの成功

図（3）：テスト番号AppIdはVantフレームワークを正常に使用しています

要約する

これで、VantフレームワークをWeChatミニプログラムに導入する方法についての記事は終わりです。VantフレームワークをWeChatミニプログラムに導入する方法についてさらに詳しく知りたい場合は、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも123WORDPRESS.COMをよろしくお願いいたします。