Usando Vant, la biblioteca de componentes móviles de código abierto del equipo front-end de Youzan en Taro, aproximadamente el 70 % de los componentes que se pueden usar directamente son compatibles, pero no pueden ser 100 % compatibles.
Entonces, ¿cómo nos ajustamos para lograr la adaptación multiterminal de todos los componentes? Después de mucha exploración y práctica, el equipo finalmente encontró un camino brillante.
Selección de biblioteca de interfaz de usuario cruzada
Taro es una solución de desarrollo de múltiples extremos creada por JD.com Labs. Cuando se utiliza el marco Taro para el desarrollo comercial, el objetivo principal es poder escribir solo un conjunto de código para lograr un rendimiento constante en diferentes lados. Desde el lado del proyecto, en términos sencillos, es hacer que el producto esté en línea rápidamente. Luego, al usar el marco Taro, también debemos elegir una biblioteca de componentes cruzados de alta calidad para mejorar la eficiencia de los desarrolladores para dibujar páginas.
En la actualidad, las bibliotecas de componentes de terminales móviles populares incluyen principalmente Mint UI, WeUI, iView UI, layui, ElementUI, vant UI, Antd Design Mobileetc. En el pasado, al desarrollar un proyecto H5, el diseñador seleccionaba una biblioteca de componentes de interfaz de usuario con un estilo adecuado y luego la desarrollaba y la usaba directamente. Pero cuando usamos la solución cruzada de Taro, no podemos elegir estas bibliotecas de interfaz de usuario a voluntad, porque es posible que estas bibliotecas de interfaz de usuario no hayan logrado la compatibilidad cruzada correspondiente. Sin embargo, no hay necesidad de preocuparse demasiado. El equipo de Taro ha considerado este problema durante mucho tiempo y ha proporcionado algunas soluciones de acceso para algunas bibliotecas de componentes de interfaz de usuario de uso común. Por supuesto, el impulso principal oficial es la biblioteca de interfaz de usuario oficial: Taro UI, NutUI, pero a veces simplemente lo hacemos 偏偏不用官方推荐的.
En el registro oficial del blog , encontramos que hay tres bibliotecas de interfaz de usuario que se pueden usar WeUI, vant UIy los funcionarios han realizado la encapsulación del módulo correspondiente. Antd Design MobileTeniendo en cuenta que el equipo usó la pila de sintaxis vue en la etapa posterior y analizó la situación general de los tres casos de demostración actuales, finalmente se creyó que Vant UIpodría ser más adecuado para los escenarios comerciales posteriores.
Compatibilidad de Vant UI en Taro
Como se mencionó anteriormente, al usar Vant, la biblioteca de componentes móviles de código abierto del equipo front-end de Youzan, en Taro, los componentes que se pueden usar directamente son alrededor del 70 %, pero no pueden ser 100 % compatibles. No hay otra razón, porque Vant es una biblioteca de componentes móviles desarrollada para la web, y en el applet, debido a las limitaciones de llamadas de algunas API únicas (por ejemplo: API para obtener series de tamaño de elementos, etc.), todas las funciones no pueden ser sincronizado y compatible. (Sin embargo, el método siempre es más difícil que la dificultad.)
Para el soporte de componentes actual, consulte: lista de soporte de componentes de tarovant
Cómo utilizar razonablemente la biblioteca de componentes Vant en Taro
Vant es una biblioteca de componentes móviles de código abierto del equipo front-end de Youzan. Fue de código abierto en 2017. Actualmente, la versión Vant vue (vant) y la versión del subprograma WeChat (vant-weapp) se proporcionan oficialmente, lo que significa que para diferentes escenarios, se deben seleccionar diferentes bibliotecas de componentes de acuerdo con las condiciones locales.
Vant Weapp solo
La biblioteca de componentes Vant Weapp es una biblioteca de componentes móviles de código abierto que admite miniprogramas de WeChat de código abierto por el equipo front-end de Youzan. Si en el escenario comercial, el marco Taro solo se usa para desarrollar miniprogramas de WeChat, es más adecuado usar Vant Weapp directamente que Vant.
Nota: Los proyectos desarrollados con la biblioteca de componentes de terceros nativos de Vant Weapp ya no tienen la capacidad de convertir múltiples terminales.
[Paso 1]: Configure la conversión de estilo y tamaño que ignora vant. Si usa el componente Vant weapp directamente, encontrará que el estilo es demasiado pequeño. Esto se debe a que Taro convierte el tamaño del estilo de Vant weapp de px a rpx de manera predeterminada. Puede deshabilitar la conversión a través de la configuración. Elija una de las siguientes dos métodos:
Método 1: Configurar selectorBlackList
// config/index.js
const config = {
// ...
mini: {
postcss: {
pxtransform: {
enable: true,
config: {
// 过滤 vant 组件库的前缀：van-
selectorBlackList: [/van-/],
},
},
},
},
};
复制代码Método 2: configure el complemento @tarojs/plugin-html (para compatibilidad con etiquetas html de componentes web)
// 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 和小程序效果示例如下图：
自定义跨端组件
Aunque Vant, un excelente proyecto de biblioteca de componentes de código abierto en la comunidad, ha sido capaz de cumplir con la mayoría de los escenarios comerciales, seguramente habrá algunas funciones de componentes que no pueden satisfacer las necesidades en los escenarios reales. Para esta parte de las funciones descubiertas, en el desarrollo real, necesitamos resolverlo a través de una solución de compatibilidad personalizada. De hecho, el desarrollador escribe un componente cruzado por sí mismo.
A través de las variables de entorno integradas proporcionadas por el marco Taro process.env.TARO_ENV, podemos escribir diferentes códigos comerciales para diferentes lados y también podemos manejar las diferentes actuaciones de diferentes lados de manera compatible.
Por ejemplo, se necesita desarrollar un componente de etiqueta. Si hay una diferencia en el rendimiento de los dos extremos, entonces necesitamos desarrollar un componente H5 y un componente de programa pequeño respectivamente, y luego juzgar si es H5 o un programa pequeño. entorno a través de las variables de entorno en tiempo de compilación para cargar diferentes plataformas finales, respectivamente. También vale la pena mencionar que para js lógico, Taro primero llamará al archivo js con el sufijo de tipo de terminal correspondiente de acuerdo con el entorno de compilación actual. Por ejemplo, al compilar un subprograma WeChat, primero consultará si el xxx.weapp.js El archivo existe Al compilar h5, primero verificará si el archivo xxx.h5.js existe, si no, llame a xxx.js. Entonces podemos usar estas características cuando escribimos componentes de extremo cruzado personalizados.Aquí hay una pequeña castaña.
Compatible con la personalización, la estructura del directorio de archivos puede ser la siguiente:
.
├── 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
复制代码Los ejemplos de código específicos son los siguientes:
<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,
},
};
复制代码Un ejemplo de los efectos H5 y applet es el siguiente: