taro3-vant-sample

Taro3 中使用 vant-weapp 的示例 React 版本

需要关注的点

引用 vant 组件

引用 vant 组件需要在页面的 config 文件中进行配置，如

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

值得注意的是，无论是在页面还是组件中引用 vant 组件，都是在页面的 config 中进行配置引用。

配置 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 的样式尺寸转换

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

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