WeChat アプレットは vant コンポーネント ライブラリを使用します

公式ウェブサイト：https://vant-contrib.gitee.io/vant-weapp/#/quickstart

1.npmの初期化

npm intall

そして続けてください

package.jsonが表示されるまで

 2、バントを設置します

# 通过 npm 安装
npm i @vant/weapp -S --production

# 通过 yarn 安装
yarn add @vant/weapp --production

# 安装 0.x 版本
npm i vant-weapp -S --production

 3、app.jsonを変更する

 4、npmパッケージをビルドする

WeChat 開発者ツールを開き、[ツール] -> [npm の構築]をクリックします。

 miniprogram_npm ファイルを生成します。

5. project.config.jsonを変更する

“packNpmManually”:true

 

 6. 次に、通常の使用に対応するコンポーネントを見つけます。

ここでボタンを例に挙げます。

導入

app.jsonまたはでコンポーネントを導入しますindex.json。詳細については、 「クイック スタート」を参照してください。

"usingComponents": {
  "van-button": "@vant/weapp/button/index"
}

コードデモ

ボタンの種類

ページ/home.wxml

<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>

成功しなかった

キャッシュの消去

 

 つまり通常の使用