WeChatアプレット開発でvant uiコンポーネントを正しく使用する方法

WeChatアプレットは最終的にnpmをサポートしてサードパーティライブラリ(https://developers.weixin.qq ....)をインポートできますが、このインポートモードと使用モードは、使用するnpm呼び出しとは異なります。今日は、新しいvant applet uiライブラリに従ってnpmリソースをインポートする方法を説明します。

最初のステップ:

アプレットプロジェクトのルートディレクトリで実行します。

npmおよびvant-weapp -S --production

2番目のステップ:

WeChat開発者ツールが最新バージョンであることを確認し、クリックして「Build npm」を​​実行します
20180912230952_76073.png

正常に構築された後、プロンプトが表示されます:
20180912230949_96978.png

同時に、プロジェクトのルートディレクトリに追加のディレクトリ「miniprogram_npm」があります。これは、アプレットによって認識されるnpmサードパーティライブラリです。

20180912230907_21498.png

3番目のステップ:

この時点で、ページでvantコンポーネントを呼び出す必要がある場合は、対応するページjsonに次の構成を追加する必要があります。
20180912230905_91838.png

{

"usingComponents":{

    "van-button":"/miniprogram_npm/vant-weapp/button/index"

}

}

次に、このuiコンポーネントをwxmlで直接呼び出すことができます。
20180912230903_52769.png

vantライブラリの場合、実際にはページに対応するjsにvant-weappコンポーネントを必要としないことに注意してください。

私のブログで最初に公開された:http://www.leeon.me/a/use-van ...、転載するときに示してください!

おすすめ

転載: www.cnblogs.com/baimeishaoxia/p/12696409.html