小さなプログラム -----vant weapp のインストールとカスタムテーマカラー

まず、アプレットのルート ディレクトリに package.json ファイルがあるかどうかを確認します。

そうでない場合は、プロジェクトのルート ディレクトリで cmd を開き、初期化に入りnpm init -y、パッケージ管理を初期化します。

vant weapp パッケージをインストールする

ルートディレクトリのcmdにnpm i @vant/[email protected] -S --production@を入力してインストールすると、バージョンを指定できます

app.jsonを変更する

app.json から "style": "v2" を削除すると、アプレットの基本コンポーネントの新しいバージョンでは、上書きが困難な多数のスタイルが強制的に追加されます。これらを閉じないと、一部のコンポーネントのスタイルが混乱します。

npmをビルドする

カスタムテーマの色

カスタムテーマカラー
https://github.com/youzan/vant-weapp/blob/dev/packages/common/style/var.less

アプレットapp.wxssのページの下の色を定義します。

page {
    
    
  --button-default-color: #ff0000;
}

ページ内で通常通り vanbutton を使用します

<van-button type="default">默认按钮</van-button>

テーマカラーが変更されていることがわかります