小程序 --- Weapp 组件库的使用

0. 官网

https://vant.pro/vant-weapp/#/home

1. 环境搭建

1. 安装

npm i @vant/weapp

2. 修改 app.json

将 app.json 中的 "style": "v2" 去除。小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。

3. 构建 NPM 包

打开微信开发者工具，点击 工具 -> 构建 npm，并勾选 使用 npm 模块 选项，构建完成后，即可引入组件。

2. 组件使用

1. image 组件

1. 注册

1. app.json(全局使用) 或 pages/index/index.json(页面使用) 中配置

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

2. 使用

1. 网络图片

<van-image width="100" height="100" src="https://img.yzcdn.cn/vant/cat.jpeg" />

2. 本地图片

<!-- 不能使用 ../ 这种相对路径的方式,其路径从小程序中配置的源码路径开始写就可以了 -->
<van-image width="100" height="100" src="/assets/cat.jpeg" />

3. API

下面这些 API 在文档中都有示例,根据文档提示编写即可,每个组件的使用方式都一样

1. Props

---

参数	说明	类型	默认值
src	图片链接	string	-
fit	图片填充模式	string	fill
alt	替代文本	string	-
width	宽度，默认单位为px	string | number	-
height	高度，默认单位为px	string | number	-
radius	圆角大小，默认单位为px	string | number	0
round	是否显示为圆形	boolean	false
lazy-load	是否懒加载	boolean	false
webp v1.10.11	是否解析 webp 格式	boolean	false
show-error	是否展示图片加载失败提示	boolean	true
show-loading	是否展示图片加载中提示	boolean	true
use-error-slot	是否使用 error 插槽	boolean	false
use-loading-slot	是否使用 loading 插槽	boolean	false
show-menu-by-longpress	是否开启长按图片显示识别小程序码菜单	boolean	false

2. 图片填充模式

---

名称	含义
contain	保持宽高缩放图片，使图片的长边能完全显示出来
cover	保持宽高缩放图片，使图片的短边能完全显示出来，裁剪长边
fill	拉伸图片，使图片填满元素
widthFix	缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
heightFix	缩放模式，高度不变，宽度自动变化，保持原图宽高比不变
none	保持图片原有尺寸

3. Events

---

事件名	说明	回调参数
bind:click	点击图片时触发	event: Event
bind:load	图片加载完毕时触发	event: Event
bind:error	图片加载失败时触发	event: Event

4. Slots

---

名称	说明
loading	自定义加载中的提示内容
error	自定义加载失败时的提示内容

5. 外部样式类

---

类名	说明
custom-class	根节点样式类
image-class	图片样式类
loading-class	loading 样式类
error-class	error 样式类