太郎にあるYouzanフロントエンドチームのオープンソースモバイルコンポーネントライブラリであるVantを使用すると、直接使用できるコンポーネントの約70％に互換性がありますが、100％互換性があるわけではありません。
では、すべてのコンポーネントの多端末適応を達成するためにどのように調整するのでしょうか？多くの調査と練習を経て、チームはついに明るい道を見つけました。
クロスエンドUIライブラリの選択
Taroは、JD.comLabsによって作成されたマルチエンド開発ソリューションです。Taroフレームワークをビジネス開発に使用する場合、主な目的は、さまざまな側面で一貫したパフォーマンスを実現するために1セットのコードのみを記述できるようにすることです。プロジェクト側から見ると、素人の言葉で言えば、製品をすばやくオンラインにすることです。次に、Taroフレームワークを使用する場合、開発者がページを描画する効率を向上させるために、高品質のクロスエンドコンポーネントライブラリを選択する必要もあります。
現在、人気のあるモバイル端末コンポーネントライブラリには、主に、、、、、、Mint UIなどがあります。以前は、H5プロジェクトを開発するときに、設計者は適切なスタイルのUIコンポーネントライブラリを選択し、それを直接開発して使用していました。ただし、Taroのクロスエンドソリューションを使用する場合、これらのUIライブラリは対応するクロスエンド互換性を実現していない可能性があるため、これらのUIライブラリを自由に選択することはできません。ただし、あまり心配する必要はありません。太郎チームはこの問題を長い間検討しており、一般的に使用されるUIコンポーネントライブラリにいくつかのアクセスソリューションを提供してきました。もちろん、公式のメインプッシュは公式のUIライブラリです：、、しかし時々私たちはそれをするだけです。WeUIiView UIlayuiElementUIvant UIAntd Design MobileTaro UINutUI偏偏不用官方推荐的
公式ブログログWeUIから、使用できるUIライブラリが3つありvant UI、、、、および公式が対応するモジュールのカプセル化を行っていることがわかりました。Antd Design Mobileチームが後の段階でvue構文スタックを使用し、現在の3つのデモケースの全体的な状況を分析したことを考慮すると、最終的には、後のビジネスシナリオにより適しているVant UI可能性があるました。
太郎のVantUIの互換性
前述のように、太郎でYouzanフロントエンドチームのオープンソースモバイルコンポーネントライブラリであるVantを使用すると、直接使用できるコンポーネントは約70％ですが、100％互換性はありません。VantはWeb用に開発されたモバイルコンポーネントライブラリであり、アプレットでは、一部の固有のAPI（たとえば、要素サイズシリーズを取得するためのAPIなど）の呼び出し制限のため、すべての関数ができないため、他の理由はありません。同期され、互換性があります。（ただし、この方法は常に難易度よりも困難です。）
現在のコンポーネントサポートについては、以下を参照してください：taro-vantコンポーネントサポートリスト
太郎でVantコンポーネントライブラリを合理的に使用する方法
Vantは、Youzanフロントエンドチームによってオープンソース化されたモバイルコンポーネントライブラリです。2017年にオープンソース化されました。現在、Vant vueバージョン（vant）とWeChatアプレットバージョン（vant-weapp）が正式に提供されています。つまり、さまざまなシナリオで、地域の状況に応じてさまざまなコンポーネントライブラリを選択する必要があります。
VantWeappだけ
Vant Weappコンポーネントライブラリは、Youzanフロントエンドチームによってオープンソース化されたWeChatミニプログラムをサポートするオープンソースのモバイルコンポーネントライブラリです。ビジネスシナリオで、TaroフレームワークがWeChatミニプログラムの開発にのみ使用される場合は、VantよりもVantWeappを直接使用する方が適しています。
注：Vant Weappのネイティブサードパーティコンポーネントライブラリを使用して開発されたプロジェクトには、複数の端末を変換する機能がありません。
[ステップ1]：vantを無視するスタイルとサイズの変換を構成します。Vant weappコンポーネントを直接使用すると、スタイルが小さすぎることがわかります。これは、TaroがVantweappのスタイルサイズをデフォルトでpxからrpxに変換するためです。構成によって変換を無効にできます。次のいずれかを選択してください。 2つの方法：
方法1：selectorBlackListを構成する
// config/index.js
const config = {
// ...
mini: {
postcss: {
pxtransform: {
enable: true,
config: {
// 过滤 vant 组件库的前缀：van-
selectorBlackList: [/van-/],
},
},
},
},
};
复制代码方法2：@ 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ファイルを最初に呼び出します。たとえば、WeChatアプレットをコンパイルする場合、最初に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とアプレットの効果の例は次のとおりです。