微信小程序的开发使用第三方组件库

使用第三方组件库(以vant weapp为例)

  1. 初始化
    右键单击miniprogram,选择在终端打开,输入命令npm init,以下的东西都可以默认(即回车即可)。
    在微信小程序开发工具中会多一个文件package.json,在这里面就可以进行包的配置。

  2. 安装第三方组件(vant组件库)
    在终端输入命令npm i vant-weapp -S --production
    微信小程序的开发使用第三方组件库_第1张图片

  3. 在小程序开发工具中选择左上栏的“工具”->“构建npm”
    在这里插入图片描述

    微信小程序的开发使用第三方组件库_第2张图片
    这个时候可以在文件夹miniprogram中看见一个新生成的文件夹miniprogram_npm,其中就有我们刚刚安装好的vant组件库
    微信小程序的开发使用第三方组件库_第3张图片

  4. 小程序开发工具中,点击右上角的“详情”,将“使用npm模块”勾选上
    微信小程序的开发使用第三方组件库_第4张图片
    只有将这个勾选上,才能使用第三方组件库

  5. 在需要使用该组件库的组件中的json文件中,添加需要使用的组件中的内容(以button为例)
    微信小程序的开发使用第三方组件库_第5张图片

  6. 在wxml文件中调用组件库
    微信小程序的开发使用第三方组件库_第6张图片

  7. 可以在模拟器显示区域看到效果
    微信小程序的开发使用第三方组件库_第7张图片
    以上就是在微信小程序中引用第三方组件库的过程

你可能感兴趣的:(记录)