WeChat小規模プログラムクラウド開発個人ブログプロジェクトの戦闘(2)---はじめに-Vant-Weapp-smallプログラム-UI-コンポーネントライブラリ

WeChatミニプログラムクラウド開発個人ブログプロジェクトコンバットカタログ

1.準備
2. Vant WeappアプレットUIコンポーネントライブラリの紹介
3. トピックの追加、削除、変更4.
記事の追加、削除、変更
5. WeChatパブリックアカウントaccess_tokenへのクラウド関数アクセス6.パブリックアカウント
記事のアプレットへのクラウド関数同期

Vant Weappは 、モバイルVueコンポーネントライブラリ  であるVantのアプレットバージョンです。どちらも同じ視覚的仕様に基づいており、開発者がアプレットアプリケーションをすばやく構築するのに役立つ一貫したAPIインターフェイスを提供します。
アドレス:https : //youzan.github.io/vant-weapp

1.インストール

1. WeChat開発ツールで、ミニプログラムを右クリックし、ターミナルで開きます

図2に示すように、端末を行うnpm initコマンド

$ npm init

生成されたpackage.jsonファイル

3.インストール

$ npm i @vant/weapp -S --production

次に、npmパッケージをビルドします

WeChat Developer Toolsを開き、[Tools]-> [Build npm]をクリックし、[Use npm module]オプションをオンにします。ビルドが完了したら、コンポーネントをインポートできます

3.使用

1.コンポーネントを紹介する

Buttonコンポーネントを例にとると、app.jsonまたはxxx.jsonのButtonに対応するパスを構成するだけで済みます。ソースコードをダウンロードして@ vant / weappを使用する場合は、プロジェクトで@ vant / weappが配置されているディレクトリへのパスを変更してください。

// app.json或xxx.json
"usingComponents": {
  "van-button": "@vant/weapp/button"
}

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

コンポーネントを導入したら、home.wxmlで直接コンポーネントを使用します

<van-button type="primary">按钮</van-button>

効果:

おすすめ

転載: www.cnblogs.com/itguliang/p/12672729.html