51 lines
1.2 KiB
Markdown
51 lines
1.2 KiB
Markdown
# 使用第三方组件库
|
||
|
||
|
||
|
||
微信小程序的组件库也是非常丰富的，比较有名的：
|
||
|
||
- iView：https://weapp.iviewui.com/
|
||
|
||
- vant：https://vant-contrib.gitee.io/vant-weapp/#/home
|
||
|
||
|
||
|
||
> 微信官方也提供了一套官方的组件，叫做 WeUI，但是风格基本上就和微信非常相似
|
||
|
||
|
||
|
||
## vant 使用示例
|
||
|
||
首先第一步需要安装
|
||
|
||
```js
|
||
npm i @vant/weapp -S --production
|
||
```
|
||
|
||
但是在安装之前，需要先使用 npm init -y 初始化一下整个项目
|
||
|
||
|
||
|
||
第二步去掉 app.json 里面的 "style": "v2"，否则可能会出现样式混乱
|
||
|
||
|
||
|
||
新版的微信开发者工具不需要修改 project.config.json，所以我们直接进入到第四步，点击【工具】下面的【构建npm】，完成构建
|
||
|
||
<img src="https://xiejie-typora.oss-cn-chengdu.aliyuncs.com/2023-02-02-011459.png" alt="image-20230202091459194" style="zoom:50%;" />
|
||
|
||
构建成功之后，根目录下面会生成 miniprogram_npm 目录
|
||
|
||
<img src="https://xiejie-typora.oss-cn-chengdu.aliyuncs.com/2023-02-02-011642.png" alt="image-20230202091642411" style="zoom:50%;" />
|
||
|
||
使用组件时，需要现在页面的 json 中进行配置，例如：
|
||
|
||
```js
|
||
{
|
||
"usingComponents": {
|
||
"van-button": "@vant/weapp/button/index",
|
||
}
|
||
}
|
||
```
|
||
|