小程序必备技巧(4)—如何使用第三方组件库组件

156 阅读1分钟

1、初始化package.json

再利用npm安装第三方组件库前,需要通过

npm init -y

来初始化package.json文件

  • 需要注意的是:使用npm init -y的前提是项目所在目录不得包含中文
  • 若包含中文,不得加"-y",需要通过提示手动初始化

2、安装所需组件库

以vant为例,可参照官方文档进行安装

如:npm i @vant/weapp

3、勾选"使用npm模块"

在使用组件之前,需要在详情的“本地设置”中勾选“使用npm模块”:

4、对node_modules中的包进行转换

需要对node_modules中下载的包进行转换,转换成小程序所能识别使用的组件:

点击上方工具栏的“工具”按钮->选择“构建npm”

构建完成后,可发现在目录中多了个"miniprogram_npm"文件夹:

5、注册所需组件并使用

在.json文件中的"usingComponents"配置项中注册所需要的组件并在wxml使用即可,以vant的搜索框为例:

5-1、注册所需组件

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

5-2、使用组件

<van-search />

至此,在小程序中使用第三方组件的过程就完成啦~