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

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

図(1)エラーメッセージ

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

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

要約する

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

以下もご興味があるかもしれません:
  • WeChatアプレットでvantフレームワークを使用するための具体的な手順

<<:  CentOS 7.2 は uniapp プロジェクトを展開するための nginx Web サーバーを構築します

>>:  MySQL でのフィルター条件なしのカウントの詳細な説明

推薦する

HTML テーブル マークアップ チュートリアル (2): テーブル境界属性 BORDER

デフォルトでは、テーブルの境界線は 0 ですが、テーブルの境界線を設定できます。基本的な構文<...

Mysql系SQLクエリ文の書き順と実行順を詳しく解説

目次1. 完全なSQLクエリステートメントの記述順序2. 完全なSQL文の実行順序3. select...

CSSプリコンパイル言語とその違いの詳細な説明

1. 何ですか マークアップ言語として、CSSは比較的シンプルな構文とユーザーに対する要件が低いが、...

Nginx バージョンのスムーズなアップグレードソリューションの詳細説明

目次背景: Nginx スムーズ アップグレード ソリューションフォールバック手順要約する背景:負荷...

vue router-view のネストされた表示実装

目次1. ルーティング構成2. Vueページのネスト3. ネストされた関係1. ルーティング構成 定...

CSSアダプティブレイアウトは、サブ要素項目の全体的な中央揃えと内部項目の左揃えを実現します。

日常業務では、次のようなレイアウトに遭遇することがあります。親要素のフレーム (ブラウザのサイズに応...

Vue Element UIの使用時に遭遇した問題をまとめる

目次1. DateTimePickerの日付選択範囲は現在時刻とそれ以前です2. DateTimeP...

MySQL外部キーの基本的な機能と使用方法の詳細な説明

この記事では、例を使用して、MySQL 外部キーの基本的な機能と使用方法を説明します。ご参考までに、...

手の動きをリアルタイムで監視するための Handtrack.js ライブラリ (推奨)

【はじめに】: Handtrack.jsは、ブラウザ上で直接リアルタイムの手の動きの追跡と検出を実...

Web コンテンツ ページを作成するための 9 つの実用的なヒント

コンテンツ1. 読者に留まる理由を与える。ウェブページを面白く魅力的なものにしましょう。しかし、まず...

Linuxカーネルスケジューラソースコード初期化の分析

目次1. はじめに2. スケジューラの基本概念2.1. 実行キュー (rq) 2.2 スケジューリン...

Ubuntu環境でのPHP関連のパスと変更方法

Ubuntu環境におけるPHP関連パスPHP パス /usr/bin/php phpize5 /us...

npm グローバル モジュールのデフォルトのインストール パスを変更するためにノードのインストールをカスタマイズする手順

node を D ドライブにインストールしましたが、C ドライブのスペースを占有したくなかったため、...

Linux resolv.conf の簡単な分析

1. はじめにresolv.conf は、さまざまなオペレーティング システムのドメイン ネーム シ...

MySQL でよく使われる型変換関数の概要 (推奨)

1. Concat関数。よく使用される接続文字列: concat 関数。たとえば、SQLクエリ条件...