Uno, marco vant
El marco vantUI se usa a menudo para construir la biblioteca básica de componentes de páginas móviles. Para permitir que los usuarios obtengan una experiencia más nativa, es una muy buena opción de solución.
En cuanto a este marco, no solo tiene una versión adecuada para el andamiaje de mobile vue, sino que también tiene una versión de aplicación web que es compatible con el desarrollo de programas pequeños. En el contexto de menos componentes nativos de los applets de WeChat, generalmente usamos este marco como el principal marco de interfaz de usuario para el desarrollo cuando desarrollamos los applets de WeChat, lo que ahorra tiempo y esfuerzo y acorta considerablemente el ciclo de desarrollo.
Dado que el entorno de los programas pequeños es muy diferente al de los proyectos ordinarios de Vue, no es posible usar npm para construir directamente el marco vant si desea introducirlo en un programa pequeño. Será un poco más problemático, por lo que el El siguiente contenido presentará en detalle cómo introducir y usar Vant en el applet de WeChat.
2. Introduce Vant a través del paquete y úsalo.
① Abra el directorio del proyecto de nuestro applet y luego abra la ubicación donde se encuentra el archivo.
②Abra la ventana de la línea de comandos, ingrese npm init para crear el archivo del paquete y administre el paquete del complemento a través del archivo de configuración.
③ Luego, instale las dependencias de la misma manera que el proyecto vue.
npm i @vant/weapp -S --production
④ Modificar el archivo app.json
Elimine "style": "v2" de app.json, y la nueva versión de los componentes básicos del applet agregará con fuerza muchos estilos, que son difíciles de sobrescribir. Si no se cierran, los estilos de algunos componentes se confundirán.
⑤ Modificar proyecto.config.json
Para proyectos creados por herramientas de desarrollador, miniprogramRoot tiene como valor predeterminado miniprogram, package.json está fuera de él y npm build no funciona correctamente.
Debe agregar manualmente la siguiente configuración en project.config.json para que las herramientas de desarrollador puedan indexar correctamente la ubicación de la que depende npm.
{
...
"setting": {
...
"packNpmManually": flase,
"packNpmRelationList": [
{
"packageJsonPath": "./package.json",
"miniprogramNpmDistDir": "./miniprogram/"
}
]
}
}
Con respecto a la modificación de este archivo, depende principalmente de la plantilla de subprograma que usemos. Los directorios de archivos generados por diferentes plantillas son diferentes. Algunos directorios de plantillas en la nueva versión pueden hacer que el subprograma encuentre la ubicación de nuestro paquete npm, por lo que debemos hacer algo a este archivo algunos ajustes.
⑥Abra las herramientas para desarrolladores de WeChat, haga clic en Herramientas -> Generar npm y marque la opción para usar módulos npm. Una vez completada la compilación, puede importar componentes.
3. Usa el marco vant
Tomando el componente Button como ejemplo, solo necesita configurar la ruta correspondiente al Botón en app.json o index.json.
// app.json
"usingComponents": {
"van-button": "@vant/weapp/button/index"
}
<van-button type="primary">按钮</van-button>