Desarrollo WeChat Mini Program Vant WebApp

#Desarrollo WeChat Mini Program Vant WebApp| 来源: 网络整理| 查看: 265

1. Introducción

Sitio web oficial Vanthttps://youzan.github.io/vant-weapp/#/home

Recientemente, el programa WeChat Mini se utilizó en el proceso de uso de Vant. Según los pasos oficiales del sitio web, no ha tenido éxito.

2. Descripción ambiental

Entorno de desarrollo:

WeChat Development Tool 1.05.2107090 window npm 7.19.0 Tercero, instale Vant

Directorio de proyectos

Window WeChat Development Tool Terminal no ha estado disponible. Abra la carpeta para usar la instalación de CMD

1. Ingrese el directorio de miniprograma (No es necesario tener este directorio. Puede especificarlo usted mismo. Puede configurarlo correctamente), Instale con NPM I @Vant/WeApp Sin la autoinstalación de NPM, si no puede encontrar el paquete.json, cree un nuevo archivo paquete.json y agregue {} (en el directorio de miniprografía) 2. Modifique la App.json "Estilo" en App.json: "V2" elimina 3. Modificar proyecto.config.json "packNpmRelationList": [ { "packageJsonPath": "./miniprogram/package.json", // Especifique la ruta de paquete.json y haga clic en la construcción NPM para construir de acuerdo con el paquete.json "miniprogramNpmDistDir": "./miniprogram/" // Al hacer clic para construir NPM, la ruta de generación de miniprogram_npm, que se utiliza para el componente de importación para importar componentes } ] 4. Construir el paquete NPM Después de completar la construcción, se genera el directorio Miniprogram_NPM. Puede haber una brecha entre la versión de la herramienta de desarrollo. Cuatro, usa

Pruebe con los componentes del botón y el cuadro de diálogo, haga clic en el botón para activar el cuadro de diálogo

1. Introducción a los componentes en app.json o index.json

"usingComponents": { "van-button": "@vant/weapp/button/index", "van-dialog": "@vant/weapp/dialog/index" }

2. test.wxml Agregar etiquetas

Botón

3. Test.js Introducción y activación del método

import Dialog from '../../miniprogram_npm/@vant/weapp/dialog/dialog.js' // usa tu propio camino page({ click(){ Dialog.confirm({ title: 'Tener unas vacaciones', message: 'Me voy de vacaciones hoy, puedes salir, hola', }).then(() => { // confirmar }).catch(()=>{ // Cancelar }); } })

4. Prueba

5. Resumen El directorio de instalación no es fijo, puede personalizar el directorio de instalación, proyect.config.json La configuración es correcta App.json introdujo a los componentes globales, "usando componentes": {"van-bitton": "@vant/weApp/botón/index"},@vant/weApp/botón/índice Encuentre it It Diálogo de importación de ‘... /../ miniprogram_npm/@vant/dialog/dialog.js"

【本文地址】

公司简介

联系我们