However, implementing VantUI(pervasive applications) in Taro’s appellate framework will prove to be a bit of a problem. The app supports React and Vue syntax, which has contributed to Taro’s growing popularity in the appellate framework segment.

I: Clone the source code locally

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

Copy the entire dist folder into the Taro project

The recommended directory structure is SRC > Components > vant-repeat-dist

Configure global packaging mapping

Change the following code in the project config>index.js file:

// What needs to be changed is config.copy. Patterns
The reason is that Taro does not analyze Vant dependencies in the package. Instead, the dependencies can only be manually copied to the packaged directory. This is exactly what the copy configuration item does.

const config = {
  ...
  copy: {
    patterns: [
      /** Here is a public component, must --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',},/** This is a public component. --end */ is required
      /** This is an on-demand component, optional --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',}/** This is an on-demand component, optional --end */].options: {},},... };Copy the code

An analysis of the code above shows a high rate of code duplication, so let’s simplify this further

/ * * *@description: Generates the corresponding mapping address * based on the vant component name@param {*} ComponentName: componentName *@return {*} Component mapping address */
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: {},},// ...
};
Copy the code

Some components may involve more than one component dependency and require the corresponding import of all. (For example, if you want a Button with ICONS and loading animations, you need to import ICONS and loading as well as buttons.)

Configure global style conversions

Change the following code in the project config>index.js file:

Is that the config / / needs to be changed. The mini. Postcss. Pxtransform. Config
Taro will convert px to RPX by default. Using the Vant component style directly will be too small, so the conversion is prohibited here.

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

4. Reference Vant components

In the pages>index>index.config.js file of the page, change the following code:

// What needs to be changed is usingComponents

export default {
  navigationBarTitleText: 'home'.usingComponents: {
    'van-icon': '.. /.. /components/vant-weapp/dist/icon/index',}};Copy the code

Use the Vant component

//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>

Copy the code
//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>)}}Copy the code

Possible pitfalls and solutions (1) References in child components do not take effect: references in outer parent components are required. (2) When changing the styles of vant components, it may occur that PX cannot be compiled to RPX: use RPX units directly in CSS.

(1) Appellate evidence (” experts “) (2) appellate evidence (” experts”