1: Cree una nueva uni-aplicación
2: Ejecute la página h5, el subprograma WeChat y su propio teléfono móvil.
Tres: catálogo de proyectos
páginas: almacenar cada componente de la página
estático: almacenar recursos estáticos
desempaquetar: existe aquí después del empaquetado
App.vue: archivo raíz
main.js: archivo de entrada principal
manifest.json: algunas
páginas de configuración de la aplicación.json : ruta de la página de la tienda (estilo) y global Path (estilo)
uni.scss: estilo incorporado
Cuatro: comprender el estilo en el sitio web oficial
Cinco: configurar la barra de pestañas (documento de referencia de estilo)
Si la aplicación es una aplicación de múltiples pestañas, puede especificar el rendimiento de la barra de pestañas a través del elemento de configuración de la barra de pestañas y la página correspondiente que se muestra cuando se cambia la pestaña. (La lista tiene al menos dos elementos)
Seis: Condición de configuración del modo de inicio La configuración del modo de
inicio tiene efecto solo durante el período de desarrollo y se utiliza para simular la escena de una página directa, como por ejemplo: después de reenviar un pequeño programa, el usuario hace clic en la página abierta.
Siete: Componentes: uni-app proporciona una gran cantidad de componentes básicos para los desarrolladores. Los desarrolladores pueden combinar varios componentes como bloques de construcción para formar sus propias aplicaciones. (Componentes ricos, comprensión de documentos oficiales)
componente de texto de texto
ver （= div）
botón (atributos enriquecidos, consulte los documentos oficiales)
Imagen del componente multimedia
Ocho: el estilo en uni-app
La forma de introducir css:
1 directamente en la página del componente
Introducir gráfico de fuentes de iconos:
1 Introducir fuentes de carpeta en
2 Introduzca
@import url ("./ static / fonts / iconfont.css") en el estilo público de App.vue ;
3 Modifique la ruta en el archivo iconfont.css
Agregue la ruta original: ~ @ / static / fonts /
4 referencia a la vista: iconfont debe ser
Importar archivos scss:
1 Descargar el complemento de compilación scss
2 Pestaña
Nueve: enlace de datos (similar a Vue99%)
Diez: ciclo de vida
Actualización desplegable: onPullDownRefresh (que pertenece a la función del ciclo de vida)
define la función de procesamiento onPullDownRefresh en js (al mismo nivel que onLoad y otras funciones del ciclo de vida), y escucha el evento de actualización desplegable del usuario de la página.
1 Primero otorgue permiso de actualización desplegable en json
2 Monitor desplegable actualización: (acción activada por actualización desplegable)
3 uni.stopPullDownRefresh detener actualización
4 La actualización desplegable se puede activar con el botón
Carga inferior de contenido nuevo: onReachBottom
Se puede configurar en json, qué tan lejos de la parte inferior para activar la función de carga inferior:
Adjunto
Once: solicitud de red (obtener)
Doce: Caché de datos
1 Configure el evento de clic para activar uni.setStorage; uni.getStorage; uni.removeStorage para almacenar por separado; consultar; eliminar datos.
2 El navegador busca en el almacenamiento local de la aplicación; el subprograma WeChat busca en el almacenamiento.
Trece: Cargue imágenes (consulte los documentos oficiales)
1 Active la función uni.chooseImage para cargar una imagen haciendo clic en el evento
2 this.imgArr = res.tempFilePaths asigne la dirección de la imagen a la matriz de imágenes
3 bucle v-for para representar la imagen
imagen de vista previa
Catorce:
Contenido html compatible con terminales cruzadas compilado condicionalmente :
Compatibilidad entre terminales del contenido js:
Compatibilidad entre terminales de contenido css:
Quince: Salto de navegación en
navegación declarativa uni
Navegación programática
Parámetro de navegación:
directamente después de la dirección (? Id = 80 & page = 1). La página web que acepta los parámetros recibe los parámetros en la carga.
Adjunto: atributo de tipo abierto: la forma de saltar a la página (salto declarativo)
Dieciséis: La creación de componentes en uni-app (igual que vue)
Las funciones del ciclo de vida de los componentes son las mismas que las de vue
1 antes
Crear 2 crear
3 antes Montar
4 montar
5 antes
Actualización 6 actualizar
7 antes
Destruir 8 destruir
Diecisiete: Comunicación de componentes de uni-app El
padre pasa valores al hijo:
1 El componente hijo enlaza datos en el componente padre
2 El componente secundario recibe los datos del componente principal a través de accesorios: [''}
El hijo pasa el valor al componente principal:
1 El componente hijo llama al método a través del evento click:
2 En el método this. $ Emit ('myEven', this.num): activa myEven del componente principal y pasa datos
3 El componente principal recibe datos:
Valor que pasa entre componentes hermanos
a ----> b
1 un componente desencadena eventos globalmente y pasa parámetros a través de uni. $ Emit
2 El componente b monitorea globalmente a través de uni. $ On y recibe parámetros (en el método created ())
Dieciocho: componentes de extensión uni ui
1 descargar
2 importar
3 registrar
4 método de llamada (solo copie el código y péguelo)
