如何在Taro中引用Vant-weapp？

作为一款小程序多端框架，Taro目前已支持React、Vue语法，这一特性使得Taro在小程序框架领域的占有率越来越高，但想要在这套框架中使用VantUI(weapp)却是十分麻烦：

一：克隆vant-weapp源码到本地

git clone https://github.com/youzan/vant-weapp.git

二、将其中的dist文件夹整个拷入taro项目中

建议目录结构 src>components>vant-weapp-dist

三、配置全局打包映射

在项目的config>index.js文件中更改如下代码：

//需要改动的地方在于config.copy.patterns
//原因是Taro在打包的并没有对Vant依赖进行分析，只能手动将依赖文件拷贝到打包后的目录中，copy配置项所起到的也就是这个作用。

const config = {
  ...
  copy: {
    patterns: [
      /**此处为公共组件，必需--start */
      {
        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',
      },
      /**此处为公共组件，必需--end */
      /**此处为按需组件，可选--start */
      {
        from: 'src/components/vant-weapp/dist/icon/index.wxml',
        to: 'dist/components/vant-weapp/dist/button/index.wxml',
      },
      {
        from: 'src/components/vant-weapp/dist/button/index.wxs',
        to: 'dist/components/vant-weapp/dist/button/index.wxs',
      },
      {
        from: 'src/components/vant-weapp/dist/button/index.wxss',
        to: 'dist/components/vant-weapp/dist/button/index.wxss',
      }
      /**此处为按需组件，可选--end */
    ],
    options: {},
  },
  ...
};

分析如上代码不难发现，代码重复率很高，所以我们对此其做进一步精简

/**
 * @description: 根据vant组件名，生成相应的映射地址
 * @param {*} componentName：组件名
 * @return {*} 组件映射地址
 */
const createVantPatterns = (componentName) => {
  const fileTypes = ['wxml', 'wxs', 'wxss'];
  return fileTypes.map((item) => {
    return {
      from: `src/components/vant-weapp/dist/${componentName}/index.${item}`,
      to: `dist/components/vant-weapp/dist/${componentName}/index.${item}`,
    };
  });
};
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',
      },
      ...createVantPatterns('icon'),
    ],
    options: {},
  },
  // ...
};

部分组件可能会涉及到不止一个组件依赖，需要对应的全部引入。（比如想要带有图标和加载动画的Button，除引入button之外，还需引入icon和loading才行。)

四、配置全局样式转换

在项目的config>index.js文件中更改如下代码：

//需要改动的地方在于config.mini.postcss.pxtransform.config
//Taro会默认将px转换为rpx,直接使用vant组件样式会有偏小的情况，故此处做禁止转换处理。

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

四、引用Vant组件

在页面的pages>index>index.config.js文件中更改如下代码：

//需要改动的地方在于usingComponents

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

五、使用Vant组件

//vue
<template>
  <view class="index">
    <text>{{ msg }}</text>
    <van-icon name="chat" color="red" />
  </view>
</template>
<script>
import './index.less';

export default {
  data() {
    return {
      msg: 'Hello world!23',
    };
  },
};
</script>

//react
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>
    )
  }
}

可能会遇到的坑及解决方案 （1）子组件内引用不生效：需要在外层父组件中引用。（建议在app.config.js中全局引入) (2) 更改vant组件的样式时，可能会出现px无法被编译为rpx的情况：直接在css中使用rpx单位。

参考地址： （1）Taro官方文档 （2）Vant-weapp官方文档