Skip to main content
Version: 3.x

使用 Vant Weapp

Taro3 支持使用 Vant Weapp 组件库进行开发,示例仓库:taro3-vant-sample

注意:使用原生第三方组件库进行开发的项目,不再具有多端转换的能力

但是,如果你想使用 Vant Weapp 又想拥有多端转换的能力,强烈推荐 Vant Weapp 社区衍生库 @antmjs/vantui, 它是基于 Vant Weapp 开发的多端组件库,同时支持 Taro 和 React。拥有 Taro 多端转换的能力,同时和 Vant Weapp 的 UI 和 API 高度保持一致。

使用方法

配置忽略 vant 的样式尺寸转换

如果直接使用 vant 组件,会发现样式偏小的情况,这是因为 Taro 默认将 vant 的样式尺寸从 px 转换为了 rpx,可以通过配置 selectorblacklist 来禁止转换。

配置方法:

config/index.js
const config = {
// ...
mini: {
postcss: {
pxtransform: {
enable: true,
config: {
selectorBlackList: [/van-/]
}
}
}
},
}

配置 copy 小程序原生文件

vant 组件中包含一些小程序原生文件的依赖,目前 Taro 没有对这些依赖进行分析。因此需要配置 copy 把这些依赖移动到 dist 目录中,例如需要 copy wxs 和样式文件,部分配置如下

config/index.js
const config = {
// ...
copy: {
patterns: [
{ from: 'src/components/vant-weapp/dist/wxs', to: 'dist/components/vant-weapp/dist/wxs' },
{ from: 'src/components/vant-weapp/dist/common/style', to: 'dist/components/vant-weapp/dist/common/style' },
{ from: 'src/components/vant-weapp/dist/common/index.wxss', to: 'dist/components/vant-weapp/dist/common/index.wxss' },
{ from: 'src/components/vant-weapp/dist/calendar/index.wxs', to: 'dist/components/vant-weapp/dist/calendar/index.wxs' },
{ from: 'src/components/vant-weapp/dist/calendar/utils.wxs', to: 'dist/components/vant-weapp/dist/calendar/utils.wxs' },
{ from: 'src/components/vant-weapp/dist/calendar/calendar.wxml', to: 'dist/components/vant-weapp/dist/calendar/calendar.wxml' },
{ from: 'src/components/vant-weapp/dist/calendar/components/month/index.wxs', to: 'dist/components/vant-weapp/dist/calendar/components/month/index.wxs' },
],
options: {
}
},
}

引用 vant 组件

首先需要在 app 的 config页面的 config 文件中配置 usingComponents 字段,如:

export default {
navigationBarTitleText: '首页',
usingComponents: {
'van-button': '../../components/vant-weapp/dist/button/index'
}
}

然后在页面中便可以直接使用。

使用 vant 组件

1. 绑定属性

import React, { Component } from 'react'
import { View } from '@tarojs/components'

export default class Index extends Component {
render () {
return (
<View>
<van-button type='primary' loading loading-text='ing'>Button</van-button>
</View>
)
}
}

注意:如果组件的某些属性在 vant 文档里写着带有默认值 true,在 Taro 中使用时仍然需要显式设置为 true

2. 绑定事件

import React, { Component } from 'react'
import { View } from '@tarojs/components'

export default class Index extends Component {
handleClick = () => {
console.log('click')
}

onAfterRead = res => {
console.log(res)
}

render () {
return (
<View>
// 对应 bind:click 事件
<van-button type='primary' onClick={this.handleClick} >Button</van-button>
// 对应 bind:after-read 事件
<van-uploader fileList={[]} onAfterRead={this.onAfterRead} />
</View>
)
}
}

3. Slot

import React, { Component } from 'react'
import { View, Slot } from '@tarojs/components'

export default class Index extends Component {
render () {
return (
<View>
<van-calendar poppable show>
<Slot name='title'>
<View>Hello world</View>
</Slot>
</van-calendar>
</View>
)
}
}

处理 Vant 组件默认值失效的问题

v1.0.2+ 开始支持,且需要 Taro v3.4.10+

在默认情况下,第三方自定义组件的属性会被编译为形如:<van-empty image="{{i.image}}" />

这时自定义组件声明的默认值会失效(详情请浏览 #11575)。

Component({
props: {
image: {
type: String,
value: 'default'
}
}
})

所以我们需要使用 @tarojs/plugin-inject 为此属性增加默认值,把它编译为形如:<van-empty image="{{i.image===undefined?'default':i.image}}" />

用法:

const config = {
plugins: [
['@tarojs/plugin-inject', {
thirdPartyComponents: {
// 为 `van-empty` 组件的 image 属性设置默认值 'default'
'van-empty': {
'image': "'default'"
}
}
}]
]
}

常见问题

Vue3