微信小程序如何使用第三方组件库

在实际开发中通常会为了节约时间来使用第三方的组件库，这里演示小程序如何使用

利用npm使用vant组件库

①初始化

在项目的根目录右键，点击在终端打开，进入终端输入npm init，对项目进行初始化

这时候项目会多出来一个project.config.json

②安装相关包

同样是在项目的终端输入npm i vant-weapp -S --production安装vant组件库的包

③构建npm包

④使用vant组件库

在需要使用的页面下的json文件中，引入相关的组件

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

引入完成后我们就可以再页面上使用了

按钮

也可以参考vant官网https://youzan.github.io/vant-weapp/#/quickstart

 

ps：这里使用第三方组件库的时候可能会报个错

thirdScriptError 
 sdk uncaught third Error 
 module "miniprogram_npm/vant-weapp/common/utils" is not defined 
 Error: module "miniprogram_npm/vant-weapp/common/utils" is not defined
    at require (http://127.0.0.1:44143/appservice/__dev__/WAService.js:1:718604)
    at http://127.0.0.1:44143/appservice/__dev__/WAService.js:1:718354
    at http://127.0.0.1:44143/appservice/miniprogram_npm/vant-weapp/badge-group/index.js:5:14
    at require (http://127.0.0.1:44143/appservice/__dev__/WAService.js:1:718745)
    at :25:7
    at HTMLScriptElement.scriptLoaded (http://127.0.0.1:44143/appservice/appservice?t=1543388690933:3727:23)

我们只需要重新构建npm就行了