Taro: 引入第三方vant-weapp报错

[JazzOne]

问题描述
引入第三方vant-weapp报错

复现步骤
[复现问题的步骤]

1. 下载vant-weapp
2. 拷贝dist文件内容至项目components文件夹
3. 引入组件并使用

期望行为
正常引入并使用

报错信息

系统信息

• 操作系统: [macOS 10.14.6]
• Taro 版本 [v.1.3.14]
• Node.js 版本 [v12.8.1]
• 报错平台 [weapp]

补充信息
[可选]
[根据你的调查研究，出现这个问题的原因可能在哪里？]

[mihuartuanr]

Taro中引入Vant Weapp，不能直接通过第三方NPM包的形式直接调用。

需要进行以下几步：

• 在github上找到Vant-weapp下载文件包，将对应的dist目录复制到项目/src/components/vant-weapp目录下。

• 在Pages对应文件的config.usingComponents中，配置每个页面所需要的组件。(无法在app.js中进行所谓的全局注册组件。)

  config = {
    navigationBarTitleText: '首页',
    usingComponents: {
      "van-button": "../../components/vant-weapp/button/index",
      "van-popup": "../../components/vant-weapp/popup/index"
    }
  }

• 在使用Vant-weapp组件后，taro构建会自动将相应的组件复制一份到dist/components下，而Vant-weapp的组件还依赖工具库/src/components/vant-weapp/wxs，该工具库taro不会自动复制到dist中。所以，我们需要修改/config/index.js文件中的config.copy.patterns，让其在编译时，自动复制到dist对应目录下。

  copy: {
    patterns: [
      {
        from: 'src/components/vant-weapp/wxs/',
        to: 'dist/components/vant-weapp/wxs/'
      }
    ],
    options: {
    }
  },

• 由于Vant-weapp的样式使用的单位是px，所以会被taro编译成rpx，以便对各个设配进行适配。可以通过修改/config/index.js文件中的config.weapp.module.pxtransform.selectorBlackList不让其单位转换。

pxtransform: {
  enable: true,
  config: {

  },
  selectorBlackList: [
    /^.van-.*?$/,  // 这里是vant-weapp中className的匹配模式
  ]
},

这是参考别人，自己又整理的，我也是大姑娘上轿。现在可用。

[JazzOne]

Taro中引入Vant Weapp，不能直接通过第三方NPM包的形式直接调用。

需要进行以下几步：

• 在github上找到Vant-weapp下载文件包，将对应的dist目录复制到项目/src/components/vant-weapp目录下。
• 在Pages对应文件的config.usingComponents中，配置每个页面所需要的组件。(无法在app.js中进行所谓的全局注册组件。)

  config = {
    navigationBarTitleText: '首页',
    usingComponents: {
      "van-button": "../../components/vant-weapp/button/index",
      "van-popup": "../../components/vant-weapp/popup/index"
    }
  }

• 在使用Vant-weapp组件后，taro构建会自动将相应的组件复制一份到dist/components下，而Vant-weapp的组件还依赖工具库/src/components/vant-weapp/wxs，该工具库taro不会自动复制到dist中。所以，我们需要修改/config/index.js文件中的config.copy.patterns，让其在编译时，自动复制到dist对应目录下。

  copy: {
    patterns: [
      {
        from: 'src/components/vant-weapp/wxs/',
        to: 'dist/components/vant-weapp/wxs/'
      }
    ],
    options: {
    }
  },

• 由于Vant-weapp的样式使用的单位是px，所以会被taro编译成rpx，以便对各个设配进行适配。可以通过修改/config/index.js文件中的config.weapp.module.pxtransform.selectorBlackList不让其单位转换。

pxtransform: {
  enable: true,
  config: {

  },
  selectorBlackList: [
    /^.van-.*?$/,  // 这里是vant-weapp中className的匹配模式
  ]
},

这是参考别人，自己又整理的，我也是大姑娘上轿。现在可用。

Vant-weapp的组件还依赖工具库/src/components/vant-weapp/wxs，该工具库taro不会自动复制到dist中。

如上所述，就是这个原因导致报错，现已解决

[journey-xt]

补充一下 Vant [email protected]+ wxs 位置在dis目录下 所以配置有所更改
patterns: [
{
from: 'src/components/vant-weapp/dist/wxs/',
to: 'dist/components/vant-weapp/dist/wxs/',
},
],

[xiao8Git]

taro 版本2.1.6里添加了下面配置还是会把px转成rpx，这应该是bug
selectorBlackList: [
/^.van-.*?$/, // 这里是vant-weapp中className的匹配模式
]

[erlei22]

taro 版本2.1.6里添加了下面配置还是会把px转成rpx，这应该是bug
selectorBlackList: [
/^.van-.*?$/, // 这里是vant-weapp中className的匹配模式
]

taro 版本2.1.1 也会出现这个问题