Enlace: https://ke.qq.com/course/343370
I. Introducción a los conceptos básicos del
ciclo de vida de uniapp de punto de marco en el
disparador de lanzamiento cuando se completa la inicialización de uniapp, solo desencadena un
onShow global cuando se inicia uniapp o desde el fondo a la pantalla en primer plano en
Ocultar cuando uniapp del primer plano al fondo en
UniNViewMessage envía datos para escuchar la página nvue
Ciclo de vida de la página Uniapp
https://uniapp.dcloud.io/frame
ver documentación
Hay dos formas de enrutar uni-app: use el componente del navegador para saltar y llame a la API para saltar.
1. Abra una página nueva, redirección de página ===》 Llame a API uni.navigateTo, use el componente
2. Retorno de página, llame a API uni.navigateBack, use el componente, el usuario presione el botón de retorno de la esquina superior izquierda, el usuario de Android haga clic en el botón físico de retroceso
3. El cambio de pestaña llama a la API uni.switchTab, usa componentes, pestaña de cambio de usuario
4. Vuelva a cargar y llame a API uni.reLaunch y use componentes
Consejos:
navigateTo, redirectTo solo puede abrir páginas que no sean tabBar.
switchTab solo puede abrir la página tabBar.
reLaunch puede abrir cualquier página.
La barra de pestañas en la parte inferior de la página está determinada por la página, es decir, siempre que la página esté definida como una barra de pestañas, hay una barra de pestañas en la parte inferior.
No puede saltar a páginas en App.vue. Las unidades de CSS universal compatibles con uni-app para el
estilo y el diseño de la página
incluyen px, upx y vh.
Upx es una unidad relativa al ancho de la base y se puede adaptar al ancho de la pantalla. uni-app estipula que el ancho de la base de la pantalla es 750upx.
Upx2px
Debido a que upx es procesado por el compilador, el enlace dinámico de upx no tiene efecto. Puede
usar uni.upx2px (Número) para convertir a px antes de asignarlo.
P.ej
return uni.upx2px (750/2) + 'px';
importación de estilo
Utilice la instrucción @import para importar hojas de estilo externas. @import va seguido de la ruta relativa de la hoja de estilo externa que debe importarse. Utilice; para indicar el final de la declaración.
@import “… /… / common / uni.css”;
estilo en línea
1.estilo: el estilo estático se escribe uniformemente en la clase.
Estilos globales y estilos locales Los estilos
definidos en App.vue son estilos globales y se aplican a todas las páginas. El estilo definido en el archivo vue en el directorio de páginas es un estilo parcial, que solo actúa en la página correspondiente y anulará el mismo selector en App.vue.
Nota: La declaración @import en App.vue puede importar estilos fuera de línea, que también afectan a todas las páginas.
Variable
CSS Descripción de la variable CSS 5 + App applet H5
–status-bar-height Altura de la barra de estado del sistema Altura de la barra de estado del sistema 25px 0 –Área
de contenido de la parte superior de la ventana desde arriba 0 0 Altura de la barra de navegación –Área de contenido de la parte
inferior de la ventana desde la parte inferior 0 0 La altura de TabBar desde el
valor fijo
uni-app en la altura del componente es fija, no se puede modificar:
Descripción del componente 5 + App H5
NavigationBar Barra de navegación
44px 44px TabBar pestaña inferior 56px 50px
Diseño flexible
Para admitir multiplataforma, el marco recomienda usar el diseño Flex
Imagen de fondo
uni-app admite el uso de la configuración de imágenes de fondo en CSS. El método de uso es el mismo que el de los proyectos web normales. Tenga en cuenta los siguientes puntos:
Admite imágenes en formato base64.
Admite imágenes de ruta de red.
Tenga en cuenta que cuando utilice una imagen de fondo de ruta local: si la
imagen tiene un tamaño inferior a 40 kb, uni-app la convertirá automáticamente al formato base64;
La imagen es mayor o igual a 40 kb, y el desarrollador debe convertirla al formato base64 para su uso, o moverla al servidor y hacer referencia a ella desde la dirección de red.
La ruta de referencia de la imagen de fondo local solo admite rutas absolutas que comiencen con ~ @ (las rutas relativas no son compatibles).
.test2 { background-image: url ('~@/static/logo.png '); } Iconos de fuentes uni-app admite el uso de iconos de fuentes, y el uso es el mismo que el de los proyectos web normales. Tenga en cuenta lo siguiente:
Admite el icono de fuente de formato base64.
Icono de fuente de ruta de red de soporte.
La ruta de red debe agregar el encabezado del protocolo https.
El código copiado de http://www.iconfont.cn no tiene un encabezado de protocolo por defecto.
Soporte de fuente de icono de ruta local de Uni-app: si el
archivo de fuente tiene menos de 40kb, uni-app lo convertirá automáticamente al formato base64;
Si el archivo de la fuente es mayor o igual a 40 kb, el desarrollador debe convertirlo, de lo contrario, el uso no tendrá efecto;
La ruta de referencia de los archivos de fuentes solo admite rutas absolutas que comiencen con ~ @ (las rutas relativas no son compatibles).
@ font-face { font-family: test1-icon; src: url ('~@/static/iconfont.ttf '); } y uni-app admiten anidación y suma en plantillas de plantilla para la representación de listas y condiciones Representación.
Y no es un componente, son solo un elemento de empaquetado, no harán ningún renderizado en la página, solo aceptarán atributos de control.
Ejemplo de código
Cuando la prueba es verdadera, muestra { {item}} - { {index}} Cuando la prueba es falsa, muestra { {item}} - { {index}} ES6 es compatible con uni-app. Aunque es compatible con la mayoría de las API de ES6, también es compatible con ES7 await / async.NPM admite
uni-app admite el uso de npm para instalar paquetes de terceros.
Compatibilidad con TypeScript
Use el desarrollo de ts en uni-app
Compatibilidad con componentes Mini Program
uni-app Admite el uso de componentes Mini Program en 5+ App y Mini Programs.
Descripción de la diferencia de plataforma
Plataforma Soporte Estado Componente del programa Mini Directorio de almacenamiento
H5 No es compatible con
5 + App Soporte WeChat Mini Componente del programa wxcomponents
Soporte del programa WeChat Mini Soporte del programa WeChat Mini Componente wxcomponents
Soporte del programa Mini Alipay Componente del programa Mini Alipay Mycomponents
Soporte del programa Mini Baidu Componente del programa Mini Baidu SwanComponents
II. Vue Precauciones de uso
uni-app admite todas las gramáticas vue cuando se publica en H5; al publicar en aplicaciones y subprogramas, debido a las restricciones de la plataforma, es imposible implementar todas las gramáticas vue, pero uni-app sigue siendo la versión más compatible de la gramática vue. Marco final. Este artículo explicará las diferencias en detalle.
La
uni-aplicación de ciclo de vida es totalmente compatible con el ciclo de vida de las instancias de Vue y también agrega el ciclo de vida de la aplicación y el ciclo de vida de la página.
Para obtener más información, consulte el documento oficial de Vue: ganchos del ciclo de vida.
Nota
No utilice funciones de flecha en propiedades de opciones o devoluciones de llamada, como created: () => console.log (this.a) o vm. $ Watch ('a', newValue => this.myMethod ()). Debido a que la función de flecha está vinculada al contexto principal, esta no será la instancia de Vue como esperaba, y this.a o this.myMethod también estarán indefinidos.
Se recomienda utilizar onReady de uni-app en lugar de montó de vue.
Se recomienda utilizar onLoad de uni-app en lugar de vue's created.
Sintaxis de plantilla
uni-app es totalmente compatible con la sintaxis de plantilla de Vue.
Para obtener más información, consulte el documento oficial de Vue: sintaxis de plantilla.
Tenga en cuenta que si utiliza el antiguo modo de componente no personalizado, es decir, "usingComponents": false en el manifiesto, no se admite la sintaxis de algunas plantillas, pero este modo ya no se recomienda. Consulte los detalles.
El antiguo modo de componente no personalizado no es compatible con la situación:
No es compatible con HTML puro
No es compatible con algunas expresiones de representación de JavaScript complejas
No es compatible con los
datos de filtro, los datos de atributos
deben declararse como una función que devuelve un objeto de datos inicial; de lo contrario, cuando la página se cierra, los datos no se destruirán automáticamente y se mostrarán cuando la página se abra de nuevo Últimos datos.
// Uso correcto, use la función para devolver los
datos del objeto () { return { title: 'Hola' } }
// la redacción de error llevará a abrir la página nuevamente, la última vez que los datos muestren
los Datos: { título: 'el Hola' } la implementación de la variable global de las variables globales debe seguir el desarrollo de las normas Vue en modo de archivo único. Referencia detallada: varias implementaciones de variables globales uni-app
La sintaxis admitida por lass:
111
222
333
444
555
estilo de sintaxis soportada:
666
777 El
terminal no H5 no es compatible con el documento oficial de Vue: classObject y la sintaxis de styleObject en el enlace de Class y Style.
Ejemplos no admitidos:
Nota: Establezca el valor de píxel de px de la forma siguiente: style = "". El valor es el píxel real y el compilador no lo convertirá.
Además, puede utilizar el método calculado para generar una clase o cadena de estilo e insertarla en la página, por ejemplo:
<!-- 不支持 -->
<view class="container" :class="computedClassObject"></view>
El terminal que no es H5 actualmente no admite el uso de enlaces de clase y estilo en componentes personalizados
Atributos computacionales
Soporte completo para el documento oficial de Vue: Atributos computacionales.
Representación condicional
Soporte completo para documentos oficiales de Vue: Representación condicional
Lista de renderización
lista completa vue representación documento oficial Vue: Lista de renderizado
clave
Si la posición del elemento en la lista cambia dinámicamente o se agrega un nuevo elemento a la lista, y desea que los elementos de la lista mantengan sus propias características y estado (como el contenido de entrada en,
: el valor de la clave se proporciona en dos formas
Use v-for para hacer un bucle de una propiedad de un elemento en la matriz. El valor de la propiedad debe ser la única cadena o número en la lista y no se puede cambiar dinámicamente.
Usa el elemento en sí en el bucle v-for. En este momento, el elemento en sí debe ser una cadena o un número únicos.
Cuando el cambio de datos activa la capa de renderizado para volver a renderizar, los componentes con la clave se corregirán y el marco se asegurará de que se reordenen. No se vuelve a crear para garantizar que el componente mantenga su propio estado y para mejorar la eficiencia de la representación de la lista.
Si no proporciona: clave, se informará una advertencia. Si sabe que la lista es estática o no necesita prestar atención a su orden, puede optar por ignorarla.
Nota:
También se pueden usar eventos nativos que no están en la tabla de mapeo de eventos. Por ejemplo, el evento regionchange del componente map se escribe directamente como @regionchange en el componente. Al mismo tiempo, este evento también es muy especial. Su tipo de evento tiene begin y end two, lo que nos impide usar handleProxy. Distinga qué tipo de evento es, de modo que cuando escuche este tipo de evento, tanto el nombre del evento como el tipo de evento sean <map @ regiοnchange = "functionName" @ end = "functionName" @ begin = "functionName">
Enlace de control de formulario
Admite el documento oficial de Vue: Enlace de control de formulario.
Se recomienda utilizar uni-app: componente de formulario directamente en el proceso de desarrollo.
Componentes Componentes de
Vue Los
componentes son la parte más compleja de todo Vue.js y respaldan el documento oficial de Vue: Componentes.
Hay y solo se puede admitir en forma de componentes de un solo archivo (componentes .vue). Otros como: componentes dinámicos, renderizado personalizado y
componente
uni-app uni-app proporciona una gran cantidad de componentes de interfaz de usuario, como: selector, mapa, etc. Debe tenerse en cuenta que la vinculación de eventos en el componente nativo debe estar vinculada con la sintaxis de vinculación de eventos de Vue, como bindchange = ”eventName "Evento, debe escribirse como @ change =" eventName "
Ejemplo
<picker mode = "date": value = "date" start = "2015-09-01" end = "2017-09-01" @ change = "bindDateChange">
Selección actual: {
{date}}
Componente global
uni- La aplicación admite la configuración de componentes globales, que deben registrarse globalmente en main.js, y el componente se puede utilizar en todas las páginas después del registro.
Nota: El primer parámetro de Vue.component debe ser una cadena estática.
Ejemplo
Registro global en main.js
import Vue
from'vue ' import pageHead from' ./
components / page- head.vue ' Vue.component (' page-head ', pageHead) El
componente se puede utilizar directamente en index.vue
Método de escritura: comience con #ifdef o #ifndef más **% PLATFORM% ** y termine con #endif.
Compilación condicional de API
// #ifdef% PLATFORM%
implementación de API específica de la plataforma
// #endif
compilación condicional del componente
páginas.json compilación condicional
directorio estático compilación condicional
+ sugerencias de optimización del rendimiento
+ consideraciones de desarrollo de terminal cruzado uni-app
+ habilidades de desarrollo eficientes
- Use bloques de código para crear directamente plantillas de componentes
Para mejorar la eficiencia del desarrollo, HBuilderX encapsula códigos comunes de uni-app en bloques de código que comienzan con u. Por ejemplo, ingrese ulist y presione Enter en la etiqueta de la plantilla, y el siguiente código se generará automáticamente:
uni.showToast ({ título: '', máscara: duración falsa : 1500 }); uni-app tiene bloques de código compatibles, consulte la lista a continuación.
Bloque de código de etiqueta
uButton
uCheckbox
uGrid
uList
uListMedia
uRadio
uSwiper
Bloque de código JS
uRequest
uGetLocation
uShowToast
uShowCargando
uOcultarCargando
uShowModal
uShowActionSheet
uNavigateTo
uNavigateBack
uRedirectTo
uStartPullDownRefresh
uStopPullDownRefresh
uLogin
uShare
uPay
- Depurar con Chrome
- Utilice varias herramientas de desarrollo de programas pequeños para depurar
- Acerca de la depuración de aplicaciones
+
Marco de interfaz de usuario de preguntas frecuentes que se puede utilizar en uni-app: http://ask.dcloud.net.cn/article/35489
Detección de actualización de paquete completo de la aplicación Uni-app: https://ask.dcloud.net.cn/article/34972
Actualización en caliente de recursos de Uni-app: https://ask.dcloud.net.cn/article/35667
Guía de desarrollo de la barra de navegación de Uni-app: https://ask.dcloud.net.cn/article/34921
uni-app implementa variables globales: https://ask.dcloud.net.cn/article/35021
Directrices para convertir los applets de WeChat a uni-app: https://ask.dcloud.net.cn/article/35786
mpvue project (componente) guía de migración, ejemplos y resumen de recursos: https://ask.dcloud.net.cn/article/34945
uni-app hace referencia a bibliotecas de terceros de npm: https://ask.dcloud.net.cn/article/19727
Un resumen del SDK de terceros y los recursos del subprograma WeChat utilizado en uni-app: https://ask.dcloud.net.cn/article/35070
Use más de 5 controles de interfaz nativa en uni-app (incluido mapa, video, livepusher, código de barras, nview): https://ask.dcloud.net.cn/article/35036
Precauciones para usar la versión H5 de uni-app: https://ask.dcloud.net.cn/article/35232
Instrucciones de compatibilidad de la versión del enlace Uni-app (HBuilderX, cli, base personalizada, SDK local, motor de empaquetado en la nube): https://ask.dcloud.net.cn/article/35845
Seleccione y cargue archivos de video y que no sean imágenes en uni-app: https://ask.dcloud.net.cn/article/35547
===========================================
Sintaxis de plantilla y enlace de datos
Ejemplo
1. Solicite datos, almacene los datos en la matriz de noticias y actualice automáticamente la lista de plantillas de página
uni.request({
url: 'https://unidemo.dcloud.net.cn/api/news',
method: 'GET',
data: {},
success: res => {
console.log(res);
this.news = res.data;
},
fail: () => {},
complete: () => {}
});
2. Haga clic en la identificación del artículo entrante, abra la página del artículo a través de uni.navigateTo url + id
@tap="tapnews" :data-newsid="item.post_id"
tapnews(e){
console.log(e);
var newsids= e.currentTarget.dataset.newsid;
console.log(newsids);
uni.navigateTo({
url: '../info/info?newsid='+ newsids
});
}
3. Mostrar la página del artículo
uni.request({
url: 'https://unidemo.dcloud.net.cn/api/news/36kr/'+ e.newsid,
method: 'GET',
data: {},
success: res => {
this.title = res.data.title;
this.strings = res.data.content;
console.log(strings);
uni.hideLoading();
},
fail: () => {},
complete: () => {}
});
-
El modo estricto pages.json del directorio raíz puede saltar a una prueba de página personalizada
"Condición": {// Configuración del modo, válida solo durante el desarrollo
"actual": 0, // Modo actualmente activado (elemento de índice de la
lista ) "lista": [{ "nombre": "noticias", // Nombre del modo "Ruta": "páginas / info / info", // Iniciar la página, debe seleccionar "consulta": "newsid = 5196737" // Iniciar parámetros, entrar en la función onLoad de la página. } ] }