微信官方文檔：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/

1 第三方組件庫 Vant Weapp

官網：https://youzan.github.io/vant-weapp/#/intro

1.1 npm構建

從小程序基礎庫版本 2.2.1 或以上、及開發者工具 1.02.1808300 或以上開始，小程序支持使用 npm 安裝第三方包。

此文檔要求開發者們對 npm 有一定的了解，因此不會再去介紹 npm 的基本功能。如若之前未接觸過 npm，請翻閱 官方 npm 文檔 進行學習。

構建npm下要在自己電腦安裝，node.js
Nodejs下載

1、安裝好后配置Nodejs環境變量到path
2、在cmd打開項目路徑 初始化npm

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

3、構建npm
第一步：

第二步：選擇工具->構建npm

1.2 搜索框

這里以搜索框為例
index.json

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

index.wxml

<van-search value="小程序" placeholder="請輸入搜索關鍵詞" />

1.3 長按鈕

js

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

wxml

<view><van-button form-type='submit' id="bindBtn" type="primary" custom-style="width:100%;"size="large">充值</van-button> </view>

1.4 文字居中

<text id="money">￥5000.00</text> #money {font-size: 75rpx;display: flex;align-items: center;justify-content: center; }

歡迎加入博主官方QQ群交流: 779133600

總結

以上是生活随笔為你收集整理的微信小程序开发实战（二）UI组件介绍 Vant Weapp的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。