小程序引入vant第三方库

小程序引入vant第三方库

有赞官方网址
https://vant-contrib.gitee.io/vant-weapp/#/home
(1)创建项目描述文件package.json
右击miniprogram目录->选中在终端打开
输入命令npm init
回车 回车
(2)通过npm安装vant第三方组件库
右击miniprogram目录->选中在终端打开
通过 npm 安装 npm i @vant/weapp -S --production
通过 yarn 安装 yarn add @vant/weapp --production
安装 0.x 版本 npm i vant-weapp -S --production
#安装成功看到文件夹node_modules
(3)点击工具菜单->构建npm
#将node_modues内容复制一份 miniprogram_npm
(4)点击详情
[*]使用npm模块

(5)在组件中配置要使用哪个第三方的组件

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

(6)在当前组件中使用button按钮

<van-button type="default">默认按钮</van-button>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在微信小程序中安装vant组件库,可以按照以下步骤进行操作: 1. 首先,在微信开发者工具的菜单栏中选择工具 -> 构建npm包。这将会生成两个文件,表示安装成功。\[1\] 2. 接下来,在小程序的入口文件app.js中,调用promisifyAll()方法,实现异步API的Promise化。可以使用以下代码实现: ```javascript import { promisifyAll } from './miniprogram/miniprogram_npm/miniprogram-api-promise/index' const wxp = wx.p = {} promisifyAll(wx, wxp) ``` 这样就可以将微信小程序的API转换为Promise形式,方便使用。\[2\] 3. 最后,在app.json或index.json文件中引入vant组件。可以在"usingComponents"字段中添加以下代码: ```json "usingComponents": { "van-button": "@vant/weapp/button/index" } ``` 这样就可以在小程序中使用vant组件了。\[1\] 需要注意的是,为了实现API的Promise化,需要安装并使用第三方npm包miniprogram-api-promise。可以使用以下命令进行安装: ```shell npm i -S miniprogram-api-promise@1.0.4 ``` 这是推荐的版本号,可以根据需要进行调整。\[3\] #### 引用[.reference_title] - *1* [微信小程序安装Vant组件库](https://blog.csdn.net/weixin_45673389/article/details/124079918)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [微信小程序--》Vant组件库的安装与使用](https://blog.csdn.net/qq_53123067/article/details/126305070)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值