WeChatアプレットでvantフレームワークを使用するための具体的な手順

1. vantフレームワークといえば、誰もが知っているはずです。モバイル端末の開発を行ったことがある友人なら、誰もが知っているはずです。

2. Vant は、 Youzan のフロントエンド チームによって開発されたオープンソースのモバイル コンポーネント ライブラリです。2017 年にオープンソース化され、4 年間メンテナンスされてきました。 Vant は、Youzan のコアビジネスをすべて社内で担い、社外では 10 万人以上の開発者にサービスを提供しています。業界で主流のモバイル コンポーネント ライブラリの 1 つです。

3. これ以上時間を無駄にせず、今日の話題にすぐに移りましょう。 WeChat アプレットで vant コンポーネント ライブラリを使用するにはどうすればよいですか?

初め

まず、vant weapp の Web サイトを開きましょう。ここで Web サイトのアドレスを紹介します。ヴァント・ウェップのウェブサイト

ウェブサイトを開いたら、「すぐに始める」をクリックします。上記の手順では、ミニプログラムで vant コンポーネント ライブラリを使用する方法について説明します。

次に、vant UI コンポーネント ライブラリをインストールして使用する方法を紹介します。

1. アプレットのプロジェクト ディレクトリを開き、ファイルの場所を開きます。

2. プロジェクトファイルを初期化する

ここではcmdウィンドウから初期化します

3. プロジェクトを初期化するコマンドを入力します

npm 初期化

この時点で、ディレクトリに追加のpackage.jsonファイルがあることがわかります。

4. 依存関係をインストールする

4.1 npm経由でvant/weappをインストールする

npm と @vant/weapp -S --production を実行します。

4.2 ミニプログラムのインストール

npm i ミニプログラム-sm-crypto --production

インストールが完了すると、ディレクトリ内にさらにいくつかのファイルが表示されます。

4.3 app.jsonを変更する

app.json の"style": "v2"を削除します。ミニプログラムの基本コンポーネントの新しいバージョンでは、多くのスタイルが強制的に追加されており、カバーするのが難しいためです。閉じないと、一部のコンポーネントのスタイルに混乱が生じます。

4.4 project.config.jsonを変更する

開発者ツールによって作成されたプロジェクトの場合、 miniprogramRootデフォルトでminiprogramに設定され、 package.jsonその外部にあるため、 npm build は正しく機能しません。開発者ツールが npm 依存関係の場所を正しくインデックスできるように、次の構成をproject.config.jsonに手動で追加する必要があります。

 {
  ...
  「設定」: {
    ...
    "packNpmManually": true、
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "ミニプログラムNpmDistDir": "./ミニプログラム/"
      }
    ]
  }
}

 4.5 npmをビルドする 左上のツールバーをクリックします

ビルドが成功すると、次の画面が表示されます。

4.6 次に、右上隅の詳細---ローカル設定---npmモジュールの使用をクリックします。

5. コンポーネントを使用する

ボタンをグローバルに登録して使用します。まずapp.jsonに登録する

ここで、このボタン コンポーネントを使用するページをランダムに見つけます。

うまく使えているのがわかります。

これで、WeChatミニプログラムでvantフレームワークを使用する具体的な手順に関するこの記事は終了です。ミニプログラムでvantフレームワークを使用する方法の詳細については、123WORDPRESS.COMで以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。