小程序引入第三方组件库-VantWeapp
vant官网:(https://youzan.github.io/vant-weapp/#/intro)
github地址:(https://github.com/youzan/vant-weapp)
引入步骤:
1.在小程序文件根目录下新建miniprogram文件根目录初始化 npm init 生成package.josn
2.在执行 npm i vant-weapp -S --production会生成node_modules目录里面有安装的组件
3.回到微信开发者工具:点击工具-构建npm,然后会生成一个miniprogram_npm
4.此时就以构建成功(开发者工具升级到最新版,在详情里面勾选使用npm模块)
使用:(以button为例)
1.在app.json或当前.josn文件中引入组件,建议常用组件在app.json中引用,可全局使用
//注意引用路径要以自己项目路径来定
//注意引用路径要以自己项目路径来定
//注意引用路径要以自己项目路径来定
"usingComponents": {
"van-button": "../miniprogram_npm/vant-weapp/button"
}
2.在wxml中使用
<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>
以上就是使用的过程啦!