乐趣区

关于taro:跨端实践-Taro-框架中该如何使用-Vant-组件库适配多端

jiezi

原文发表于 集体博客
掘金发表：跨端实际 | Taro 框架中该如何应用 Vant 组件库 - 适配多端

在 Taro 中应用有赞前端团队开源的挪动端组件库 Vant，能间接兼容应用的组件大略为 70%，而无奈做到百分百兼容。

那咱们又该如何调整，能力做到所有组件的多端适配呢？通过团队的多番摸索和实际，终于找到了一条光明大道。

跨端 UI 库抉择

Taro 是由 京东·凹凸实验室 倾力打造的多端开发解决方案。当应用 Taro 框架做业务开发时，外围目标就是为了可能只写一套代码，达到在不同端的统一体现。从我的项目侧，艰深的讲，就是为了让产品疾速上线。那么在应用 Taro 框架时，咱们还须要抉择一个优质的跨端组件库，晋升开发人员绘制页面的效率。

目前风行的挪动端组件库，次要有 Mint UI、WeUI、iView UI、layui、ElementUI、vant UI、Antd Design Mobile 等。以往在开发 H5 我的项目时，设计师选中一个适合格调的 UI 组件库，而后开发间接应用就能够了。但当咱们应用 Taro 跨端计划后，就不能随便抉择这些 UI 库了，因为这些 UI 库可能还未实现对应的跨端兼容能力。不过，也不须要太过放心，Taro 团队早就思考到了这个问题，对于一些罕用的 UI 组件库，曾经给予了一些接入计划。当然官网主推的是官网 UI 库：Taro UI、NutUI，不过有时候咱们就 偏偏不必官网举荐的。

从官网博客日志中，咱们发现有提到可应用 WeUI、vant UI、Antd Design Mobile这三个 UI 库，官网做了对应的模块封装。因为思考到团队前期应用 vue 语法栈，同时剖析了目前三个 Demo 案例的整体状况，最终认为 Vant UI 可能更满足前期的业务场景。

  • 兼容 WeUI 的例子
  • 兼容 Antd Design Mobile 的例子
  • 兼容 VantUI 的例子

Taro 中 Vant UI 的兼容性

在 Taro 中应用有赞前端团队开源的挪动端组件库 Vant，能间接兼容应用的组件大略为 70%，而无奈做到百分百兼容。原因无他，因为 Vant 是针对于 web 研发的挪动端组件库，而在小程序中因为局部特有 API 的调用限度（例如: 获取元素尺寸系列的 API 等）而无奈做到所有性能同步兼容。

目前组件反对度可参考：taro-vant 组件反对列表

Taro 中如何正当应用 Vant 组件库

Vant 是有赞前端团队开源的挪动端组件库，于 2017 年开源。目前官网提供了 Vant vue 版本（vant）和微信小程序版本（vant-weapp），也就是说针对不同的场景，应该就地取材的抉择不同组件库。

Vant Weapp 独自应用

Vant Weapp 组件库是有赞前端团队开源的反对微信小程序的挪动端组件库。如果业务场景上，用 Taro 框架仅仅是来开发微信小程序的，不外乎间接应用 Vant Weapp 肯定会比 Vant 更适合。

注：应用 Vant Weapp 原生第三方组件库进行开发的我的项目，不再具备多端转换的能力。

【第一步】：配置疏忽 vant 的款式尺寸转换。如果间接应用 Vant weapp 组件，会发现款式偏小的状况，这是因为 Taro 默认将 Vant weapp 的款式尺寸从 px 转换为了 rpx，能够通过配置来禁止转换，如下两种形式挑一种即可：

形式一：配置 selectorBlackList

// config/index.js

const config = {
  // ...
  mini: {
    postcss: {
      pxtransform: {
        enable: true,
        config: {
          // 过滤 vant 组件库的前缀：van-
          selectorBlackList: [/van-/],
        },
      },
    },
  },
};

形式二：配置 @tarojs/plugin-html 插件（用来兼容 web 组件的 html 标签）

// config/index.js
const config = {
  // ...
  plugins: [
    [
      "@tarojs/plugin-html",
      {
        // 过滤 vant 组件库的前缀：van-
        pxtransformBlackList: [/van-/],
      },
    ],
  ],
};

【第二步】：通过配置，将 Vant weapp 原生小程序文件拷贝到编译后的 dist 目录下,特地留神：因为不会检索组件互相调用关系，所以须要被动将wxs，common, 以及局部组件调用的组件也一并拷贝，例如：

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/", // 公共模块
        to: "dist/components/vant-weapp/dist/common/",
      },
      {
        from: "src/components/vant-weapp/dist/button", // 以后将要应用的组件
        to: "dist/components/vant-weapp/dist/button",
      },
      {
        from: "src/components/vant-weapp/dist/loading", // button 组件调用的组件
        to: "dist/components/vant-weapp/dist/loading",
      },
      // ...
    ],
    options: {},},
};

【第三步】：援用 Vant Weapp 组件，在 app 或者页面 config 配置文件中配置 usingComponents 字段，例如：

export default {
  navigationBarTitleText: "按钮显示页",
  usingComponents: {"van-button": "../../components/vant-weapp/dist/button/index",},
};

【第四步】：在页面中便能够间接应用 button 组件了。特地留神：在 Taro 3.x 版本中发现款式不失效时，须要将属性默认值改为传参模式，起因参考：8955，例如：将<van-button plain> 奢侈按钮 </van-button> 改为 <van-button plain="plain"> 奢侈按钮 </van-button>。

<template>
  <view>
    <van-button type="primary" :loading="true" loading-text="ing"
      >Button</van-button
    >
    <van-button plain="plain" type="info"> 奢侈按钮 </van-button>
  </view>
</template>

<script>
export default {name: "index",};
</script>

小程序成果示例如下图：

Vant 独自应用

在 Taro 我的项目中应用 vant 组件库，与应用其余 npm 包并无多大差异。咱们次要还是应该关注 vant 组件在各端上的兼容性差别，而后通过局部调整进行适配。

装置依赖

yarn add vant -S # 或 npm install vant -S

在页面中间接应用

<template>
  <view>
    <van-button type="primary">primary</van-button>
  </view>
</template>

<script>
import {Button} from "vant"; // 引入 button 组件

export default {
  components: {"van-button": Button,},
};
</script>

H5 和小程序成果示例如下图：

Vant 和 Vant Weapp 联合应用

在 Taro 中应用 Vant 时，如果存在只有 H5 端适配，而小程序端不适配的状况时。那么咱们应该引入 Vant Weapp 库，而后去独自适配微信小程序端。次要形式就是通过 Taro 内置的编译环境变量 process.env.TARO_ENV 来别离加载两个不同端的组件。具体操作如下：

首先，须要将 Vant Weapp 的原生组件引入到以后利用中

// app.config.js  vant weapp 的原生组件可定义在全局配置
export default {
  usingComponents: {
    "van-tab-weapp": "./components/vant-weapp/dist/tab/index",
    "van-tabs-weapp": "./components/vant-weapp/dist/tabs/index",
  },
};

而后, 将编译时环境变量 process.env.TARO_ENV 赋值到逻辑变量中

import {Tab, Tabs} from "vant"; // h5 端组件
import "./index.less";
export default {
  name: "Index",
  components: {
    "van-tab": Tab,
    "van-tabs": Tabs,
  },
  data() {
    return {
      isH5: process.env.TARO_ENV === "h5",
      isWeapp: process.env.TARO_ENV === "weapp",
    };
  },
};

最初，咱们能够在页面中增加判断条件，h5 加载 Vant 组件，小程序则加载 Vant Weapp 组件

<template>
  <view>
    <van-tabs v-if="isH5">
      <van-tab title="标签 1"> 内容 1</van-tab>
    </van-tabs>
    <van-tabs-weapp v-if="isWeapp">
      <van-tab-weapp title="标签 1"> 内容 1</van-tab-weapp>
    </van-tabs-weapp>
  </view>
</template>

H5 和小程序成果示例如下图：

自定义跨端组件

尽管通过社区优良的开源组件库我的项目 Vant，曾经可能满足绝大部分的业务场景，但也必然会存在局部组件性能在理论场景中无奈满足需要。对于这部分未笼罩到的性能，在理论开发中咱们须要通过自定义兼容计划去解决，实际上就是开发者本人写一个跨端组件。

通过 Taro 框架提供的内置环境变量process.env.TARO_ENV，咱们能够为不同端写有差别的业务代码，也能够对不同端不一样的体现进行兼容解决。

例如：须要开发一个标签组件，如果要求两端体现存在差别，那咱们须要别离开发一个 H5 组件和一个小程序组件，再通过编译时环境变量判断是 H5 还是小程序环境，来别离加载不同端平台的组件。同样值得一提的是，对于逻辑 js，Taro 还会依据以后编译环境，优先调用对应的端类型后缀的 js 文件，例如：编译微信小程序时，会优先查问是否存在 xxx.weapp.js 文件，编译 h5 时会优先查问 xxx.h5.js 文件是否存在，如果不存在则调用 xxx.js。那么咱们写自定义跨端组件时，就能够用这些个性了，上面举了一个小栗子。

自定义兼容，文件目录构造可如下：

.
├── components
│   ├── customLabel-h5.vue # 独自 h5 组件
│   └── customLabel-weapp.vue # 独自微信小程序组件
├── index.config.js
├── index.less
├── index.vue
├── utils.h5.js # h5 优先调用 utils.h5.js
└── utils.weapp.js # 微信小程序优先调用 utils.weapp.js

具体代码示例如下：

<template>
  <view>
    <custom-label> 自定义标签内容 </custom-label>
    <view> 注释内容 </view>
  </view>
</template>
let customLabel;
// 在编译阶段，会移除不属于以后编译类型的代码，只保留以后编译类型下的代码
if (process.env.TARO_ENV === "h5") {customLabel = require("./components/customLabel-h5.vue").default;
} else {customLabel = require("./components/customLabel-weapp.vue").default;
}
import {customFn} from "./utils"; // 会依据编译时环境，找对应的环境后缀文件。若都不存在则找默认 `.js` 文件
export default {
  name: "Index",
  components: {customLabel,},
};

H5 和小程序成果示例如下图：

Demo 示例

  • taro-vant-example

参考资料

  • taro-vant
  • 应用 Vant Weapp
退出移动版