vv13
博客Github

在 Taro3 中使用 WeUI 组件库

方式一:使用 useExtendedLib

在工程中配置 useExtendedLib 字段:

// app.config.ts 
export default {
    // ...
    useExtendedLib: {
    weui: true
  }
}

接下来只需要直接引入相应组件即可:

export default {
    // ...
  usingComponents: {
    "mp-slideview": "weui-miniprogram/slideview/slideview"
  },
};

强烈推荐官方支持的方式,在不知道这种配置模式的时候,我进行了方式二的尝试...

方式二:手动配置

Step 1. 将 npm 模块复制到 componets 目录下

在这一步,主要是将 npm 包中的编译后的原生微信小程序组件复制到我们项目下的组件库中:

npm i weui-miniprogram
cp -R node_modules/weui-miniprogram/miniprogram_dist ./src/components/weui-miniprogram/
npm un weui-miniprogram

Step 2. 引入全局样式

首先在 app.less 中引入全局 weui 样式,为了防止编译报错,需要指定引入方式为 css:

@import (css) './components/weui-miniprogram/weui-wxss/dist/style/weui.wxss';

Taro 默认将 vant 的样式尺寸从 px 转换为了 rpx,因此需要在进行规则配置忽略尺寸转换:

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

Step 3. 引入 WeUI 组件

在需要用到的 Page 中进行引入:

export default {
    // ...
  usingComponents: {
    "mp-slideview": "../../components/weui-miniprogram/slideview/slideview"
  },
};

Step 4. 手动配置原生文件

WeUI 组件中包含一些小程序原生文件的依赖,目前 Taro 没有对这些依赖进行分析,因此若出现报错:wxs not found 之类的问题,需要手动配置 copy 文件:

// config/index.js
const config = {
  // ...
  copy: {
        patterns: [
      { from: 'src/components/weui-miniprogram/slideview/slideview.wxs', to: 'dist/components/weui-miniprogram/slideview/slideview.wxs' },
    ],
    options: {
    }
  },
}

其他

若你使用了 TypeScript 模式的 Taro,在使用原生组件时可能会出现以下 IDE 提示报错:

Property 'mp-tabbar' does not exist on type 'JSX.IntrinsicElements'.ts(2339)

此时需要在 global.d.ts 中依次对原生组件进行类型申明:

declare namespace JSX {
  interface IntrinsicElements {
    'mp-tabbar': any;
  }
}