阅读 793

如何在Taro中引用Vant-weapp?

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

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

git clone https://github.com/youzan/vant-weapp.git
复制代码

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

image.png

建议目录结构 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官方文档

文章分类
前端
文章标签