notas de autoestudio de Uniapp (3) obtienen datos dinámicamente

Bien, ahora hemos completado la página de inicio. Si solo estamos creando un sistema de artículos, la página de inicio, la página de lista y la página de detalles son suficientes para nuestro uso.

Así que comenzamos a crear estas dos páginas en páginas.

Ahora agregue estos dos a la ruta pages.json:

La lista de íconos en nuestra página de inicio es una página estática y necesitamos conectarnos para saltar a la página de la lista.

Aquí necesitamos usar el método de salto incorporado de uniapp:

Aquí primero completamos la relación de salto entre páginas. Una vez completada, pasaremos parámetros entre páginas. ¡luego complete la interacción de datos dinámicos a través de ajax!

¡Sigue el mismo patrón! También completamos la página de detalles:

Esto implica un conocimiento con el que estamos muy familiarizados: ciclo de vida Necesitamos inyectar datos en la página durante la carga del ciclo de vida.

El llamado ciclo de vida es un conjunto de cosas como onload y onready. Si se explica en detalle aquí, será muy complicado. Debido a que onshow y onhide están en .vue diferentes, aquí significa que APP.vue y subpage .vue son ligeramente diferentes.

Aquí he compilado una lista y los estudiantes interesados ​​pueden estudiarla. Incluso si no quieres estudiar, de hecho, dominar una sola carga es suficiente para afrontar la mayoría de las situaciones.

Después de aprender a usar el ciclo de vida, lo siguiente que debemos ingresar es ajax para consultar los datos a través del puerto y luego representarlos en la página.

Uniapp proporciona un método uni.request para ayudarnos a obtener datos ajax. Consulte el ejemplo:

El método para usar ajax en uniapp es la combinación de mini programa y vue. Lo que hay que tener en cuenta aquí es que uniapp puede enviar un parámetro cuando la página salta y recibirlo a través de options.xx en la página recibida. Tenga en cuenta que en el ejemplo anterior, se recibe durante el ciclo de vida de carga y las opciones son un parámetro de carga.

Al saltar, puede encontrar que la identificación está empalmada.

Puede encontrar un problema aquí, es decir, el puerto que solicita localmente puede causar problemas entre dominios.

Aquí hay dos soluciones recomendadas: primero, use el navegador integrado de xhbuilder.

Segundo, si está usando el navegador Chrome, puede instalar un complemento entre dominios. Resuelve este problema.

El nombre de este complemento es: Allow-Control-Allow-Origin. Si no puede abrir el mercado de complementos cromados, es posible que deba encontrar una manera de sortear la pared.

Hay otro problema aquí, es decir, el título en la parte superior de nuestra página está configurado en enrutamiento pages.json, pero nuestros datos son dinámicos.

Cuando hacemos clic en un elemento, necesitamos modificar dinámicamente el título. En este momento, necesitamos usar el método setNavigationBarTitle proporcionado por uniapp.

Un conocimiento que falta en lo anterior es que después de obtener el contenido a través de ajax, está bien si el contenido es una cadena, pero puede ser un texto enriquecido, que es lo que a menudo detalles del contenido de la llamada.

Si el contenido es una pieza de HTML, no podemos ponerlo directamente en el proyecto porque no se puede analizar. En este momento necesitamos usar la etiqueta de texto enriquecido.

De esta forma se puede analizar el contenido correctamente.

Hasta ahora, hemos completado la página de inicio, la página de lista y la página de detalles. Se han construido las funciones básicas del proyecto. A continuación, entraremos en el estudio de otras funciones poderosas.

Debido a que he estado ocupado recientemente, los tutoriales de uniapp pueden suspenderse por un período de tiempo. Durante este período, recomendaré algunos tutoriales sencillos o algunos artículos de la colección de historias de Long Ge. Espero que me perdonen. .