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 でのフィルター条件なしのカウントの詳細な説明

推薦する

テキストエリアの使用に関する注意事項

なぜテキストエリアについて具体的に言及するのでしょうか?なぜなら、textarea ノードは実際には...

JS を使って CSS3 で丸い角を実装する方法

IE で CSS3 を使用して角を丸くする方法を探していたときに、例を見つけました。まだテストして...

5つのクールで実用的なHTMLタグと属性の紹介

実はこれもクリックベイトのタイトルであり、「派手」とは言えません。ただ私が無知で、こうしたラベルを見...

CSS での配置の使用方法の詳細な研究 (要約)

CSS における位置指定の概要position属性は英語で位置を意味し、 CSSでの主な機能は要素...

Java+Tomcat 環境の展開とインストールのプロセス図

次に、Centos7 に Java+Tomcat をインストールします。インターネット上には多くの記...

時点別のMySQLデータベース復旧実績

はじめに: 時間ポイントによる MySQL データベースの復旧どの企業にとっても、データは最も価値の...

MySQLデータベースに中国語の文字を保存するときに発生するエラーを解決する方法を教えます

目次1. 遭遇した問題2. 問題を分析する3. 本当の問題4. 解決策5. ソリューション効果1. ...

Mysql で期間の交差をクエリする方法

MySQLクエリ期間の交差使用シナリオデータベース テーブルには、starttime と endti...

ウェブサイトのAboutページの紹介コンテンツの書き方

公式、電子商取引、ソーシャル ネットワーキング、個人のいずれの Web サイトでも、訪問者に貴重な時...

Ubuntuで余分なカーネルを削除する方法

ステップ1: 現在のカーネルを表示する 読み取る $ uname -a Linux rew 4.15...

Nest.js 認証検証方法の例

目次0x0 はじめに0x1 RBAC 実装0x2 クレームベースの承認0x3 統合 CASL 0x4...

Dockerでランナーコンテナを構成する方法

1. ランナーコンテナを作成する mk@mk-pc:~/Desktop$ docker run -d...

Vue開発ウェブサイトSEO最適化方法の詳細な説明

ページデータの表示には Vue などの js のデータバインディング機構が使用されるため、クローラー...

JS+AJAX は、州、市、地区のドロップダウン リストのリンクを実現します。

この記事では、州、市、地区のドロップダウンリストのリンクを実現するためのJS + AJAXの具体的な...

Vue を通じて QR コードスキャン機能を実装する

ヒントこのプラグインは https プロトコルでのみアクセスできます。http プロトコルはうまく機...